All elements with em class need to be displayed one at a time according to the rating. I made the emoji container as big as the icon, so with the overflow hidden, only one emoji container can be shown. The problem is, when I try to modify the transform properties, it doesn't work.
const starsEl = document.querySelectorAll(".fa-star");
const ratingcEl = document.querySelectorAll(".em");
console.log(ratingcEl)
starsEl.forEach((starsEl, index) => {
starsEl.addEventListener("click", () => {
console.log('click')
updateRating(index);
});
});
function updateRating(index) {
starsEl.forEach((starsEl, idx) => {
if (idx <= index) {
starsEl.classList.add("active");
} else {
starsEl.classList.remove("active");
}
});
ratingcEl.forEach((ratingcEl) => {
console.log(index)
ratingcEl.style.transform = `translateX(- ${ 50 * index}px)`;
});
}
.emoji-container {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
overflow: hidden;
}
.emoji-container i {
margin: 1px;
transform: translateX(-200px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
<div class="feedback-container">
<div class="emoji-container">
<i class="em fa-regular fa-face-angry fa-3x"></i>
<i class="em fa-regular fa-face-frown fa-3x"></i>
<i class="em fa-regular fa-face-meh fa-3x"></i>
<i class="em fa-regular fa-face-smile fa-3x"></i>
<i class="em fa-regular fa-face-laugh fa-3x"></i>
</div>
<div class="rating-container">
<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>
<i class="fa-solid fa-star fa-2x "></i>
</div>
</div>
<script src="emojii.js"></script>
</body>
I want the icon to pan to the left so that the right side of the rating is displayed.
P粉9165538952024-02-18 00:27:07
This can be greatly simplified. Removed all position/transform/display rules from CSS. They bring unnecessary complexity to such a simple task. Also added gold color to stars with active class and starts with 5 active stars.
const starsEl = document.querySelectorAll(".fa-star");
const emoji = document.getElementById("emoji");
const emojis = ["angry", "frown", "meh", "smile", "laugh"]; // just the changing parts
starsEl.forEach((starsEl, index) => {
starsEl.addEventListener("click", () => {
updateRating(index);
});
});
function updateRating(index) {
starsEl.forEach((starsEl, idx) => {
if (idx <= index) {
starsEl.classList.add("active");
} else {
starsEl.classList.remove("active");
}
});
emoji.classList = ["em fa-regular fa-face-" + emojis[index] + " fa-3x"];
}
#rating-container > .active {
color: gold;
}
#emoji-container {
text-align: center;
margin-top: 2rem;
}
sssccc