HTML, CSS, Javascript

Solution retrospective
I have problems with inactive ratings not changing their background color to dark-blue once they are not active, instead they stay light-grey. Any feedback and help is welcome.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ManuGil22
Hey there @peta !
What i did was to create a class called --checked. With css added there all the styles for the rating buttons when clicked. Then with js, in the eventListener for rating, removed the class --checked for all rating buttons, and added it to the one clicked.
- CSS
.rate-btn--checked { background-color: hsl(217, 12%, 63%); color: hsl(0, 0%, 100%); }
- JS
rateBtns.forEach((btn) => { btn.addEventListener('click', (e) => { // removes checked class from all rating buttons rateBtns.forEach((button) => { button.classList.remove('rate-btn--checked'); button.ariaChecked = 'false'; }); // adds checked class to clicked button e.target.classList.add('rate-btn--checked'); e.target.ariaChecked = 'true'; }); });
- Also if u can try to add and alternative text to the <img> tags. Its a description of the images for the screenreaders!
Well done and keep coding!
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