FAQ accordion card | Flexbox and JS |

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Hey there Joaquin, good job on completing the challenge.

  Some tips: One of the first things that caught my eye was the extra page height when going to mobile. Try min-height: 100vh on your body. Anything greater than 100 will create a longer page than your viewport can fit and will result in that scrollbar popping up.

  Add a bit of line spacing in your <p> tags using line-height property. Browsers by default style <p> tags with almost no breathable line spacing. Opposite for heading tags.

  • In the JS, I noticed a pattern with duplicate event listeners for arrow and answer variables. Any time you have a collection try using a loop to access each element.
  • Also use the plural form for variable names when using document.getElementsByClassName

  for (var n=0; n < arrows.length; n++) {
       arrows[n].addEventListener('click', function(){
            clickArrow(n)
       });
  }
  

  Hope it helps and keep on coding

  1

  ---

  

  Joaquín Buendía•320

  @jbuendia1yPosted about 4 years ago

  Thanks for the tips, especially the one from JS and I will try to use plurals in the variables

  1
• 

  T

  Grace•31,090

  @grace-snowPosted about 4 years ago

  It works, but seems to need multiple clicks sometimes. I think your js could be much simpler, just looping over all faqs, listening for a click on all and toggling a class on click.

  If you made the divs into buttons, you'd also get all the interactive accessible behaviour for free. That would be some more work to change though as would affect your css as well.

  Things to think about, anyway. Happy coding

  0

  ---

  

  Joaquín Buendía•320

  @jbuendia1yPosted about 4 years ago

  Thanks for the comment of the clicks, I will try to improve the js.

  0