If you are looking for the Star Rating System and want to create it in HTML CSS & JavaScript then this blog could meet your demand.
In this blog, you will learn how to create a star rating system using HTML, CSS, and JavaScript. The instructions included in the post can help you build a system that allows users to rate something by selecting a certain number of stars. Recently I have provided a blog on Creating Dark & Light Mode I hope that will also help to enhance your HTML and CSS skills.
Typically, a star rating system consists of a set of stars that are displayed on a website or application, and users can select a certain number of stars to represent their rating. It is widely used to allow users to provide feedback or to rate items such as products, movies, or restaurants.
Have a look at the given image of our star rating system. Basically, in this star rating system, you will get changing the color of the stars when the user clicks on them and store the user’s rating.
If you would like to watch the demo of this Star Rating System and want to create it step by step in HTML CSS & JavaScript, then you can watch the video tutorial which is given below.
Video Tutorial | Star Rating in HTML CSS & JavaScript
In the video tutorial, you saw that there were initially five light-colored stars displayed on the screen. When I clicked on one of the stars, it changed to a yellow color, and the stars that came before it also changed to yellow. This demonstrates how the star rating system can be made dynamic by using JavaScript to update the appearance of the stars in real time based on user input.
I hope that the information and examples provided in this discussion have helped you understand how to create a star rating system using HTML, CSS, and JavaScript. If you are having trouble building the system on your own, and don’t want to watch the video tutorial then use the source code provided below to help you.
You May Like This:
Star Rating in HTML CSS & JavaScript [Source Code]
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Star Rating in HTML CSS & JavaScript by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-pUA-Compatible" content="ie=edge" />
<title>Star Rating in HTML CSS & JavaScript</title>
<link rel="stylesheet" href="style.css" />
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="rating-box">
<header>How was your experience?</header>
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #ffd195, #ffb283);
}
.rating-box {
position: relative;
background: #fff;
padding: 25px 50px 35px;
border-radius: 25px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.rating-box header {
font-size: 22px;
color: #dadada;
font-weight: 500;
margin-bottom: 20px;
text-align: center;
}
.rating-box .stars {
display: flex;
align-items: center;
gap: 25px;
}
.stars i {
color: #e6e6e6;
font-size: 35px;
cursor: pointer;
transition: color 0.2s ease;
}
.stars i.active {
color: #ff9c1a;
}
Third, paste the following codes into your script.js file.
// Select all elements with the "i" tag and store them in a NodeList called "stars"
const stars = document.querySelectorAll(".stars i");
// Loop through the "stars" NodeList
stars.forEach((star, index1) => {
// Add an event listener that runs a function when the "click" event is triggered
star.addEventListener("click", () => {
// Loop through the "stars" NodeList Again
stars.forEach((star, index2) => {
// Add the "active" class to the clicked star and any stars with a lower index
// and remove the "active" class from any stars with a higher index
index1 >= index2 ? star.classList.add("active") : star.classList.remove("active");
});
});
});
