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>
5-Star Rating System

संपर्क फॉर्म
