{"id":19543267,"url":"https://github.com/codewithalamin/interactive-card-details-form","last_synced_at":"2026-02-04T06:02:36.200Z","repository":{"id":154907507,"uuid":"631664207","full_name":"CodeWithAlamin/Interactive-Card-details-form","owner":"CodeWithAlamin","description":"A responsive card details form with real-time updates, error handling, and interactive states, built with HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:54:51.000Z","size":1346,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T18:14:52.234Z","etag":null,"topics":["codewithalamin","css","form-validation","formal-verification","html5","javascript","webpack"],"latest_commit_sha":null,"homepage":"https://official-interactive-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-23T18:22:22.000Z","updated_at":"2024-12-29T07:45:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"45dc1865-fafa-4829-baad-c310bcec54af","html_url":"https://github.com/CodeWithAlamin/Interactive-Card-details-form","commit_stats":null,"previous_names":["codewithalamin/interactive-card-details-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeWithAlamin/Interactive-Card-details-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-Card-details-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-Card-details-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-Card-details-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-Card-details-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Interactive-Card-details-form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FInteractive-Card-details-form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29072465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["codewithalamin","css","form-validation","formal-verification","html5","javascript","webpack"],"created_at":"2024-11-11T03:18:10.294Z","updated_at":"2026-02-04T06:02:36.138Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eInteractive card details form\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://official-interactive-card-alamin.netlify.app/\"\u003e\n      🚀 Live Site\n    \u003c/a\u003e\n    |\n    \u003ca href=\"https://www.frontendmentor.io/solutions/interactive-card-details-form-w-dark-mode-DzaqCmLm3I\"\u003e\n      💡 Solution\n    \u003c/a\u003e\n  \u003c/h5\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  This project is a responsive and interactive card details form developed as a practice project from Frontend Mentor. It allows users to input their card details and see real-time updates on the card image, with error message handling and interactive states for optimal user experience.\n\u003c/p\u003e\n\n\u003ca align=\"center\" href=\"https://official-interactive-card-alamin.netlify.app/\"\u003e\n\n\u003cimg src=\"./screenshots/interactive-card-details-form-screenshot-compared-CodeWithAlamin.png\"/\u003e\n\u003c/a\u003e\n\n## The challenge\n\nUsers should be able to:\n\n- Fill in the form and see the card details update in real-time\n- Receive error messages when the form is submitted if:\n  - Any input field is empty\n  - The card number, expiry date, or CVC fields are in the wrong format\n- View the optimal layout depending on their device's screen size\n- See hover, active, and focus states for interactive elements on the page\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\nIn this project, I utilized my skills in JavaScript and DOM manipulation to build a responsive and intuitive credit card form. I used Webpack to bundle my assets and optimized the build process using plugins like MiniCssExtractPlugin and HtmlWebpackPlugin.\n\nTo improve the user experience, I implemented custom error messages and a \"complete\" screen that appears after the form is successfully submitted. I created real-time validation and feedback for the user by applying my knowledge of JavaScript. I also included a dark mode toggle and utilized localStorage to store the user's preferred theme.\n\nOverall, this project provided me with valuable experience in building interactive web applications and utilizing various front-end technologies to improve the user experience.\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Interactive-Card-details-form.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- Live server:\n\n```sh\nnpm start\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\nSpecial thanks to Frontend Mentor for providing such an amazing platform to practice and improve my frontend skills. The challenges and projects available on the website were both fun and challenging, and helped me learn a lot in a short amount of time.\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Interactive-Card-details-form/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%2Finteractive-card-details-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Finteractive-card-details-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Finteractive-card-details-form/lists"}