Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion solution

@andzz-zz

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of the similarity in the look of my solution and the challenge. Hopefully I can improve on the next one

What challenges did you encounter, and how did you overcome them?

As you can see, I didn't create a code for the rest of the buttons because I'm not sure how to do it with javascript.

What specific areas of your project would you like help with?

I tried different codes for this but ended up putting only one because it kept on giving me errors. Question 1: Is it possible to achieve this project with vanilla javascript? If so, please let me know how. Also, if it's not possible, what frameworks/libraries should I learn to enhance my knowledge on this?

Question 2: Am I in a good spot to learn about ReactJS & SASS ? Or should I keep on spending more time on CSS , HTML & JS ?

Question 3: Just adding this but I didn't realize there was a solid color in the background, what is the best way to do this??

I am also learning by using freecodecamp but any resource recommendations will be appreciated!

Thank you much!

Community feedback

@R3ygoski

Posted

Hello Andrine, congrats for concluding this project.

I was writing here but noticed the text was getting very long and cluttered, so I opted to send everything I had to say to your GitHub issues. Here's a link to access it: GH Issues

There, I answered your questions and redid a part of your project.

Marked as helpful

0

@andzz-zz

Posted

@R3ygoski Thank you so much for your feedback! I thought I would need longer code for the js but turns out it's not! I will study the code you provided and apply it on my future projects!!

1
P
Justin Green 2,750

@jgreen721

Posted

Nice work. The size and centering of everything looks good!

So, there is a .querySelectorAll() that is good for when you want to grab more than one element. You targeted the ID which is obviously going to(should) be unique for each one but if you give them a shared classname or even .querySelectorAll("button") will work but that will grab all the buttons on the page so a shared classname is a pretty good approach. This in return though will give you an Array (like object) so you will then have to iterate through and attach your function to each one. Easier done than it sounds.

Example:

   var btns = document.querySelectorAll('.yourBtnClassName`)
 // theres a few ways to iterate through but this is pretty clean
   btns.forEach((button,index)=>{
            button.onclick = showMore()
})   

Now from there, all the buttons will have the showMore() function assigned to it and should toggle that same top answer so there is still some work to do but that .querySelectorAll() should hopefully add a new tool in your JS-ing. You can obviously use it on your answer sections as well and then from there maybe tracking what number (which is what index is by the way -- when you loop through something you get A) the item and B) the number/order in the list of which it is -- starts at 0,1,2,3...) button was clicked with what answer section to change your display on (2nd btn click, change 2nd answer section,etc). lol. Sorry. I know that was kind of a lot but if any of it makes sense or is helpful then! lol.

So far as the other tools, never hurts to explore but like with anything, the fundamentals will always be pretty helpful in the long run of understanding/ability. Sass/CSS may be a bit more forgivable but Id encourage some time with vanillaJS. Again, nice work and Happy <coding/> 🙂

Marked as helpful

0

@andzz-zz

Posted

@jgreen721 Thank you so much this is really helpful! I'm familiar with document.querySelectorAll() but was having trouble how to iterate on each so I will definitely be learning about how to access each button with index!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord