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

INohemiSolisโ€ข 50

@INSolisLoyo

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 my HTML architecture and my CSS application. However, next time, I hope to improve and apply my DOM manipulation skills more effectively.

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

The main challenge I encountered was applying my DOM manipulation skills to make this project function properly.

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

I'd appreciate assistance in enhancing my DOM manipulation skills.

Community feedback

P
Koda๐Ÿ‘นโ€ข 3,810

@kodan96

Posted

hi there! ๐Ÿ‘‹๐Ÿ‘‹

we have a couple of options to select and modify DOM elements:

  • querySelector()
  • querySelectorAll()
  • getElementbyId / ClassName / Tagname
  • innerHTML()
  • text()

you can look up use cases for each of (speaking of which, there's actually forEach() for looping through an array of elements selected by any of the methods mentioned before โ˜๏ธโ˜๏ธ ) these

From there you can listen for events with the amply named .addEventListener() method, and you can modify elements based on the interaction. You can add previously defined CSS classes modifying the elements color, display etc. properties, or you can use the {selector}.style.{property} JS syntax to modify them directly (this approach is more hardware-heavy for clients)

Hope this was helpful!๐Ÿ™

Good luck and happy coding! ๐Ÿ’ช

0

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