Star Rating Interaction Using HTML CSS and JS With Free Source Code
Introduction
Hello coders, welcome to another new project. I hope you all are doing well. In our today’s project we’ve developed a star rating interaction with the help of frontend technologies html ,css and javascript. We’ve developed the structure of our project using html and then applied CSS to give some styling. We used JS in our HTML file for functionality.
This project is about how we rate some apps or website’s on the basis of their service. You’ll learn to build this type of tiny functions in this project that you can use later in your website and you can also customize it.
For every organization or brand feedbacks and ratings helps them to improve their services. This function they use in their website so that they can get user’s response on their services.
let’s understand our code.
index.html
This code creates a star rating system and makes an HTML structure with interactive functionality from JavaScript. The HTML part defines the layout, and in JavaScript, there is handling of user interactions— users are allowed to select a rating by clicking the stars.
HTML Section:
The HTML starts with the definition <!DOCTYPE html>, which declares that this is a document following the HTML5 specifications. Inside the <head> are the meta tags, defining what should occur. This sets the character encoding as UTF-8 and sets up the viewport for responsive design. The <title> is for the page title, and the <link> is to link to an external CSS file, style.css, to style this category page.
The star rating system is enclosed within a <div> having the class rating: contained in the <body>. It includes five <button> with class rating-button: that is part of a star rating system, it is a stand-in for one star. Nestled within each button is an SVG element and that it elements that represent as a star. The viewBox attributes enclosed in SVG to set a coordinate system and the path element is what describes the shape of the star. The fill=”currentColor” attribute allows CSS to fill the star with a color, which makes it possible that the color can change through the course.
JavaScript Section:
The JavaScript makes this static HTML interactive. It creates a Rating class that enables managing the behavior of star buttons. The constructor inside the class attaches a click event listener to ratingEl, the entire rating component. On clicking any star, the onClick method identifies the clicked star and updates the appearance of all stars. It appends the rating-button–active class to stars up through the clicked star and leaves others unactivated.
This script makes multiple rating systems on the same page work independently of one another, thus forming modular and reusable code in various Web projects. This pairing of HTML and JavaScript provides a powerful, user-friendly star rating system that is dynamic.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Star Rating Interaction</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/08/post9.png 733w, https://developergoutam.com/wp-content/uploads/2024/08/post9-300x189.png 300w, https://developergoutam.com/wp-content/uploads/2024/08/post9-150x95.png 150w, https://developergoutam.com/wp-content/uploads/2024/08/post9-450x284.png 450w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="rating">
<button class="rating-button">
<svg class="star" viewBox="0 -10 511.98685 511" xmlns="http://www.w3.org/2000/svg">
<path
d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
fill="currentColor" />
</svg>
</button>
<button class="rating-button">
<svg class="star" viewBox="0 -10 511.98685 511" xmlns="http://www.w3.org/2000/svg">
<path
d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
fill="currentColor" />
</svg>
</button>
<button class="rating-button">
<svg class="star" viewBox="0 -10 511.98685 511" xmlns="http://www.w3.org/2000/svg">
<path
d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
fill="currentColor" />
</svg>
</button>
<button class="rating-button">
<svg class="star" viewBox="0 -10 511.98685 511" xmlns="http://www.w3.org/2000/svg">
<path
d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
fill="currentColor" />
</svg>
</button>
<button class="rating-button">
<svg class="star" viewBox="0 -10 511.98685 511" xmlns="http://www.w3.org/2000/svg">
<path
d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0"
fill="currentColor" />
</svg>
</button>
</div>
<script>
class Rating {
constructor(ratingEl) {
this.ratingEl = ratingEl;
setTimeout(() => {
this.ratingEl.classList.add("rating--animatable");
}, 0);
this.ratingEl.addEventListener("click", this.onClick.bind(this));
}
get ratingButtons() {
return [...this.ratingEl.querySelectorAll(".rating-button")];
}
get offButtons() {
return this.ratingButtons.filter(
(button) => !button.classList.contains("rating-button--active")
);
}
onClick(e) {
const target = e.target.matches(".rating-button")
? e.target
: e.target.closest(".rating-button");
if (!target) return;
this.ratingButtons.forEach((button) => {
button.style.setProperty("--transition-delay", 0);
});
this.offButtons.forEach((button, index) => {
const DELAY_UNIT = 100;
button.style.setProperty("--transition-delay", `${DELAY_UNIT * index}ms`);
});
const clickedButtonIndex = this.ratingButtons.indexOf(target);
this.ratingButtons.forEach((button, index) => {
if (index <= clickedButtonIndex) {
button.classList.add("rating-button--active");
} else {
button.classList.remove("rating-button--active");
}
});
}
}
Array.from(document.querySelectorAll(".rating")).forEach(
(ratingEl) => new Rating(ratingEl)
);
</script>
</body>
</html>
style.css
This CSS code styles a star rating system with a focus on interactive and visual effects.
The * selector makes sure padding and borders are included in the total width and height of the element by applying the box-sizing: border-box property globally. This greatly simplifies the math used to calculate layouts. The :root selector sets CSS variables for standard theming throughout the document. The –background-color makes the background of the page a dark color, #151515. The variables –on-color and –off-color are used for active and non-active star controls.
The body selector removes all the default margins and centers the content vertically and horizontally with Flexbox. It also ensures a minimum page width of 320px and fills the viewport height, ensuring responsiveness in the rating system and that it’s centered. The .rating class styles the container for the star buttons. It removes default list styles and aligns stars horizontally, with a slight gap.
The .rating-button class styles each star button by removing the default button appearance and outline. It sets the cursor to a pointer to indicate clickability and removes the default padding and borders. Lastly, –transition-delay is used for animation timing. Finally, it uses the –transition-delay variable for animation timing. The .rating–animatable .rating-button selector applies a smooth transform transition effect to the buttons, which enhances the interactive experience with buttons.
The .rating-button:active and the .rating-button–active:active rules change the scale of the button when pressed to provide visual feedback. The class .star styles the SVG stars with their initial scale and color. Active stars, indicated by .rating-button–active .star, have a bigger scale and rotate while changing colors due to the transitions defined for a dynamic user experience.
* {
box-sizing: border-box;
}
:root {
--background-color: #151515;
--on-color: #ffc107;
--off-color: #666;
background-color: var(--background-color);
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.rating {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0 4px;
height: 40px;
}
.rating-button {
appearance: none;
background: none;
outline: none;
border: none;
padding: 0;
height: 100%;
cursor: pointer;
--transition-delay: 0s;
}
.rating--animatable .rating-button {
transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1) transform;
}
.rating-button:active {
transform: scale(0.8);
}
.rating-button--active:active {
transform: scale(1.1);
}
.star {
transform: scale(0.5) rotate(0deg);
height: 100%;
color: var(--off-color);
}
.rating--animatable .star {
transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) all;
transition-delay: var(--transition-delay);
}
.rating-button--active .star {
transform: scale(0.9) rotate(360deg);
color: var(--on-color);
}