In this article, we will build a simple star rating UI with the use of plain HTML, CSS and JavaScript. This is a common interview question for Frontend engineering roles. It is used for evaluating a candidate’s fundamental grasp of those three technologies.

By the end of this article you should be able to create a UI that behaves in the following way.

Problem

As a candidate, you should build a simple UI with HTML, CSS and vanilla JavaScript that renders five stars. On loading the UI, each star will have a default black color. But when one of them is clicked, colors of the star and its siblings that are to its left should turn to yellow.

Additionally, the weight (value) of the current rating should be rendered next to a Current rating text as shown in the gif. That means, if the user decides to give a rating of 4 stars, in addition to the changes in color, the user should be able to see the number 4 below the stars.

#javascript #front-end-development #frontend-interviews #css #html