Skip to content

codehelping.com

No. 1 For Project and Interview

  • Home
  • Projects
  • Blog
  • Contact Us

Master Emoji Rating System with JavaScript – Ultimate 2025 Project for Web Developers

Posted on November 1, 2024July 9, 2025 By Omkar Pathak No Comments on Master Emoji Rating System with JavaScript – Ultimate 2025 Project for Web Developers
JavaScript Projects, Project

In this blog, you’ll learn how to create an Emoji Rating System with JavaScript. It’s a simple and fun project perfect for beginners in web development.

Users can click on different emojis to give their ratings. This project will help you improve your HTML, CSS, and JavaScript skills as a frontend developer.

Let’s see how this project looks like below:

Build an Emoji Rating System with JavaScript – Fun & Interactive Project for Beginners

In this Emoji Rating System JavaScript Project, we used HTML, CSS, and JavaScript to build an interactive and visually appealing rating system.
Such emoji-based feedback systems are commonly used by companies to collect quick and user-friendly responses from users or customers.

To structure the project, we created three separate files:

  • index.html – for the basic layout and content
  • style.css – for styling the elements and positioning the layout
  • js.js – for adding interactivity and logic using JavaScript

1) HTML Part:

ii) Created a rectangular feedback container that includes rating stars and emojis (as shown in the image).
ii) Added two separate containers — one named emoji-container to hold the emojis, and another named rating-container to display the rating stars.


<body>
    
        <div class="feedback-container">

            <div class="emoji-container">
                <i class="fa-regular  fa-face-angry fa-3x live"></i>
                <i class="fa-regular  fa-face-frown fa-3x"></i>
                <i class="fa-regular  fa-face-meh fa-3x"></i>
                <i class="fa-regular fa-face-smile fa-3x"></i>
                <i class="fa-regular fa-face-laugh fa-3x"></i>
            </div>

            <div class="rating-container">
                <i class="fa-solid  fa-2x "></i>
                <i class="fa-solid fa-star fa-2x"></i>
                <i class="fa-solid fa-star fa-2x"></i>
                <i class="fa-solid fa-star fa-2x"></i>
                <i class="fa-solid fa-star fa-2x"></i>
            </div>
            
       </div>

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

2) CSS Part:

i) First given a required height & width to our container and made it position relative.

ii)Secondly, give one emoji size to emojis’ container and full size to star’s container and make its position absolute so that it remains inside our ‘feedback-container’.

iii) Our idea is to align our emoji’s container align horizontally and move that container as per our rating. We give our emoji’s container CSS property overflow hidden so that only one emoji should be visible according to our rating.


.feedback-container{
    padding: 50px;
    width: 400px;
    height: 100px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    position: relative;
} 

.emoji-container{
    width: 50px;
    height: 49px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 20%;
    /* overflow: hidden; */
    border-radius: 50%;
    display: flex;
}

.fa-regular{
    margin: 1px;
    transition: transform 0.2s;
    color: rgb(0, 0, 0);
}

.rating-container{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%);
}

.fa-star{
    color: rgb(232, 225, 225);
}

.fa-star.live{
    border-radius: 1px solid;
    color: rgb(255, 217, 2);
}
Build an Emoji Rating System with JavaScript – Fun & Interactive Project for Beginners

3) JavaScript

The first step in making the rating system work is to access all the star elements and emojis from the HTML.
We do this using JavaScript’s querySelectorAll method, which selects all elements that match a specific CSS selector.

Intuition Behind the Functionality

Our main goal is to make the system respond visually when a user clicks a rating star.
Here’s how it works:

  • When a user clicks on any star, all stars from index 0 to that clicked index will turn yellow, showing the selected rating.
  • At the same time, the emoji container will shift or animate to highlight the emoji that matches the selected rating.
const starEl=document.querySelectorAll(".fa-star")
const emojiEl=document.querySelectorAll(".fa-regular")

starEl.forEach((starEl,index)=>{
    starEl.addEventListener("click",()=>{
        updateRating(index);
    })
})

function updateRating(index){
    starEl.forEach((starEl,idx)=>{
        console.log(idx,index+1)
        if(idx<index+1){
            starEl.classList.add("live")
        }
        else{
            starEl.classList.remove("live")
        }
    })

    emojiEl.forEach((emojiEl)=>{
        emojiEl.style.transform=`translateX(-${50*index}px)`
    })
}

The Code Link of this project: (Link)

Conclusion: Emoji Rating System with JavaScript

Creating an Emoji Rating System with JavaScript is a fun way to practice your web development skills.
You learned how to use HTML, CSS, and JavaScript to build an interactive project. Don’t forget to give feedback. JavaScript is the most important skills that helps you to land a job.

It’s a great addition to your portfolio and can be used in real websites. Keep building more projects like this to become better at frontend development!

Check out more JavaScript Projects: Link

Post navigation

❮ Previous Post: Image Slider JavaScript Project with Source Code 2025 | CodeHelping
Next Post: Toggle Menu Navigation with JavaScript ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • About Us
  • Contact Us
  • Privacy Policy
  • Disclaimer

Copyright © 2025 codehelping.com.

Theme: Oceanly by ScriptsTown

Social Chat is free, download and try it now here!