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

[@BlessedLife97]

❤

[@Truthwithfactss]

Nice and clear explanation...

[@Vijay_Bhati]

I am glad you liked it 😊

[@Vijay_Bhati]

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

[@pets_ff_008]

Its very use full

[@opinformation2233]

Its good bro keeping doing more

[@Vijay_Bhati]

I am happy you find the content useful 😊. For more such content Subscribe to the channel and Here is the playlist of Frontend Machine Coding Interview Problems th-cam.com/play/PLBygUld3s6x8sI_H8UYROVMIVcuxUre1e.html

[@rishabhkansal5811]

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

[@Vijay_Bhati]

Frontend Machine Coding Interview Problems th-cam.com/play/PLBygUld3s6x8sI_H8UYROVMIVcuxUre1e.html

[@rayyanabdulwajid7681]

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

[@Vijay_Bhati]

Okay, but you must understand how it works behind the scenes in any form and with any method.

[@rayyanabdulwajid7681]

@@Vijay_Bhati You're right

[@ishanksainger2627]

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");
}
});
});

[@just_a_living_being]

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')
}
})