{"id":13341415,"url":"https://github.com/abuna1985/brian-jenney-form-challenge","last_synced_at":"2025-03-11T21:31:09.884Z","repository":{"id":48432086,"uuid":"516858876","full_name":"abuna1985/brian-jenney-form-challenge","owner":"abuna1985","description":" The Form Challenge project is a web app with form validation, enabling users to submit personal information. It includes field interactions, remote API integration, and dynamic message display.","archived":false,"fork":false,"pushed_at":"2023-05-15T19:19:48.000Z","size":28394,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-07-30T21:02:13.395Z","etag":null,"topics":["css","form","html","javascript","web-accessibility"],"latest_commit_sha":null,"homepage":"https://abuna1985.github.io/brian-denney-form-challenge/","language":"JavaScript","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/abuna1985.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-22T19:00:42.000Z","updated_at":"2023-07-18T09:14:46.000Z","dependencies_parsed_at":"2022-08-31T14:03:11.707Z","dependency_job_id":null,"html_url":"https://github.com/abuna1985/brian-jenney-form-challenge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fbrian-jenney-form-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fbrian-jenney-form-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fbrian-jenney-form-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abuna1985%2Fbrian-jenney-form-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abuna1985","download_url":"https://codeload.github.com/abuna1985/brian-jenney-form-challenge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221249553,"owners_count":16784962,"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":["css","form","html","javascript","web-accessibility"],"created_at":"2024-07-29T19:25:25.968Z","updated_at":"2024-10-23T23:31:13.220Z","avatar_url":"https://github.com/abuna1985.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\r\n\u003cbr /\u003e\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003ca href=\"https://abuna1985.github.io/brian-jenney-form-challenge\"\u003e\r\n    \u003cimg src=\"images/form-96x96.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\r\n  \u003c/a\u003e\r\n\r\n  \u003ch2 align=\"center\"\u003eBrian Jenney No Framework Form Challenge\u003c/h3\u003e\r\n\r\n  \u003cp align=\"center\"\u003e\r\n    \u003cbr /\u003e\r\n    \u003ca href=\"https://abuna1985.github.io/brian-jenney-form-challenge\"\u003eView Demo\u003c/a\u003e\r\n  \u003c/p\u003e\r\n\u003c/div\u003e\r\n\r\n## About The Project\r\n\u003cbr /\u003e\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003cimg src=\"images/happy-little-form-desktop.jpg\" /\u003e\r\n\u003c/div\u003e\r\n\u003cbr /\u003e\r\nThis challenge was building a small and some features without leveraging a JavaScript framework.\r\n\r\nSome features of note are:\r\n\r\n* The form inputs have labels that are only visible to assistive technology (screen readers, etc)\r\n* The submit button is enabled once the first \u0026 last name inputs are filled index\r\n* When the subscription checkbox is checked, the email input field becomes visible\r\n* When the form is submitted with a successful POST request:\r\n  *  A success message is posted for 2 seconds\r\n  *  All the inputs are reset and the submit button is disabled\r\n*  An error message is shown when a POST request is not successful\r\n   *  The inputs are kept the same\r\n   *  A error message displays in the console\r\n\r\nIf you want to learn more information about the form challenge, please see the following links:\r\n* [Article - Brian Jenney -The Framework Developer Test: Death by Form](https://typeshare.co/brianjenney/posts/the-framework-developer-test-death-by-form)\r\n* [Google Docs - Form Challenge Instructions](https://docs.google.com/document/d/1zC4wts9HVIxBVdAdGrbk32-JEAbQh-orMGCMZE3sKAI/edit#heading=h.gwauynib8haa)\r\n\r\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\r\n\r\n## Workflow/Roadmap\r\n\r\n### Step 1\r\n\r\n- [x] Create a new project with the following files\r\n  - [x] index.html\r\n  - [x] app.js\r\n  - [x] index.css\r\n\r\n- [x] Create a form in the `index.html` with the following fields\r\n  - [x] Input with first name\r\n  - [x] Input with last name\r\n  - [x] Text area for comments\r\n  - [x] Checkbox to subscribe to a newsletter\r\n  - [x] Input for an email\r\n  - [x] Submit button\r\n\r\n### Step 2\r\n\r\n- [x] Disable the submit button initially\r\n- [x] The button should only be enabled if\r\n  - [x] First name and last name have at least 1 letter in the text box\r\n- [x] Hide the input for an email initially\r\n- [x] The input for email should be displayed if\r\n  - [x] The checkbox is checked\r\n\r\n### Step 3\r\n\r\n- [x] After clicking submit\r\n  - [x] Make a POST request to https://jsonplaceholder.typicode.com/users\r\n    - [x] The request object should follow this structure { firstName, lastName, isSubscribed, email, comment }\r\n    - [x] The email property should only be sent IF they have checked the box to subscribe\r\n    - [x] If the request is successful\r\n      - [x] Display a success message that disappears after 2 seconds (e.g. ‘Thanks for your submission \u003cFirstName\u003e’\r\n      - [x] Clear all form fields\r\n    - [x] If the request is NOT successful\r\n      - [x] Display a failure message (e.g. ‘Oops something went wrong’)\r\n      - [x] Do NOT clear all fields\r\n\r\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\r\n\r\n## Usage\r\n\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eClick here \u003cstrong\u003eto see Step 1 Verification\u003c/strong\u003e\u003c/summary\u003e\r\n  \u003cp\u003eThere is an the following elements:\u003c/p\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003einput for first name\u003c/li\u003e\r\n    \u003cli\u003einput for last name\u003c/li\u003e\r\n    \u003cli\u003einput for comments\u003c/li\u003e\r\n    \u003cli\u003echeckbox for subscribing\u003c/li\u003e\r\n    \u003cli\u003einput for email\u003c/li\u003e\r\n    \u003cli\u003ebutton for submitting form\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  \u003cimg src=\"images/happy-little-form-desktop.jpg\" /\u003e\r\n\u003c/details\u003e\r\n\u003cbr\u003e\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eClick here \u003cstrong\u003eto see Step 2 Verification\u003c/strong\u003e\u003c/summary\u003e\r\n  \u003cp\u003eSubmit button is only available when the first and last name inputs are filled in\u003c/p\u003e\r\n  \u003cp\u003eThe email input only shows when the subscription checkbox is checked\u003c/p\u003e\r\n  \u003cimg src=\"images/step-2-verification.gif\" /\u003e\r\n\u003c/details\u003e\r\n\u003cbr\u003e\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eClick here \u003cstrong\u003eto see Step 3 Verification with email\u003c/strong\u003e\u003c/summary\u003e\r\n  \u003cp\u003eAfter the form is submitted:\u003c/p\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003eA message is displayed for 2 seconds\u003c/li\u003e\r\n    \u003cli\u003ethe form fields are emptied and submit button is disabled\u003c/li\u003e\r\n    \u003cli\u003eThe form data with `email` and `isSubscribed` as true is seen in the request\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  \u003cimg src=\"images/step-3-verification-with-email.gif\" /\u003e\r\n\u003c/details\u003e\r\n\u003cbr\u003e\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eClick here \u003cstrong\u003eto see Step 3 Verification with NO email\u003c/strong\u003e\u003c/summary\u003e\r\n  \u003cp\u003eAfter the form is submitted:\u003c/p\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003eA message is displayed in the form  under the submit button for 2 seconds\u003c/li\u003e\r\n    \u003cli\u003ethe form fields are emptied and submit button is disabled\u003c/li\u003e\r\n    \u003cli\u003eThe form data with `isSubscribed` as false is seen in the request\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  \u003cimg src=\"images/step-3-verification-no-email.gif\" /\u003e\r\n\u003c/details\u003e\r\n\u003cbr\u003e\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eClick here \u003cstrong\u003eto see Step 3 Verification  failure scenario/success scenario\u003c/strong\u003e\u003c/summary\u003e\r\n  \u003ch4\u003eFailure Scenario\u003c/h4\u003e\r\n  \u003cp\u003eFirst, In the `Network` tab of the console, I set `throttling` to `offline`\u003c/p\u003e\r\n  \u003cp\u003eThen I filled in the form and submitted the form. I receive and error message in the form under the submit button and in the console.\u003c/p\u003e\r\n  \u003ch4\u003eSuccess Scenario\u003c/h4\u003e\r\n  \u003cp\u003eIn the `Network` tab of the console, I set `throttling` to `No throttling` so it can go back to online\u003c/p\u003e\r\n  \u003cp\u003eAfter the form is submitted:\u003c/p\u003e\r\n  \u003cul\u003e\r\n    \u003cli\u003eA message is displayed for 2 seconds\u003c/li\u003e\r\n    \u003cli\u003ethe form fields are emptied and submit button is disabled\u003c/li\u003e\r\n    \u003cli\u003eThe form data with `email` and `isSubscribed` as true is seen in the request\u003c/li\u003e\r\n  \u003c/ul\u003e\r\n  \u003cimg src=\"images/step-3-failure-then-success.gif\" /\u003e\r\n\u003c/details\u003e\r\n\u003cbr\u003e\r\n\r\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\r\n\r\n## Credits\r\n[Adam Abundis](https://adamabundis.xyz) ([@adamabundis](https://twitter.com/adamabundis)) \r\n\r\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\r\n## License\r\n\r\nDistributed under the MIT License. See `LICENSE.txt` for more information.\r\n\r\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\r\n\r\n## Acknowledgements\r\n\r\n* [Article - Brian Jenney -The Framework Developer Test: Death by Form](https://typeshare.co/brianjenney/posts/the-framework-developer-test-death-by-form)\r\n* [Google Docs - Form Challenge Instructions](https://docs.google.com/document/d/1zC4wts9HVIxBVdAdGrbk32-JEAbQh-orMGCMZE3sKAI/edit#heading=h.gwauynib8haa)\r\n* [JSON Placeholder API](https://jsonplaceholder.typicode.com/)\r\n* [Go Make Things - How to show and hide elements with vanilla JavaScript](https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/)\r\n* [Go Make Things - Listening for events on multiple elements using JavaScript event delegation](https://gomakethings.com/listening-for-events-on-multiple-elements-using-javascript-event-delegation/\r\n)\r\n[W3C - Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/)\r\n* \u003ca target=\"_blank\" href=\"https://icons8.com/icon/82791/form\"\u003eForm\u003c/a\u003e icon by \u003ca target=\"_blank\" href=\"https://icons8.com\"\u003eIcons8\u003c/a\u003e\r\n\r\n\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabuna1985%2Fbrian-jenney-form-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabuna1985%2Fbrian-jenney-form-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabuna1985%2Fbrian-jenney-form-challenge/lists"}