Building a star-based rating system is a great way to enhance any website's user interaction. JavaScript, alongside HTML and CSS, offers you all the tools you need to build a dynamic and interactive rating system. In this guide, we'll walk through creating a simple star rating system using the Document Object Model (DOM).
Prerequisites
To follow along with this tutorial, you should be familiar with basic HTML, CSS, and JavaScript concepts. Understanding how the DOM works will also be beneficial but not strictly necessary as we'll cover required parts.
Step 1: Setting Up the HTML Structure
First, we need to define the HTML structure for our star rating system. We'll use a series of span elements to represent our stars.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Rating System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="star-rating" id="starRating">
<span data-value="1">★</span>
<span data-value="2">★</span>
<span data-value="3">★</span>
<span data-value="4">★</span>
<span data-value="5">★</span>
</div>
<script src="script.js"></script>
</body>
</html>
The above structure sets up a container div with span elements representing stars, each associated with a data-value attribute that tracks its position.
Step 2: Styling the Stars with CSS
Let's add some styles to make our stars look more appealing. We'll use CSS to color and size them appropriately:
.star-rating {
font-size: 50px;
cursor: pointer;
color: lightgray;
}
.star-rating .selected {
color: gold;
}
.star-rating .hovered {
color: gold;
}
In this CSS snippet, we set the base font size and color of the stars to light gray. When a star is selected or hovered over, it turns to gold, indicating an active state.
Step 3: Adding Interactivity with JavaScript
Now, we need to make the stars interactive using JavaScript. We'll write code that reacts to user clicks and hovers:
document.addEventListener('DOMContentLoaded', function() {
const stars = document.querySelectorAll('#starRating span');
stars.forEach(star => {
star.addEventListener('click', setRating);
star.addEventListener('mouseover', hoverStars);
star.addEventListener('mouseout', resetStars);
});
});
function setRating(event) {
const selectedValue = parseInt(event.target.getAttribute('data-value'));
highlightStars(selectedValue);
}
function hoverStars(event) {
const hoveredValue = parseInt(event.target.getAttribute('data-value'));
highlightStars(hoveredValue);
}
function resetStars() {
const stars = document.querySelectorAll('#starRating span');
stars.forEach(star => {
star.classList.remove('hovered');
star.classList.remove('selected');
});
}
function highlightStars(rating) {
const stars = document.querySelectorAll('#starRating span');
stars.forEach(star => {
star.classList.remove('selected');
star.classList.remove('hovered');
if (parseInt(star.getAttribute('data-value')) <= rating) {
star.classList.add('hovered');
}
});
}
This JavaScript code listens for click and hover events on each star. The setRating function sets the selected star and below into the selected class, which changes their color. The stars above (lower value) are also adjusted during hovering, providing instant feedback to users.
Conclusion
Let's quickly recap the steps: we created an HTML structure for the stars, applied styles with CSS, and added interactive elements using JavaScript. This straightforward star rating system can be expanded further by storing user ratings or adding animation effects. By understanding and applying basic JavaScript with the DOM, you can build engaging and interactive user interfaces directly within your projects.
