Article preview component solution

Community feedback

• 

  Williams Akanni•350

  @shadowbanks

  Posted 5 months ago

  Hii,

  Great job on completing the challenge Larry 🥳

  I have a few suggestions for you :))

  1. Currently, you're using an h3 tag for the date<h3 class="date">28 Jun 2020</h3>. A better option could be the time tag <time datetime="2020-06-28">28 Jun 2020</time>. for improved semantic HTML and SEO.

  2. Right now, you have the active part as the default view, removing is-open from the class will do the trick.

   <section class="share-content is-open">
  

  3. In your javaScript I noticed that body.classList.toggle('is-open'); doesn't actually have any visible effect, as you're not styling it in the CSS

  Additionally, I have a suggestion for your code, you can create a function to handle the classes toggle, which would make the code cleaner and more reusable. Here's how you could do it:

  const toggleIsOpen = () => {
    shareContent.classList.toggle('is-open');
    authorDetails.classList.toggle('hidden');
  }
  
  shareButton.addEventListener('click', () => {
    toggleIsOpen();
  });
  
  // Add a separate event listener for the dark share button
  shareButtonDark.addEventListener('click', () => {
    toggleIsOpen();
  });
  

  This way you won't need the extra .remove calls. It simplifies things a bit and keeps your code DRY (Don’t Repeat Yourself).

  I hope this is helpful, happy coding!😊

  00

  Marked as helpful
• 

  larryQuao•130

  @larryQuao

  Posted 5 months ago

  Noted, I will get back on it an do the suggested correction you have stated. Thank you

  00