Interactive notifications page

Community feedback

• 

  Matt Seidel•570

  @mseidel819

  Posted almost 2 years ago

  If you want to take this further, and practice rendering HTML inside your .js file, you could render your notification boxes dynamically. maybe you create a data.json file with all of the posts. something like:

  [
  {name: "CodingTube",
  img: "./images/codingtube.png",
  content:"left the group Chess Club"
  },
  {name: "Matt",
  img: "./images/matt.png",
  content:"followed you!"
  },
  ...
  ]
  

  You'll have to structure it in a way that works for you, and fits every use case for the different types of posts.

  Then you could target the div that contains the posts, use a map function, and insertAdjascentHTML to fill the boxes up. some pseudo-code:

  import Data from "./data.json"
  
  const data = Data; (redundant?)
  const commentContainer = document.getElementById('comments');
  
  data.forEach(post => {
  commentContainer.insertAdjacentHTML('beforeEnd",
  `
    <div class="post">
          <img class="img" src=${post.img} alt="" />
          <div>
            <p class="text">
              <span class="name">${post.name}</span> 
              <span class="group">${post.content}</span>
              <span class="status not-read"></span>
            </p>
            <p class="time">${post.date}</p>
          </div>
        </div>
  `
  )
  });
  
  

  I'm not using my editor for this, so please excuse any syntax errors....

  This way, you can reduce some of the repeated code. Also, if you wanted to add or remove, some posts (very similar to a real-world use case), you can just update the data file, instead of the HTML.

  01

  Marked as helpful