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:

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 contentstyle.css
– for styling the elements and positioning the layoutjs.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);
}

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