5-Star Rating System

<div class="rating-container"> <h1>Rate Us!</h1> <div class="stars"> <span class="star" data-value="1">★</span> <span class="star" data-value="2">★</span> <span class="star" data-value="3">★</span> <span class="star" data-value="4">★</span> <span class="star" data-value="5">★</span> </div> <p id="ratingCount">Total Ratings: 500</p> </div> <style> .rating-container { text-align: center; } .stars { display: inline-block; } .star { font-size: 40px; color: #ccc; cursor: pointer; transition: color 0.3s; } .star:hover, .star.active { color: gold; } #ratingCount { margin-top: 20px; font-size: 20px; } </style> <script> document.addEventListener('DOMContentLoaded', function () { const stars = document.querySelectorAll('.star'); const ratingCountDisplay = document.getElementById('ratingCount'); // Initialize rating count let ratingCount = localStorage.getItem('ratingCount') || 500; ratingCountDisplay.textContent = `Total Ratings: ${ratingCount}`; stars.forEach(star => { star.addEventListener('click', function () { const ratingValue = this.getAttribute('data-value'); // Highlight stars up to the clicked one stars.forEach(s => s.classList.remove('active')); for (let i = 0; i < ratingValue; i++) { stars[i].classList.add('active'); } // Update and store the rating count ratingCount++; localStorage.setItem('ratingCount', ratingCount); ratingCountDisplay.textContent = `Total Ratings: ${ratingCount}`; }); }); }); </script>