Introduction
As you use most Applications/Websites there’ll be a time they’ll ask you to rate the App/Site, making this possible they’ll display a set of stars, and then you’ll click to your test according to your satisfaction on the App or website.
This is what we’ll be accomplishing in this tutorial, you’ll be able to use Vanilla Javascript to make star rating possible in the site/app.
Without wasting your precious time! Let's dive into this guide.
Prerequisite
Here are the things you need to know before being able to build the star rating project.
- HTML
- CSS
- JavaScript
Step By Step Approach To Building A Star Rating Project
We will start first by creating a simple HTML page. That will contain the icons of the star itself, this HTML page is the interface that you're able to see.
Below is the code that you’ll write on your index.html page.
| <!-- 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> |
In this HTML code snippet page, apart from the document's basic structure, there’s a procedure of span tag that contains the onclick, attribute! and it is named simultaneously, eg! gfg(1), gfg(2), etc… This Span tag also includes HTML entities characters for displaying a star shape with the text content of the span tag.
Below is the view you’ll see after completing the above snippet.
It’s time to style the interface above, the snippet below should be added to your style.css page
| /* 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; | |
| cursor: pointer; | |
| } | |
| .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); | |
| } |
Be certain the classes are well-targeted, then you’ll get a new interface like the one below.
Now, the next thing is to make the star icon a rating once you click it. So therefore we’ll make use of a JavaScript Event called **Onclick** this event helps you to interact with the JavaScript.
Name the onclick like this, **onclick="gfg()"** on your HTML page as shown above. Then you go to your JavaScript, call the onclick function gfg(), and write your code like the one you see below. This is the functionality of the star you see.
| // 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++; | |
| } | |
| } |
Note the JavaScript will be an external script meaning, you’ll write it in a separate file just like the **index.html**, **style.css**, and **script.js** then link properly as it’s done in the **index.html** as seen below.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
This link shows that the pages are external.
After applying all these snippets on the tutorial, here’s the Interface you’ll get on your screen, and then you’ll know what you did is correct. The star will change color according to each click!
Conclusion
In conclusion, adding a Star Rating functionality in the site FAQs is a modern web application development. And a Javascript beginner can adapt this technique to his/her development skill
Building a star-rating project using vanilla JavaScript is a great way for beginners to enhance their understanding of core JavaScript concepts while working with real-world projects. Following this tutorial, you learned how to create dynamic and interactive star ratings, which can be incorporated into various web applications.
Through this project, you gained hands-on experience with event listeners, DOM manipulation, and CSS styling to create a seamless user experience. Additionally, you explored how to handle user input by capturing and storing rating data.
This project serves as a foundation to explore more advanced topics in web development, such as data validation, server-side integration, and user feedback systems. As you continue to practice and build more projects, your JavaScript skills will improve, enabling you to take on more complex challenges. Keep experimenting and expanding on this project to make it more robust and adaptable to different applications.
I hope you found this tutorial incredibly valuable! Until next time, goodbye.
About The Author
Full-stack Laravel developer Emmanuel Okolie has 4+ years of experience in software development. He has developed full-fledged skills by combining software development, writing, and instructing others in what he does.
His stacks include ReactJs Laravel PHP JavaScript, and other languages and frameworks.
As a freelancer, he creates websites for clients and writes technical guides to show people how to do what he does.
If given the chance, Emmanuel Okolie would enjoy speaking with you. Please follow him on his website, Facebook, Github, LinkedIn, and Twitter.
Top comments (0)