This article will demonstrate how to create a star rating project using JavaScript. Star rating is a way to give a rating to the content to show its quality or performance in different fields. On completion, it will look like this:
Prerequisites:
Approach:
- Create the basic structure using HTML entities, divs, and spans along with the corresponding class names. Using CSS styling properties, style the components with CSS properties like display, color, font size, margin, padding, and border for respective classes.
- In JavaScript access the html element using a document.getElementByClass name to get the list of span elements and getElementById.
- Use onclick attribute as an event listener to call the function according to the no. of star clicked.
- Remove already applied CSS by calling the remove method.
- Update the color of the stars and the output corresponding to the author’s action.
Example: In this example, we will create the star rating with the above approach.
HTML
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Star Rating</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="card"> <h1>JavaScript Star Rating</h1> <br /> <span onclick="gfg(1)" class="star">★ </span> <span onclick="gfg(2)" class="star">★ </span> <span onclick="gfg(3)" class="star">★ </span> <span onclick="gfg(4)" class="star">★ </span> <span onclick="gfg(5)" class="star">★ </span> <h3 id="output"> Rating is: 0/5 </h3> </div> <script src="script.js"></script> </body> </html> |
CSS
/* style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 50vh; display: flex; align-items: center; text-align: center; justify-content: center; background: hsl(137, 46%, 24%); font-family: "Poppins", sans-serif; } .card { max-width: 33rem; background: #fff; margin: 0 1rem; padding: 1rem; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); width: 100%; border-radius: 0.5rem; } .star { font-size: 10vh; } .one { color: rgb(255, 0, 0); } .two { color: rgb(255, 106, 0); } .three { color: rgb(251, 255, 120); } .four { color: rgb(255, 255, 0); } .five { color: rgb(24, 159, 14); } |
Javascript
// script.js // To access the stars let stars = document.getElementsByClassName("star"); let output = document.getElementById("output"); // Funtion to update rating function gfg(n) { remove(); for (let i = 0; i < n; i++) { if (n == 1) cls = "one"; else if (n == 2) cls = "two"; else if (n == 3) cls = "three"; else if (n == 4) cls = "four"; else if (n == 5) cls = "five"; stars[i].className = "star " + cls; } output.innerText = "Rating is: " + n + "/5"; } // To remove the pre-applied styling function remove() { let i = 0; while (i < 5) { stars[i].className = "star"; i++; } } |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
