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

Refactor using HTML, CSS, and JS

Jane 1,040

@janegca

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is the second challenge I've refactored. I focused on trying to identify which elements could be looked at as possible reusable components and separated out my CSS accordingly. Whether this is the right approach or not only time will tell.

Also added a JS utility to ensure only the selected item is displayed (inspired by Maria's solution. The bouncing box was inspired by ApplePieGiraffe's solution. Thank you both.

The graphics still gave me fits but at least I had a better idea of why things were going wrong. Also not convinced I've found the most useful way of dealing with them. Any and all suggestions for improvement are welcome.

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