https://github.com/codewithalamin/faq-accordion-card
Responsive and interactive FAQ accordion card solution for Frontend Mentor project.
https://github.com/codewithalamin/faq-accordion-card
animations-and-transitions codepapa360 codewithalamin css dark-theme dom-manipulation faq-card frontend-development html javascript responsive-design user-interface web-development
Last synced: 2 months ago
JSON representation
Responsive and interactive FAQ accordion card solution for Frontend Mentor project.
- Host: GitHub
- URL: https://github.com/codewithalamin/faq-accordion-card
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-04-19T18:35:27.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T12:12:36.000Z (8 months ago)
- Last Synced: 2024-11-11T03:18:04.300Z (7 months ago)
- Topics: animations-and-transitions, codepapa360, codewithalamin, css, dark-theme, dom-manipulation, faq-card, frontend-development, html, javascript, responsive-design, user-interface, web-development
- Language: SCSS
- Homepage: https://faq-accordion-card-alamin.netlify.app/
- Size: 861 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
FAQ Accordion Card
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](https://webpack.js.org/)
## 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:
```sh
git clone https://github.com/CodeWithAlamin/FAQ-accordion-card.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
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](https://github.com/CodeWithAlamin/FAQ-Accordion-card/blob/main/LICENSE.md) 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!