Frontend Machine Coding Interview | Star Rating Component | HTML | CSS | Javascript 

Nice and clear explanation...

Its great!! 😊 Thanks so much. Please make more content on machine coding questions with HTML, CSS, JS

Its good bro keeping doing more

Thanks for the code, I did some modifications. let starRating = document.querySelectorAll(".star"); let ratingCount = document.getElementById("count"); starRating.forEach((star, index) => { star.addEventListener("click", () => { if (star.classList.contains("active")) { for (let i = starRating.length-1; i > index; i--) { starRating[i].classList.remove("active"); } } else { for (let i = 0; i < index + 1; i++) { starRating[i].classList.add("active"); } } let activeStars = document.querySelectorAll(".star.active").length; ratingCount.innerHTML = `Rating Count : ${activeStars}`; }); }); starRating.forEach((star, index) => { star.addEventListener("mouseover", () => { for (let i = 0; i < index + 1; i++) { starRating[i].classList.add("hovered"); } }); }); starRating.forEach((star, index) => { star.addEventListener("mouseout", () => { for (let i = 0; i < index + 1; i++) { starRating[i].classList.remove("hovered"); } }); });

UI :- rating-component-normal.netlify.app/ Code :- github.com/vj98/Frontend-Machine-Coding/tree/main/rating-component

This is possible even without javascript, i saw a code on codepen. Thanks anyway for the knowledge

Thank you for the video, this is my solution just modified your solution and added event delegation to avoid unnecessary click and mouseover events. const starContainer = document.getElementById('star-container') const stars = document.querySelectorAll('.star') const count = document.getElementById('count') let filled = 0 starContainer.addEventListener('click', e => { if (e.target.matches('span')) { const rating = e.target.dataset.rating for (let j = 0; j < filled; j++) { stars[j].classList.remove('star-filled') } for (let i = 0; i < rating; i++) { stars[i].classList.add('star-filled') } filled = rating count.innerText = `Rating Count : ${filled}` } }) starContainer.addEventListener('mouseover', e => { if (e.target.matches('span')) { const rating = e.target.dataset.rating for (let j = 0; j < filled; j++) { stars[j].classList.remove('star-filled') } for (let i = 0; i < rating; i++) { stars[i].classList.add('star-filled') } } }) starContainer.addEventListener('mouseleave', e => { for (let j = 0; j < 5; j++) { stars[j].classList.remove('star-filled') } for (let i = 0; i < filled; i++) { stars[i].classList.add('star-filled') } })