KamCode: Star Rating

Star Rating

Interactive Star Rating project | html css and javascript

How to create Analog Clock using Html Css and Javascrip

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review Star Rating</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="rating">
            <span class="star" data-rating="1">★</span>
            <span class="star" data-rating="2">★</span>
            <span class="star" data-rating="3">★</span>
            <span class="star" data-rating="4">★</span>
            <span class="star" data-rating="5">★</span>
        </div>
        <p>Rating: <span id="selected-rating">0</span> star</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    background-color: bisque;
}

.container {
    background-color: #fff;
    width: 250px;
    height: 100px;
    padding: 10px;
    text-align: center;
    border-radius: 2rem;
}

.rating {
    font-size: 36px;
}

.star {
    cursor: pointer;
    color: rgb(139, 139, 139);
    transition: color 0.2s;
}

JAVASCRIPT

const stars = document.querySelectorAll('.star');
const selectedRating = document.getElementById('selected-rating');

stars.forEach(star => {
    star.addEventListener('click', () => {
        const rating = parseInt(star.getAttribute('data-rating'));
        selectedRating.textContent = rating;
        resetStars();
        highlightStars(rating);
    });
});

function resetStars() {
    stars.forEach(star => {
        star.style.color = 'gray';
    });
}

function highlightStars(rating) {
    for (let i = 0; i < rating; i++) {
        stars[i].style.color = 'gold';
    }
}

Star Rating

Interactive Star Rating project | html css and javascript

How to create Analog Clock using Html Css and Javascrip

KamCode | All right reserved.