Flexbox , CSS CUSTOM , JAVASCRIPT

Community feedback

• 

  Mi Vu•380

  @gerichilliPosted over 2 years ago

  Hi Yokke, congratulations on completing the project

  I have tried console.log condition to show shareContainer when share button is clicked and its result will be false. The first time, when you click the button, it will execute the statements in the else which is to hide the shareContainer

  console.log(shareContainer.style.visibility == "hidden" && arrowDown.style.visibility == "hidden");
  

  This happens because element.style.properties is read-only and returns the results of inline-styles, i.e. styles that you put directly into the tag. You can read more about it here HTMLElement.style

  If you want to read the value in the css file you can use getComputedStyle(element) and getPropertyValue(properties). You can refer here: Window.getComputedStyle().

  However, I find both of these methods to have disadvantages. Usually I would do the following.

  • Add .hidden class to share

  <a class="share hidden" href="#">
      ....
   </a>
  

  • I will cut visibility: hidden property from class .share and paste to class .hidden then I remove visibility: hidden; from .arrow-down because it will automatically hide and show along with .share

  .hidden {
    visibility: hidden;
  }
  

  • Your javascript code should look like this

  shareButton.addEventListener("click", () => {
    if (shareContainer.classList.contains("hidden")) {
      shareContainer.classList.remove("hidden");
      shareButton.style.color = "#F7FCFF";
      shareButton.style.background = "#6F839B";
    } else {
      shareContainer.classList.add("hidden");
      shareButton.style.color = "#718095";
      shareButton.style.background = "hsl(210, 46%, 95%)";
    }
  });
  

  Hope it helps you ^^

  Marked as helpful

  2

  ---

  

  Yokke•620

  @JexintePosted over 2 years ago

  Hey @gerichilli ,

  Nine days later I made the changes and it works fine you learned me something today.

  Thanks again have nice day !

  0

  

  Mi Vu•380

  @gerichilliPosted over 2 years ago

  @Jexinte I'm glad that it helps you ^^

  0
• 

  Yokke•620

  @JexintePosted over 2 years ago

  Hello @gerichilli ,

  Thanks for your feedback I haven't check it now I'll do it later !

  0