Article preview component solution

Community feedback

• 

  Huy Phan•2,040

  @huyphan2210Posted 16 days ago

  Hi, @Abas-code

  I checked out your solution and I have some thoughts:

  • External CSS and JS files: While including CSS in your HTML isn’t wrong, the CSS in your file is getting quite lengthy. It would be better to move it into a separate file, like style.css, and reference it in your HTML. The same goes for your JavaScript - consider creating a script.js file to keep things more organized.
  • Inline event handling: Instead of using share.addEventListener("click", toggle); in your JavaScript, you could handle the click event directly in your HTML by adding an onclick attribute to the share element. This simplifies the code a bit:

  <div class="share" onclick="toggle()">
    <!-- Your content -->
  </div>
  

  • Refactoring with classList: You can clean up the toggle functionality by using classList to manage CSS classes instead of directly modifying styles in JavaScript. This way, you keep the visual changes in your CSS, making the code more maintainable and readable:

  const share = document.querySelector(".share");
  const ssvg = document.querySelector(".share-svg");
  const links = document.querySelector(".links");
  
  share.addEventListener("click", toggle);
  
  function toggle() {
    share.classList.toggle("active");
    ssvg.classList.toggle("active");
    links.classList.toggle("visible");
  }
  

  Don’t forget to add the necessary classes in your CSS for this to work:

  /* Initial styles */
  .share {
    background-color: rgb(236, 242, 248);
  }
  .share-svg {
    fill: rgb(110, 128, 152);
  }
  .links {
    display: none;
  }
  
  /* Active styles */
  .share.active {
    background-color: rgb(109, 127, 151);
  }
  .share-svg.active {
    fill: white;
  }
  .links.visible {
    display: flex;
  }
  

  Hope this helps!

  0