Implement Star Rating Widget | Frontend Coding Challenge | DevKode Challenge
@Devtools Tech

HTML/CSS/JavaScriptReactBeginner
207
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

In this challenge, candidate needs to create a Star Rating Widget.

Mockup

Star Rating Widget

Demo

Functional Spec

  • There could be n stars.
  • Hovering on each star should change state from outline to fill.
  • Clicking on any star should change all stars till the clicked one to filled state and print the number of selected stars on the screen.

Code Templates

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Devtools Tech Sandbox | Star Rating Widget</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="star"></div>
    <div id="display-star"></div>

    <script src="./index.js"></script>
  </body>
</html>

Star Icons

<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>

CSS

@import 'https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css';

.fa-star-o:before {
    content: "\f006";
    color: #5f6368;
}

.fa-star:before {
    content: "\f005";
    color: #d56e0c;
}

JavaScript

/*
 * Creates star rating functionality
 * @param el DOM Element
 * @param count Number of stars
 * @param callback Returns selected star count to callback
 */
function Star(el, count, callback) {
    // write logic to create star rating utility.
}

function getStar(value) {
  document.getElementById('display-star').innerHTML = value;
}
Star("#star", 5, getStar);

Submission

Please start the timer before starting and finish your solution within 60 mins. Share your solution with us on Twitter or LinkedIn.

This question is part of DevKode Coding Challenges. Find the original challenge here