25 lines
667 B
JavaScript
25 lines
667 B
JavaScript
|
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];
|
||
|
|
});
|
||
|
|
}
|