FAQ Accordion Card

🚀 Live Site | 💡 Solution

This is a responsive and interactive FAQ card project that I completed as a solution to the FAQ Accordion Card challenge from Frontend Mentor. The project is built with HTML, CSS, and JavaScript, and allows users to expand and collapse answers to frequently asked questions.

Screenshot

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See hover states for all interactive elements on the page
• Hide/Show the answer to a question when the question is clicked
• Bonus: Dark mode toggle

Built with

• Semantic HTML5 markup
• CSS custom properties
• JavaScript
• Mobile-first workflow
• NPM
• Webpack

What I learned

Through completing this project, I had the opportunity to further develop my skills in creating responsive and interactive user interfaces using HTML, CSS, and JavaScript.

Specifically, I learned how to use the max-height property in CSS to create smooth and animated transitions when expanding and collapsing elements on the page, by setting it to the element's scrollHeight property.

I also practiced my JavaScript skills, particularly in terms of manipulating the DOM and responding to user events.

Overall, this project challenged me to think creatively and problem-solve in order to create a functional and aesthetically pleasing FAQ Accordion card.

Installation

• Clone this repo:

git clone https://github.com/CodePapa360/FAQ-accordion-card.git

• Install dependencies:

npm install

• Build command:

npm run build

Author

👤 Alamin

• Twitter - @CodePapa360
• LinkedIn - @CodePapa360
• Frontend Mentor - @CodePapa360
• Github: @CodePapa360

Feel free to contact me with any questions or feedback!

Show your support

Give a ⭐️ if you liked this project!

Acknowledgments

I would like to express my gratitude to Frontend Mentor for providing this project idea and design. Their platform is an excellent resource for web developers looking to improve their skills.

License

This project is licensed under the MIT license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!