Well, I used sass for the first time. I really liked the order. I didn't use mixins or interpolation but it was ok for the first time. I want to click on each card and change its background and add or remove the dot individually but I still can't, I don't find any videos about it. Waiting for your feedback. Thanks for your time.
Hi, Congratulations for complete this challenge!
answering your question: for change the background color of the card by clicking, you can use the addEventListenner in JavaScript and remove or add a class from the element.
try this:
const cards = document.querySelectorAll(.card);
const removeUnreadClass = () => {
cards.forEach((notification) => {
notification.classList.remove("unread");
});
};
removeUnreadClass();
this function will remove a class named "unread" by clicking. you can change the ".remove" for ".toggle" if you want it to add and remove the class each time you click
notification.classList.toggle("unread");
thanks
Hello Friend, it's cool, follow some feedbacks to further improve your code. missed do hover interactions with css. check in the "active-states.jpg" file. one of the things that is requested in the challenge is for the user to click the "mark all as read" button on the zero notification counter. I also checked that the HTML is all done with divs and span, this is not a good practice, because it makes accessibility difficult for people with disabilities who use screen readers. try to take a look at the semantic tags of the html.
