{"id":19543243,"url":"https://github.com/codewithalamin/faq-accordion-card","last_synced_at":"2026-02-21T06:13:09.505Z","repository":{"id":154934034,"uuid":"630134551","full_name":"CodeWithAlamin/FAQ-Accordion-card","owner":"CodeWithAlamin","description":"Responsive and interactive FAQ accordion card solution for Frontend Mentor project.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:12:36.000Z","size":882,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T18:14:51.829Z","etag":null,"topics":["animations-and-transitions","codepapa360","codewithalamin","css","dark-theme","dom-manipulation","faq-card","frontend-development","html","javascript","responsive-design","user-interface","web-development"],"latest_commit_sha":null,"homepage":"https://faq-accordion-card-alamin.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-19T18:35:27.000Z","updated_at":"2024-10-30T12:12:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"ad6754fb-6d0c-4435-853a-f356bb07e548","html_url":"https://github.com/CodeWithAlamin/FAQ-Accordion-card","commit_stats":null,"previous_names":["codewithalamin/faq-accordion-card"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeWithAlamin/FAQ-Accordion-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FFAQ-Accordion-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FFAQ-Accordion-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FFAQ-Accordion-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FFAQ-Accordion-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/FAQ-Accordion-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FFAQ-Accordion-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29675033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T05:54:28.202Z","status":"ssl_error","status_checked_at":"2026-02-21T05:53:42.585Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations-and-transitions","codepapa360","codewithalamin","css","dark-theme","dom-manipulation","faq-card","frontend-development","html","javascript","responsive-design","user-interface","web-development"],"created_at":"2024-11-11T03:18:05.314Z","updated_at":"2026-02-21T06:13:09.483Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eFAQ Accordion Card\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://faq-accordion-card-alamin.netlify.app/\"\u003e\n      🚀 Live Site\n    \u003c/a\u003e\n    |\n    \u003ca href=\"https://www.frontendmentor.io/solutions/responsive-faq-accordion-card-w-dark-mode-4UZpBqL6rC\"\u003e\n      💡 Solution\n    \u003c/a\u003e\n  \u003c/h5\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  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.\n\u003c/p\u003e\n\n## Screenshot\n\n\u003ca align=\"center\" href=\"https://faq-accordion-card-alamin.netlify.app/\"\u003e\n\n\u003cimg src=\"./screenshots/faq-accordion-card-screenshot-compared.png\"/\u003e\n\u003c/a\u003e\n\n## The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the component depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Hide/Show the answer to a question when the question is clicked\n- **Bonus:** Dark mode toggle\n\n## Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- JavaScript\n- Mobile-first workflow\n- NPM\n- [Webpack](https://webpack.js.org/)\n\n## What I learned\n\nThrough completing this project, I had the opportunity to further develop my skills in creating responsive and interactive user interfaces using HTML, CSS, and JavaScript.\n\nSpecifically, 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.\n\nI also practiced my JavaScript skills, particularly in terms of manipulating the DOM and responding to user events.\n\nOverall, this project challenged me to think creatively and problem-solve in order to create a functional and aesthetically pleasing FAQ Accordion card.\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/FAQ-accordion-card.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## Acknowledgments\n\nI 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.\n\n## License\n\nThis 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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Ffaq-accordion-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Ffaq-accordion-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Ffaq-accordion-card/lists"}