Manuel Gil• 340
@ManuGil22
Posted
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!
0
Manuel Gil• 340
@ManuGil22
Posted
You can also change the background color of the buttons to fix your solution, so u dont have to change much.
ratings.forEach((rating)=> {
rating.addEventListener('click', ()=>{
ratings.forEach((ratingBtn)=> {
ratingBtn.style.background = "hsl(215, 17%, 22%)";
}
ratingNmb.textContent = rating.textContent;
rating.style.background = "hsl(216, 12%, 54%)";
});
});
I think that should work same way to fit ur solution. Not really sure if hsl(215, 17%, 22%) its the correct color tho 🙃
Marked as helpful
1
