Skip to content
Submitted 7 months ago

Responsive accordion using HTML, CSS (Flexbox) and JS

NatSolomchak•110
@nataliiasolomchak21
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of improving my skills in JavaScript and being able to quickly problem-solve in my mind. When I first encountered this challenge, I already had a clear idea of how I would write the JavaScript for it. This is an area where I've faced challenges in the past, so I'm particularly pleased with my progress. It's rewarding to see myself becoming more proficient in this aspect of programming

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

I encountered a challenge when adding keyboard event listeners. It required some research and took longer than I expected. However, I'm proud that I was able to figure it out. Despite the extra time it took, I'm pleased with the outcome and the new skill I've gained.

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

I feel like I've written too much JavaScript code for this solution. Are there any suggestions on how to make it better and shorter? Thank you in advance :)

Community feedback

  • Grego•1,310
    @Grego14Posted 7 months ago

    Hello! I have been reading the code of your challenge, and here I leave you some recommendations.

    You can use the margin-inline property to specify the margin on the left and right

    @media (min-width: 480px) {
  .accordion {
    width: 40%;
    height: 40%;
    margin-inline: auto;
  }
}

    I also recommend leaving the alt attribute empty on these icons. since this is used mostly in images that have meaning on the page.

    creating the eventListener outside of the forEach loop or making use of event delegation to avoid using multiple eventListeners. Since there you are creating two for each question, click and keydown. Event Delegation Example

    I hope this helps!

    Marked as helpful
    0
    NatSolomchak•110
    @nataliiasolomchak21Posted 7 months ago

    @Grego14 Thank you very much for your feedback

    0

Please log in to post a comment

Log in with GitHub

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