Article preview component

Community feedback

• 

  Grego•1,310

  @Grego14Posted 6 months ago

  👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

  HTML:

  I recommend using the time element to specify the time in the challenge, it would look something like this:

  <time datetime="2020-06-28">28 Jun 2020</time>
  

  Read more about the time element here -> time

  CSS:

  Remove the max-height: 28rem from the main element as it causes the footer to overflow.

  JS:

  I recommend creating a handler outside of the for loop because otherwise you would be creating an eventListener for each shareicon and on large websites this can cause performance problems.

  You should take a look at -> Event Delegation.

  the toggle method of the classList interface is used so that if the element contains that class, it removes it, if not, it adds it.

  If you want to know more, check out the documentation -> toggle

  const theListener = (e) => {
    share.classList.toggle('slide-out-bottom')
    share.classList.toggle('slide-top')
  }
  
  for (let i = 0; i < shareicon.length; i++){
    shareicon[i].addEventListener("click", theListener);
  }
  

  I hope this helps! 😁

  0