Article preview component

Community feedback

• 

  Maan Al-Hababi•190

  @MaanAlHababiPosted 4 months ago

  Hey there!

  Congratulations on completing this challenge. There are a few things I'd like to point out. First of all, your HTML could do with a bit of semantic restructuring. Rather than using a lot of <div> elements, use section elements, buttons, articles and others. You should be familiar with a wide range of elements despite how similar their purpose is, or whether you could have the same effect of a button with a div element and an onclick attribute. To understand better why this is important I recommend reading about semantic HTML.

  Secondly, you could make your button trigger on & off rather than on and once and permanently on. This can be done with an element's classList and the toggle method of the classList object. Every element in the DOM has a list of classes (you are probably familiar with the fact that you can add multiple class attributes to an element separated by spaces.) If you assign an element to a variable in JS - using getElementById, or querySelector or whatever (also it is best practice to declare variables that store elements using const rather than var):

  const elementVariable = document.getElementById('element-id');
  

  This element's classList is a property that can be accessed through:

  elementVariable.classList
  

  You can use this to your advantage and add a selector in your CSS for a 'hidden' class:

  .hidden {
      display: none;
  }
  

  Then, you can utilize the classList's toggle method to add/remove the 'hidden' class from the 'share menu' on the click of a button. (The toggle method adds the class if it's not in the classList and removes it if it is there, by calling this method on the click of a button you can toggle/alternate at any point in time):

  const myButton = document.getElementById('my-button') //<button> element;
  const myMenu = document.getElementById('my-menu');
  
  myButton.addEventListener('click' () => {
      myMenu.classList.toggle('hidden');
  })
  

  Marked as helpful

  1