You need Login/Signup to run/submit the code.

Implement Star Rating Widget | Frontend Coding Challenge | DevKode Challenge

HTML/CSS/JavaScript React Beginner

828

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

Mockup

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