100-project-100-days-website/100_projects/94-emoji-star-rating/main.js
2023-05-26 13:32:31 +03:00
Ask

25 lines
667 B
JavaScript

{cf92e378744726779211f845e22030db91f8f874 true 667 main.js 0xc001e7e0e0}

const starsEl = document.querySelectorAll(".fa-star");
const emojisEl = document.querySelectorAll(".far");
const colorsArray = ["#f00000", "#F77820", "#8e9dc3", "#c1fa94", "#00a35e"];
updateRating(0);
starsEl.forEach((starEl, index) => {
starEl.addEventListener("click", () => {
updateRating(index);
});
});
function updateRating(index) {
starsEl.forEach((starEl, idx) => {
if (idx < index + 1) {
starEl.classList.add("active");
} else {
starEl.classList.remove("active");
}
});
emojisEl.forEach((emojiEl) => {
emojiEl.style.transform = `translateX(-${index * 50}px)`;
emojiEl.style.color = colorsArray[index];
});
}