Pure HTML CSS And JavaScript Rating Bars Code Examples

Created: 16th Sep 24 3 Views
Review needed
Verified
Loading...
Loading...
Comments

Table of Contents

Introduction to Creating Rating Bars

In this tutorial, we'll explore various ways to create interactive and real-time rating bars using HTML, CSS, and JavaScript. We'll cover star ratings, bar ratings, emoji ratings, and more advanced interactive rating systems.

Star Rating

Let's start with an interactive star rating system:

<!-- HTML -->
<div class="star-rating" id="starRating">
    <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>Rating: <span id="starRatingValue">0</span> / 5</p>

/* CSS */
.star-rating {
    font-size: 24px;
    color: #ddd;
}

.star-rating .star {
    cursor: pointer;
}

.star-rating .star.active {
    color: gold;
}

// JavaScript
const starRating = document.getElementById('starRating');
const starRatingValue = document.getElementById('starRatingValue');

starRating.addEventListener('mouseover', (e) => {
    if (e.target.classList.contains('star')) {
        const value = e.target.dataset.value;
        highlightStars(value);
    }
});

starRating.addEventListener('mouseout', () => {
    highlightStars(starRatingValue.textContent);
});

starRating.addEventListener('click', (e) => {
    if (e.target.classList.contains('star')) {
        const value = e.target.dataset.value;
        starRatingValue.textContent = value;
        highlightStars(value);
    }
});

function highlightStars(value) {
    document.querySelectorAll('.star-rating .star').forEach((star, index) => {
        star.classList.toggle('active', index < value);
    });
}

This creates an interactive star rating system:

★ ★ ★ ★ ★

Rating: 0 / 5

Bar Rating

Now, let's create an interactive bar-style rating system:

<!-- HTML -->
<div class="bar-rating-container">
    <div class="bar-rating" id="barRating">
        <div class="bar" id="ratingBar"></div>
    </div>
    <span class="rating-text">Rating: <span id="barRatingValue">0</span> / 5</span>
</div>

/* CSS */
.bar-rating-container {
    width: 200px;
}

.bar-rating {
    width: 100%;
    height: 20px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.bar-rating .bar {
    height: 100%;
    background-color: #4CAF50;
    width: 0;
    transition: width 0.3s;
}

.rating-text {
    display: block;
    margin-top: 5px;
    font-weight: bold;
}

// JavaScript
const barRating = document.getElementById('barRating');
const ratingBar = document.getElementById('ratingBar');
const barRatingValue = document.getElementById('barRatingValue');

barRating.addEventListener('mousemove', (e) => {
    const rect = barRating.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percentage = (x / rect.width) * 100;
    const rating = (percentage / 20).toFixed(1);
    updateBarRating(rating);
});

barRating.addEventListener('click', (e) => {
    const rect = barRating.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percentage = (x / rect.width) * 100;
    const rating = (percentage / 20).toFixed(1);
    barRatingValue.textContent = rating;
});

barRating.addEventListener('mouseleave', () => {
    updateBarRating(barRatingValue.textContent);
});

function updateBarRating(rating) {
    ratingBar.style.width = `${rating * 20}%`;
    barRatingValue.textContent = rating;
}

This creates an interactive bar-style rating system:

Rating: 0 / 5

Emoji Rating

Let's create an interactive emoji-based rating system:

<!-- HTML -->
<div class="emoji-rating" id="emojiRating">
    <span class="emoji" data-rating="1">😢</span>
    <span class="emoji" data-rating="2">😕</span>
    <span class="emoji" data-rating="3">😐</span>
    <span class="emoji" data-rating="4">😊</span>
    <span class="emoji" data-rating="5">😄</span>
</div>
<p>Rating: <span id="emojiRatingValue">0</span> / 5</p>

/* CSS */
.emoji-rating {
    font-size: 32px;
}

.emoji-rating .emoji {
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.emoji-rating .emoji:hover,
.emoji-rating .emoji.active {
    opacity: 1;
}

// JavaScript
const emojiRating = document.getElementById('emojiRating');
const emojiRatingValue = document.getElementById('emojiRatingValue');

emojiRating.addEventListener('mouseover', (e) => {
    if (e.target.classList.contains('emoji')) {
        const rating = e.target.dataset.rating;
        highlightEmojis(rating);
    }
});

emojiRating.addEventListener('mouseout', () => {
    highlightEmojis(emojiRatingValue.textContent);
});

emojiRating.addEventListener('click', (e) => {
    if (e.target.classList.contains('emoji')) {
        const rating = e.target.dataset.rating;
        emojiRatingValue.textContent = rating;
        highlightEmojis(rating);
    }
});

function highlightEmojis(rating) {
    document.querySelectorAll('.emoji-rating .emoji').forEach(emoji => {
        emoji.classList.toggle('active', emoji.dataset.rating <= rating);
    });
}

This creates an interactive emoji-based rating system:

😢 😕 😐 😊 😄

Rating: 0 / 5

Interactive Slider Rating

Let's create an interactive slider-based rating system:

<!-- HTML -->
<div class="interactive-rating">
    <input type="range" min="0" max="5" step="0.1" value="2.5" id="ratingSlider">
    <output for="ratingSlider" id="ratingValue">2.5</output>
</div>

/* CSS */
.interactive-rating {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ratingSlider {
    width: 200px;
}

#ratingValue {
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

// JavaScript
const slider = document.getElementById('ratingSlider');
const output = document.getElementById('ratingValue');

slider.oninput = function() {
    output.innerHTML = this.value;
}

This creates an interactive slider-based rating system:

2.5

Color Rating

Let's create a color-based rating system:

<!-- HTML -->
<div class="color-rating" id="colorRating">
    <div class="color-bar"></div>
</div>
<p>Rating: <span id="colorRatingValue">0</span> / 5</p>

/* CSS */
.color-rating {
    width: 200px;
    height: 20px;
    background: linear-gradient(to right, red, yellow, green);
    cursor: pointer;
    position: relative;
}

.color-bar {
    height: 100%;
    width: 5px;
    background-color: black;
    position: absolute;
    left: 0;
}

// JavaScript
const colorRating = document.getElementById('colorRating');
const colorBar = colorRating.querySelector('.color-bar');
const colorRatingValue = document.getElementById('colorRatingValue');

colorRating.addEventListener('mousemove', updateColorRating);
colorRating.addEventListener('click', setColorRating);

function updateColorRating(e) {
    const rect = colorRating.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percentage = (x / rect.width) * 100;
    colorBar.style.left = `${percentage}%`;
    colorRatingValue.textContent = ((percentage / 20) + 1).toFixed(1);
}

function setColorRating(e) {
    updateColorRating(e);
}

This creates a color-based rating system:

Rating: 0 / 5

Thumbs Rating

Let's create a thumbs up/down rating system:

<!-- HTML -->
<div class="thumbs-rating" id="thumbsRating">
    <span class="thumb" data-value="down">👎</span>
    <span class="thumb" data-value="up">👍</span>
</div>
<p>Rating: <span id="thumbsRatingValue">None</span></p>

/* CSS */
.thumbs-rating {
    font-size: 32px;
}

.thumbs-rating .thumb {
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.3s;
    margin: 0 10px;
}

.thumbs-rating .thumb:hover,
.thumbs-rating .thumb.active {
    opacity: 1;
}

// JavaScript
const thumbsRating = document.getElementById('thumbsRating');
const thumbsRatingValue = document.getElementById('thumbsRatingValue');

thumbsRating.addEventListener('click', (e) => {
    if (e.target.classList.contains('thumb')) {
        const value = e.target.dataset.value;
        thumbsRatingValue.textContent = value.charAt(0).toUpperCase() + value.slice(1);
        document.querySelectorAll('.thumbs-rating .thumb').forEach(thumb => {
            thumb.classList.toggle('active', thumb.dataset.value === value);
        });
    }
});

This creates a thumbs up/down rating system:

👎 👍

Rating: None

Numeric Rating

Let's create a numeric rating system:

<!-- HTML -->
<div class="numeric-rating" id="numericRating">
    <button class="rating-btn" data-value="1">1</button>
    <button class="rating-btn" data-value="2">2</button>
    <button class="rating-btn" data-value="3">3</button>
    <button class="rating-btn" data-value="4">4</button>
    <button class="rating-btn" data-value="5">5</button>
</div>
<p>Rating: <span id="numericRatingValue">0</span> / 5</p>

/* CSS */
.numeric-rating {
    display: flex;
    gap: 5px;
}

.rating-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.rating-btn:hover,
.rating-btn.active {
    background-color: #3498db;
    color: #fff;
}

// JavaScript
const numericRating = document.getElementById('numericRating');
const numericRatingValue = document.getElementById('numericRatingValue');

numericRating.addEventListener('click', (e) => {
    if (e.target.classList.contains('rating-btn')) {
        const value = e.target.dataset.value;
        numericRatingValue.textContent = value;
        document.querySelectorAll('.numeric-rating .rating-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.value <= value);
        });
    }
});

This creates a numeric rating system:

Rating: 0 / 5

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!

Latest Posts
More Posts
    Random Posts