Let’s see how this project looks like:
In this Emoji Rating JavaScript Project, we used HTML, CSS & JavaScript. This project is very useful as emoji rating is always used in companies asking feedback from companies.
We created three files: index.html, style.css and js.js for JavaScript.
1) HTML Part:
i) Created a feedback-container which is rectangular box having stars and emojis (you can see in image)
ii) Created to containers as ’emoji-container’ for storing emojis and ‘rating-container’ for storing 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
i) First access whole stars and all emojis using querySelectorAll DOM property of JavaScript.
ii) Intuition: We want when we click any index, all stars from index=0 to that index should have yellow color and emoji container movement should me according to the clicked emoji index. See below:
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)`
})
}
Conclusion: Emoji-Rating Project is very useful for anyone wanting to grab a good understanding of the JS concepts. You can use above code to understand it better. Don’t forget to give feedback. JavaScript is the most important skills that helps you to land a job.
The Code Link of this project: (Link)
Check out more JavaScript Projects: Link