You need Login/Signup to run/submit the code.
Implement Star Rating Widget | Frontend Coding Challenge | DevKode Challenge
@Devtools Tech
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
HTML/CSS/JavaScript
HTML/CSS/JavaScript
React