Submitted over 2 years agoA solution to the Interactive rating component challenge
Interactive rating component main
@younesadjoudj

Solution retrospective
Hi guys! I'm so exiceted, this my first solution with JavaScript. What do you think of my solution? Any feedback is welcome.
Below is the JS code:
let primaryScreen = document.querySelector(".screen-primary");
let thankYouScreen = document.querySelector(".screen-thank-you");
let rate = document.querySelectorAll(".rate");
let rateSelected = document.querySelector('.rate-selected');
let lastClickedRate = null;
rate.forEach((div) => {
div.addEventListener('click', function() {
if (lastClickedRate) {
lastClickedRate.style.backgroundColor = 'hsl(217, 10%, 35%)'; // Restore the initial style of the last clicked div
lastClickedRate.style.color = "hsl(217, 12%, 63%)";
}
this.style.backgroundColor = 'hsl(25, 97%, 53%)'; // Change the style of the currently clicked div
this.style.color = "#fff";
lastClickedRate = this; // Updates reference to last clicked div
rateSelected.textContent = div.dataset.value; // save the data value of the selected rate
});
});
btn.addEventListener("click", () => {
primaryScreen.style.display = "none";
thankYouScreen.style.display = "initial";
} );
Code
Loading...
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Younes Adjoudj's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord