Good (i think)

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  Hi! Congrats on completing the challenge =)

  I can give you a tip how to make your code leaner. You can use querySelectorAll() to get all the buttons from your page. This function returns an array (technically it's not an array but NodeList, but right now that doesn't matter). Now you can use for-of loop to iterate through all those buttons.

  const buttons = document.querySelectorAll('button');
  const paragraphs = document.querySelectorAll('p');
  
  for (const elem of buttons) {
      elem.addEventListener('click', function() {
          /* Here you can use iteration again to close all paragraphs and change icons of buttons. */
          for (const item of paragraphs) {
              item.style.display = 'none';
          };
  
          for (const item of buttons) {
              item.firstElementChild.src = "assets/images/icon-plus.svg";
          };
  
          /* And than open the paragraph you need and change icon of the button. */
          elem.parentElement.nextElementSibling.style.dysplay = 'block';
          elem.firstElementChild.src = "assets/images/icon-minus.svg";
      });
  };
  

  That code will do the same thing as your but it's shorter =) If you are not familiar with parentElement and nextElementSibling properties - they select accordingly the parent div of the button and p element next to it. And firstElementChild select the first child element of button which in your case is img.

  Unfortunately it's not solving another part of the challenge - question doesn't close by the second click on it. So, if you want to improve your solution try to implement it =)

  Anyway, you did a good work. Keep doing =) Good luck =)

  Marked as helpful

  0

  ---

  

  O Grande Soldador•280

  @brendowePosted 5 months ago

  @Alex-Archer-I Thanks a lot for the help. I will apply your solution and study it. I confess that I tried to apply something like this, but I was getting lost on how to close it... I need to improve my interaction between HTML and JS. Your code really became much smaller and more elegant wow.

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  @brendowe

  You're welcome =) Hope that could help =)

  It's mostly a matter of practice. As you learn JS and especially DOM manipulations (that is the part of JS which manipulate the HTML tags) you'll notice that there are a lot of ways to achieve the same result. And with practice they'll settled in your head much easier =)

  Fell free to ask or comment if you need =)

  0