Responsive notifications page made with sass

Community feedback

• 

  Jumael Martins•180

  @jumaelmartinsPosted almost 2 years ago

  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");
  

  0

  ---

  

  LilithNixx•190

  @LilithNixxPosted almost 2 years ago

  @jumaelmartins thanks for the help!! The thing is that with this solution I can't choose to mark just one card, for example, because if I remove the class from one, I remove it from all, don't I? I was thinking of an id but then if there'd be thounsands of cards then I can't put an id to everyone, or can I? maybe with an aleatory id?

  0

  

  Jumael Martins•180

  @jumaelmartinsPosted almost 2 years ago

  @LilithNixx

  Sorry, I ended up putting the incomplete solution try this way below.

  create an array with all the cards and add an event listener, then you iterate over this array with a forEach and when the element is clicked, you remove the class only from the clicked element.

  I did something similar in my solution.

  /* selecting all elements li and create a node list. in your case you will replace it  "li" for ".card" to get all elements with the class ".card"*/
  
  const unreadNotifications = document.querySelectorAll("li");
  
  /* This function iterates through the card list, and adds an event listener.*/
  
  const removeUnreadClassByClick = () => {
    unreadNotifications.forEach((item) => {
  
  /*when the card is clicked it checks for the "unread" class if it has it removes that class only from the card that was clicked.*/  
  
     item.addEventListener("click", (e) => {
        const notification = item.closest("li");
  
        if (notification.classList.contains("unread")) {
          notification.classList.remove("unread");
        }
  /* These functions that I call here are just to decrement the notifications counter when I remove the "unread" class*/
        decrementCounterByClickNotification();
      });
    });
  };
  
  /*
  function to decrease the counter of notifications when removing the unread class from some card.
  here basically it checks how many of the elements of the card list have the "unread" class and returns that value.
  then I take this value and put it on the page. so if you remove the "unread" class from any of the cards, the value updates.
  */
  const decrementCounterByClickNotification = () => {
    const notificationUnreadCounter = Array.from(unreadNotifications).filter(
      (item) => {
        return item.classList.contains("unread");
      }
    );
  
    let count = notificationUnreadCounter.length;
  
    noticationsCounter.innerHTML = count;
  };
  

  Marked as helpful

  1

  

  LilithNixx•190

  @LilithNixxPosted almost 2 years ago

  @jumaelmartins very kind of you! I'll ckeck your solution.

  0