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 CARD using HTML, CSS AND JS

RavanCod 250

@vanessie2424

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


So, I'm done and making the mobile view of this project was one of the parts I found difficult. Also, I would like to know how to be able to select one at a thing. If someone could help, I would be grateful. Thank you.

Community feedback

@ArmsAndArrows

Posted

Hi! I like your implementation, but I could suggest some points of research in case of coding js:

1)When you declare a new variable it's a good practice to keep the most of them in the beginning of your code. The reason for using variable inside a function is only when that variable should be used only inside the scope of function.

2)When you use a variable that not supposed to be changed try to use "const" instead of var. It will prevent from future mistakes

3)You could upgrade your project if you take a research about event listeners:e.g document.addEventListener("click", callback function). So you could make element interactive.

4)For accordeon you need to practice with array looping( regular one or with method called "forEach". Check on mozilla MDN or on youtube. For example: you could have same class for all dropdown elements and using loop you could apply classes to all of them making it disable showing content and select conditionally that one that needs to be open.

5)To get even better results, you can look into classList methods, this could help you write less code and it would let you apply animation with less pain.

I hope that somehow could help you! =)

Marked as helpful

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