One page responsive using Flexbox

Community feedback

• 

  Sebastian Porini•265

  @zebokPosted over 3 years ago

  Hey Thiago! First of all: GREAT CHALLENGE SOLUTION!!!. Well done mate. Really well done. Congratulations.

  About your request regarding your js file, i have an idea.

  On first place, to avoid using the for loop, i would target the HTML elements by class or by id. Instead of using querySelector or querySelectorAll.

  So, instead of:

  const activeButtonProduct = document.querySelectorAll("#link-product"); const activeButtonCompany = document.querySelectorAll("#link-company"); const activeButtonConnect = document.querySelectorAll("#link-connect");

  Better do:

  const activeButtonProduct = document.getElementById("link-product"); const activeButtonCompany = document.getElementById("link-company"); const activeButtonConnect = document.getElementById("link-connect");

  As i can see, you use anonymous functions right after the "click" event listener. And all the three anonymous functions do basically the same. Toggle 2 classes.

  So, on second place, i would give that funcion a name, and calling it by its name right after the click event listener I have called the funcion "active". But you can choose the name you want.

  Instead of:

  element.addEventListener('click', function () { menuActivedProduct.classList.toggle('show-active') activeOpacityProduct.classList.toggle('opacity-actived') })

  Better do:

  element.addEventListener("click", active)

  And, finally, the 3rd step. Depending on wich element is firing the functions (this), the function will work differently. I have used a switch statement. Here is the function.

  function active() { switch (this) { case activeButtonProduct: menuActivedProduct.classList.toggle("show-active"); activeOpacityProduct.classList.toggle("opacity-actived"); break; case activeButtonCompany: menuActivedCompany.classList.toggle("show-active"); activeOpacityCompany.classList.toggle("opacity-actived"); break; case activeButtonConnect: menuActivedConnect.classList.toggle("show-active"); activeOpacityConnect.classList.toggle("opacity-actived"); break; } return; }

  Cheers! Keep going my friend! Some day we will be experts doing this! If you have more questions, just ask and i I'll be happy to help you.

  Un abrazo enorme desde Argentina a Brazil! Amo Brasil y su gente. El mejor pais del mundo. <3.

  PS: Try using the same logic, on the hamburger/cross button. Thats your homework for tomorrow. Hahah.

  0

  ---

  

  Thiago Billy•145

  @TdB27Posted over 3 years ago

  @zebok Thank you very much, I will do what you recommended. Thanks for the support.

  1