How To Create a User Rating Scorecard using CSS?

Last Updated : 23 May, 2024

The user rating scorecard allows users to interact with our website by rating content or products. If we use the rating scorecard on our webpage then users can easily understand the quality of a product and they can buy the good one.

Approach

First, create a basic Html structure and then create a container for the rating scorecard and include elements like: star ratings, average rating display, and progress bars for each rating level.
Then use the Css for style the page include the container, stars, user img, user description and for the progressbar. And add transitions and hover effects to make interactions smooth and user friendly.
To make the scorecard responsive use the css media query, which is help it to adjust in any devices like : desktop, tablet, mobile.
In the javascript part first get the reference for all the needed things like : stars, progressbar etc.
Then attached the event listeners to capture user ratings and use a function for show the Average Rating, update the total voat for the individual star, progressbar width dynamically.

Example: The example code below shows how to create a user rating scorecard using CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>User Rating Scorecard</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
             alt="User Image">
        <div class="user-info">
            <h2 class="user-name">John Doe</h2>
            <p class="user-description">Web Developer with 5
              years of experience in creating dynamic websites.</p>
            <div class="average-rating">
                Average Rating: <span id="average-rating">0.0</span>
            </div>
            <div class="rating" id="user-rating">
                <span class="star" 
                      data-value="1">&#9733;</span>
                <span class="star" data-value="2">&#9733;</span>
                <span class="star" data-value="3">&#9733;</span>
                <span class="star" data-value="4">&#9733;</span>
                <span class="star" data-value="5">&#9733;</span>
            </div>
            <div class="progress-bars">
                <div class="progress-bar-container" 
                     data-stars="1">
                    1 star:
                    <div class="progress-bar">
                        <div class="progress"
                             id="progress-1"></div>
                    </div>
                    <span id="progress-1-votes">0</span> votes
                </div>
                <div class="progress-bar-container"
                     data-stars="2">
                    2 star:
                    <div class="progress-bar">
                        <div class="progress"
                             id="progress-2"></div>
                    </div>
                    <span id="progress-2-votes">0</span> votes
                </div>
                <div class="progress-bar-container"
                     data-stars="3">
                    3 star:
                    <div class="progress-bar">
                        <div class="progress"
                             id="progress-3"></div>
                    </div>
                    <span id="progress-3-votes">0</span> votes
                </div>
                <div class="progress-bar-container" 
                     data-stars="4">
                    4 star:
                    <div class="progress-bar">
                        <div class="progress" 
                             id="progress-4"></div>
                    </div>
                    <span id="progress-4-votes">0</span> votes
                </div>
                <div class="progress-bar-container" 
                     data-stars="5">
                    5 star:
                    <div class="progress-bar">
                        <div class="progress"
                             id="progress-5"></div>
                    </div>
                    <span id="progress-5-votes">0</span> votes
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

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

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 400px;
    text-align: center;
    transition: transform 0.3s ease;
}

.container:hover {
    transform: scale(1.05);
}

img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 10px;
}

.user-info {
    margin-top: 15px;
}

.user-name {
    color: rgb(26, 232, 47);
    font-size: 2rem;
}

.user-description {
    color: rgb(20, 84, 221);
    font-size: 1.25rem;
}

.average-rating {
    margin-top: 10px;
    font-weight: bold;
    font-size: 1.2rem;
}

.rating {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.star {
    font-size: 2rem;
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
}

.star:hover,
.star.selected {
    color: #ffca08;
}

.progress-bars {
    margin-top: 20px;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.progress-bar {
    flex-grow: 1;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 10px;
    position: relative;
    height: 10px;
}

.progress {
    height: 10px;
    width: 0;
    transition: width 0.5s ease;
    background: transparent;
}

@media (max-width: 400px) {
    .progress-bar-container span {
        display: none;
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', () => 
{
    const stars = document
    .querySelectorAll('.star');
    const averageRatingSpan = document
    .getElementById('average-rating');
    const progressElements = {
        1: document
        .getElementById('progress-1'),
        2: document
        .getElementById('progress-2'),
        3: document
        .getElementById('progress-3'),
        4: document
        .getElementById('progress-4'),
        5: document
        .getElementById('progress-5')
    };
    const voteCounts = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
    let totalVotes = 0;
    let totalRating = 0;

    stars.forEach(star => 
    {
        star
        .addEventListener('click', handleClick);
    });

    function handleClick(event) 
    {
        const value = parseInt(event.target.getAttribute('data-value'));
        updateVoteCount(value);
        updateAverageRating();
        highlightStars(value);
        updateProgressBars();
    }

    function updateVoteCount(value) 
    {
        voteCounts[value]++;
        totalVotes++;
        totalRating += value;
        document
        .getElementById(`progress-${value}-votes`)
        .textContent = voteCounts[value];
    }

    function updateAverageRating() 
    {
        const averageRating = (totalRating / totalVotes)
        .toFixed(1);
        averageRatingSpan
        .textContent = averageRating;
    }

    function highlightStars(value)
    {
        stars
        .forEach(star => 
        {
            star
            .classList
            .toggle('selected', star.getAttribute('data-value') <= value);
        });
    }

    function updateProgressBars()
    {
        for (let i = 1; i <= 5; i++)
        {
            const progressElement = progressElements[i];
            const percentage = (voteCounts[i] / totalVotes) * 100;

            progressElement.style.width = percentage + '%';
            
            if(i==1)
            {
                progressElement.style.background="#ff4b4b";
            }
           else if(i ==2)
            {
            progressElement.style.background="#ff914d";
           }
           else if(i ==3){
            progressElement.style.background="#ffcc00";
           }
           else if(i ==4){
            progressElement.style.background="#99cc00";
           }
           else{
            progressElement.style.background="#33cc33";
           }
        }
    }
});