Notifications-page

Community feedback

• 

  Basit Korai•350

  @basitkoraiPosted over 1 year ago

  Hi, Brother How are you? You're nailing it, but I have some suggestions for you that I think will improve your project.

  HTML: Here are things you must have in your HTML

  1. You must use a <main>...</main> tag for better accessibility.
  2. Each Webpage must have an <h1></h1>. (Level one heading).
  3. You must use <article></article> tag for each item that can standalone. e.g. notifications, sidebars, etc.

  Just try to write more semantic HTML

  Add transitions as well

  And, as far as Javascript is concerned. I have fixed all the bugs.

  Here is the code

  const button = document.getElementById("mread");
  const unseenNotifications = document.querySelectorAll(".unseen");
  const numOfNotifications = document.querySelector(".num");
  
  button.addEventListener("click", () => {
  unseenNotifications.forEach((item) => {
  let dot = item.querySelector(".dot");
  
  numOfNotifications.remove();
  item.classList.remove("unseen");
  // removes unseen class from each notification
  dot.remove(); // removes the dot
  button.remove(); // removes the mark as read buttons as you have marked all as read why would you need it anymore
  });
  });
  

  It's all about Problem-Solving.

  Tip: Try to break down the functionality before coding.

  Happy Coding ✌️

  0