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

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.


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


Star Rating Widget


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


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

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

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

Star Icons

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


@import '';

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

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


 * 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);


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