Simple accordion card using Flexbox and JS

Community feedback

• 

  Paritosh Sahni•80

  @Paritosh7Posted almost 4 years ago

  Pretty dope! Everything seems to work pretty nicely. I have also made this project but nowhere close to your precision! Great job!

  1
• 

  Abhik•4,840

  @abhik-bPosted almost 4 years ago

  Hi Tsvetkov 👋

  Your solution is fantastic , I liked the animations and the FAQs open and close very smoothly 🙌 Just some opinions and questions out of curiosity

  • You can directly use questions.forEach then why use Array.from(questions).forEach (just curious)
  • if(mediaQuery.matches && !boxCreated) can reduce the extra if condition in the else part of the 1st condition
  • you can use display:none to box-img for small screens , I guess js can be avoided in this case

  Your solution is very responsive as well ,great job , Keep contributing these awesome solutions 🚀 & Happy Coding 😇

  1

  ---

  

  Sergei Tsvetkov•25

  @tsvetkovsergeyPosted almost 4 years ago

  HI abhik-b!

  Thanks for your great comment 👍 I just started to learn JavaScript about a week ago and html and css like a month and a half ago. So I really appreciate your help.

  • I changed Array.from(questions).forEach to questions.forEach and it works absolutely the same. Thank you. I just copy-pasted that block of code from Stack Overflow 😳
  • if(mediaQuery.matches && !boxCreated) won't work for me. I can make it like this:

  if (mediaQuery.matches && !boxCreated) {
  } else if (!mediaQuery.matches && boxCreated) {
  }
  

  But in that case I have to check for mediaQuery.matches two times. I am not sure if it has any noticeable impact on performance.

  1
• 

  AarshGoenka•80

  @AarshGoenkaPosted almost 4 years ago

  Well Made and ,all the measurements are also same 👍👍👍👍

  0