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

@leannekeenan

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?

Understanding the components of JavaScript functions comes easily, but the implementation can be quite difficult for me, This project was a nice reassurance for me to know (for the most part) that I know what I need to do to complete a task, but still could use some help on specifics on when to use what I know.

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

The biggest challenge was getting the toggle images to change with each click. I wrote a function that checks if the toggle button currently includes the icon-plus image and switches it to the icon-minus and vice versa, then added an event listened to each toggle button image to execute the change image function and a high order function, which is a function that takes another function as an argument.

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

I took the advice of @Bernardo Poggioni and made sure to utilize class specifications to my advantage. I will reserve the use of IDs exclusively for use in JavaScript and other scripting languages in the future. Since this was such a simple project, I referenced all the objects via querySelectors and the class name but I intend to use IDs in the near future when needed.

Community feedback

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