{"id":21307809,"url":"https://github.com/jdegand/checkout-page","last_synced_at":"2026-04-30T06:38:40.392Z","repository":{"id":110668556,"uuid":"469889454","full_name":"jdegand/checkout-page","owner":"jdegand","description":"DevChallenges - Legacy - Responsive Web Developer - Checkout Page","archived":false,"fork":false,"pushed_at":"2024-10-05T21:11:26.000Z","size":517,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T20:13:22.304Z","etag":null,"topics":["devchallenges","devchallenges-legacy","react","react-hook-form"],"latest_commit_sha":null,"homepage":"https://jdegand.github.io/checkout-page/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdegand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-03-14T20:12:05.000Z","updated_at":"2024-10-05T21:11:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"6bf45d5c-8b6f-47bf-a4aa-6ee36f7105d6","html_url":"https://github.com/jdegand/checkout-page","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jdegand/checkout-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcheckout-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcheckout-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcheckout-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcheckout-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdegand","download_url":"https://codeload.github.com/jdegand/checkout-page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdegand%2Fcheckout-page/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259429720,"owners_count":22856118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["devchallenges","devchallenges-legacy","react","react-hook-form"],"created_at":"2024-11-21T16:34:28.727Z","updated_at":"2026-04-30T06:38:35.337Z","avatar_url":"https://github.com/jdegand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCheckout Page\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution for a challenge from  \u003ca href=\"http://devchallenges.io\" target=\"_blank\"\u003eDevchallenges.io\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://jdegand.github.io/checkout-page\"\u003e\n      Live Link\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://web.archive.org/web/20240417030154/https://legacy.devchallenges.io/challenges/0J1NxxGhOUYVqihwegfO\"\u003e\n      Challenge\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n## Table of Contents\n\n- [Overview](#overview)\n  - [Built With](#built-with)\n- [Features](#features)\n- [Requirements](#requirements)\n- [Thoughts](#thoughts)\n- [Useful Resources](#useful-resources)\n\n## Overview\n\n![Mobile](checkout-page-mobile.png)\n\n***\n\n![Desktop](checkout-page-desktop.png)\n\n***\n\n![Desktop Required error](checkout-page-desktop-required.png)\n\n***\n\n### Built With\n\n- [React](https://reactjs.org/)\n- [React-Hook-Form](https://react-hook-form.com/)\n\n## Features\n\nThis application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://web.archive.org/web/20240417030154/https://legacy.devchallenges.io/challenges/0J1NxxGhOUYVqihwegfO) was to build an application to complete the given user stories. **Note**: The previous design document may be incomplete, as you need to find an archived version of the challenge as all `legacy` challenges have had their documentation removed from DevChallenges.\n\n## Requirements\n\n- [x] I can see a page following the given design\n- [x] I can input email, phone, full name, address, city, country, and postal code\n- [x] I can input the number of items\n- [x] I can select at least 3 countries from the dropdown\n- [x] When I click submit button or press enter, I can see a warning if validation fails\n- [x] When I click submit button or press enter, I can see a successful alert if validation succeeds\n\n## Thoughts\n\n- Orange is a difficult color to make pass accessibility contrast tests.\n\n- Obviously, to build this out completely, you would probably need redux or state management.  The form would have more validation as well.  React Hook Form implementation is quite minimal.  I have been meaning to look into it and I used this project as an excuse.\n\n- Could separate component css into own files.\n\n- To add a background to the arrow of the select box is a ton of work (vs. what it adds) and a minefield of accessibility concerns.\n\n## Useful Resources\n\n- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)\n- [PluralSight](https://www.pluralsight.com/guides/handling-multiple-inputs-with-single-onchange-handler-react) - onChange\n- [W3](https://www.w3.org/WAI/tutorials/forms/labels/) - hiding labels\n- [All Time Power](https://www.alltimepower.com/blog/react-hook-forms-custom-checkbox/) - custom checkbox\n- [Geeks for Geeks](https://www.geeksforgeeks.org/css-to-put-icon-inside-an-input-element-in-a-form/) - icon inside input\n- [Stack Overflow](https://stackoverflow.com/questions/40920945/react-warning-unknown-prop-valueasnumber-on-input-tag) - valueAsNumber \u0026 React\n- [Modern CSS](https://moderncss.dev/custom-select-styles-with-pure-css/) - custom select box\n- [24a11y](https://www.24a11y.com/2019/select-your-poison/) - custom selects\n- [YouTube](https://www.youtube.com/watch?v=ug1elgso_8A) - accessbile custom selects\n- [Stack Overflow](https://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit) - select and pseudo elements\n- [Style Lint](https://stylelint.io/) - Style Linting - CSS Lint website is out of date and this might be a good alternative\n- [Stack Overflow](https://stackoverflow.com/questions/16699007/regular-expression-to-match-standard-10-digit-phone-number) - regex for us phone numbers\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fcheckout-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdegand%2Fcheckout-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdegand%2Fcheckout-page/lists"}