Creating a JavaScript Star Rating Page with CSS Example

Posted by

Javascript Star Rating Page

/* CSS for star rating */
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}

.rating input {
display: none;
}

.rating label {
cursor: pointer;
font-size: 30px;
color: #ccc;
}

.rating label:before {
content: ‘2605’;
}

.rating input:checked ~ label {
color: #f7d138;
}

JavaScript Star Rating Page

// JavaScript for star rating functionality
const ratings = document.getElementsByName(‘rating’);
let ratingValue;

for (let i = 0; i < ratings.length; i++) {
ratings[i].addEventListener('change', function() {
ratingValue = this.value;
console.log('Selected rating: ' + ratingValue);
// You can add any other functionality here, like submitting the rating to a server
});
}