Flexbox , CSS CUSTOM , JAVASCRIPT

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 ^^

Hello @gerichilli ,

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