How to Create Star Ratings for Images Using HTML, CSS, and JavaScript
In this Javascript tutorial, we will see how to create an HTML page that displays an image and allows users to rate it.
When a user clicks on a star to rate an image, it visually highlights the selected stars in yellow and dims the unselected stars.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>View Image</title>
<!-- fontawesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
*{ box-sizing: border-box; margin: 0; padding: 0; color: #fff; }
body{ font-family: Arial, Helvetica, sans-serif; color: #333; background-color: #f2f2f2; }
.container{ max-width: 600px; margin: 20px auto; padding: 20px; background-color: #b33939;
border-radius: 5px; border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
h1{ font-size: 36px; font-weight: 600; margin-bottom: 20px; text-align: center; }
.image-wrapper{ position: relative; widows: 100%; padding-bottom: 60%; margin-bottom: 20px;
border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.image-wrapper img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
}
.overlay{ position: absolute; bottom: 0; left: 0; width: 100%;
padding: 10px; background-color: rgba(0, 0, 0, 0.2); color: #fff;
}
.overlay h3{ text-decoration: underline; margin-bottom: 5px; }
.rating-wrapper{ margin-bottom: 20px; }
.rating-wrapper h3{ font-size: 20px; margin-bottom: 10px; }
.rating-stars{ display: flex; align-items: center; }
.rating-stars input[type="radio"]{ display: none; }
.rating-stars label{ cursor: pointer; color: #333; font-size: 30px; margin-right: 10px; }
.rating-stars label:before{ content: '\2605'; }
.rating-stars label:hover{ color: #f1c40f; }
.rating{ display: flex; align-items: center; }
.stars{ display: inline-block; font-size: 3em; }
.stars::before{ content: '\2605'; color: #f1c40f; }
.rating-value{ margin-left: 0.5em; font-weight: bold; letter-spacing: .05em; }
@media only screen and (max-width:768px){
.container{ max-width: 90%; margin: 20px auto; padding: 10px; }
h1{ font-size: 24px; margin-bottom: 10px; }
.image-wrapper{ padding-bottom: 100%; margin-bottom: 10px; }
.overlay{ padding: 5px; }
.rating-wrapper h3{ font-size: 16px; margin-bottom: 5px; }
.rating-stars label{ font-size: 20px; margin-right: 5px; }
}
</style>
</head>
<body>
<!-- image link = https://pixabay.com/photos/morocco-city-historic-village-clay-2349647/ -->
<div class="container">
<h1>Historic Village</h1>
<div class="image-wrapper">
<img src="images/village.jpg" alt="village image">
<div class="overlay">
<h3>Morocco Historic Village</h3>
<p>
village Ait Benhaddou, located in the southern part of the country.
This UNESCO World Heritage Site is a stunning example
of Moroccan architecture, with its fortified walls and kasbahs
(traditional Moroccan houses).
</p>
</div>
</div>
<form action="#" class="rating-wrapper">
<h3>Rate This Image</h3>
<div class="rating">
<span class="stars"></span>
<span class="rating-value">4/5</span>
</div>
<div class="rating-stars">
<input type="radio" name="rating1" id="star1" value="1">
<label for="star1"></label>
<input type="radio" name="rating2" id="star2" value="2">
<label for="star2"></label>
<input type="radio" name="rating3" id="star3" value="3">
<label for="star3"></label>
<input type="radio" name="rating4" id="star4" value="4">
<label for="star4"></label>
<input type="radio" name="rating5" id="star5" value="5">
<label for="star5"></label>
</div>
</form>
</div>
<script>
// Get all input elements with type="radio" that are inside an element with the class "rating-stars"
const stars = document.querySelectorAll('.rating-stars input[type="radio"]');
// Attach a click event listener to each input element
stars.forEach((s)=>{
s.addEventListener('click',() => {
// Get the value of the clicked input element
const rating = s.value;
console.log(rating);
// Change the color of the labels of the first 'rating' stars to yellow (#ffc107)
for(let i = 1; i <= rating; i++)
{
document.querySelector(`#star${i} + label`).style.color = "#ffc107";
}
// Change the color of the labels of the remaining stars to gray (#333)
for(let i = parseInt(rating) + 1; i <= 5; i++)
{
document.querySelector(`#star${i} + label`).style.color = "#333";
}
});
});
</script>
</body>
</html>
Code Explanation:
This JavaScript code displays an image and allows users to rate it by selecting stars.
This JavaScript code performs the following actions:
1 - Selecting Elements: It selects all "radio" input elements within elements having the class "rating-stars".
2 - Event Listeners: It attaches a click event listener to each of these radio input elements.
3 - Event Handling: When a radio input is clicked (indicating a user's rating), it gets the value of the clicked input element (which corresponds to the rating).
4 - Coloring Stars: It changes the color of the labels of the first 'rating' stars to yellow (#ffc107) when a user selects a rating, and it sets the color of the labels of the remaining stars to gray (#333).
OUTPUT:
if you want the source code click on the download button below
