Building a Rating app with HTML CSS and JS

Lately, I have been working on a Rating app, and in the beginning, I have struggled a bit, luckily the dev community is big so I have gathered some solutions and finished my project. I have decided to build a similar and simple example and share my approach on how to build it.
For my model, I have used some apps that are linked to Google Play and you can check them out anytime.

To start things we need to import the font awesome from cdnjs Cloudflare that we will later use for the Star icons

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

For designing the nav-bar, and the content within it including the list of apps withing the container the following HTML code and CSS code should look like this

<nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Apps</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>
    </nav>
</div>
<!--App list rating design-->
<div class="app-list">
<ul>
        <li>
            <img src="https://i.ibb.co/q1Lcz6b/badlandbrowl.png" alt="appIcon" height="60" width="60">
            <a href="https://play.google.com/store/apps/details?id=com.frogmind.badlandbrawl&hl=en">Badland Browl</a>
            <figcaption><i>Sling your Clones onto the battlefield! Master your timing and...</i></figcaption>
          <div class="rating">
            <span style=" color: #FDE16D;"  class="fa fa-star"></span>
            <span style=" color: #FDE16D;" class="fa fa-star "></span>
            <span style=" color: #FDE16D;" class="fa fa-star "></span>
            <span style=" color: #FDE16D;" class="fa fa-star"></span>
            <span style=" color: #FDE16D;" class="fa fa-star"></span>
        </div>

/*Container of apps and menus*/
.container{
    background: rgb(87, 87, 87);
    width: 80em;
    height: 40em;
    border: 1px solid black;
    margin: 5em auto;
}
 /*Navigation bar and search bar*/
.navbar{
    height: 3.5em;
    background: rgb(59, 59, 59);
}

input[placeholder="search app"]{
    float: right;
    outline: none;
    margin: 1em 1.5em;
    height: 1.5em;
}

a img[alt=menuIcon]{
    margin:0.4em 1em;
}

nav a{
    text-decoration: none;
    font-size: 25px;
    font-family: 'Lato', sans-serif;
    color: rgb(2, 218, 218);
}

And adding the other games on the list, the following code should look something like this:

To customize the animation, and to get the rating effect from one star moving from the left to the right without skipping the color from one star to another we will add the "content: '\2605'" in the code of the star rating in the following CSS code :

  .rating > .fa:hover,
  .rating > .fa:hover  ~ .fa{
    text-shadow: 0 0 9px rgba(238, 255, 0, 0.788);
    color: #FDE16D;
    content: '\2605'; /* Full star in UTF-8 */
    position: relative;
    left: 0;
    }

    .fa.rated::before{
        /* the :hover should come first */
        content: '\2605';
        color: #FDE16D;
        font-size: 40px;
      }

With the following code, we will get the effect

With the implemented effects, one thing left to do is to put a code that will leave the rating and not make it disappear after the mouse is out of the star range. We will use A code with the "for loop" to make the limit of the stars and "if else" statement that when we hover over one or more stars that the color that we click on remains and change it to yellow and when we downgrade it that it comes back to the original color white.
The code will be implemented on the last game which you will be able to rate on the pen that i will put on the bottom.

var count;

function starmark(item){
count=item.id[0];
sessionStorage.starRating = count;
var subid= item.id.substring(1);
for(var i=0;i<5;i++)
{
if(i<count){
document.getElementById((i+1)+subid).style.color="#FDE16D";
}
else{
document.getElementById((i+1)+subid).style.color="white";
  }
 } 
}

With everything done, the final product should look something like this

Thank you for taking the time to check out my article, I truly hope that you were able to learn something, and to enjoy reading it. 🙂

If you wanna learn more about star rating apps and how to make them here are some similar articles and projects that you can check out.

WebSchools Simple Star Rating
Simple Javascript tehnique for Star Ratings
Creating a star based rating app with Vanila JS

Comments

[Alexandru Florea]

Great tutorial!

One small thing that may be beneficial to change is the placeholder selector input[placeholder="search app"]

In case you change the placeholder text you would also need to change the Css rule.

[Strahinja Babić]

Thank you so much 😊 And awesome, did not give that idea a thought, it is useful🙂 and thanks for the feedback I will definitely keep that in mind.