Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abuna1985/brian-jenney-form-challenge
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.
https://github.com/abuna1985/brian-jenney-form-challenge
css form html javascript web-accessibility
Last synced: 4 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/abuna1985/brian-jenney-form-challenge
- Owner: abuna1985
- License: mit
- Created: 2022-07-22T19:00:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-15T19:19:48.000Z (over 1 year ago)
- Last Synced: 2024-07-30T21:02:13.395Z (6 months ago)
- Topics: css, form, html, javascript, web-accessibility
- Language: JavaScript
- Homepage: https://abuna1985.github.io/brian-denney-form-challenge/
- Size: 27.1 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
## About The Project
This challenge was building a small and some features without leveraging a JavaScript framework.
Some features of note are:
* The form inputs have labels that are only visible to assistive technology (screen readers, etc)
* The submit button is enabled once the first & last name inputs are filled index
* When the subscription checkbox is checked, the email input field becomes visible
* When the form is submitted with a successful POST request:
* A success message is posted for 2 seconds
* All the inputs are reset and the submit button is disabled
* An error message is shown when a POST request is not successful
* The inputs are kept the same
* A error message displays in the console
If you want to learn more information about the form challenge, please see the following links:
* [Article - Brian Jenney -The Framework Developer Test: Death by Form](https://typeshare.co/brianjenney/posts/the-framework-developer-test-death-by-form)
* [Google Docs - Form Challenge Instructions](https://docs.google.com/document/d/1zC4wts9HVIxBVdAdGrbk32-JEAbQh-orMGCMZE3sKAI/edit#heading=h.gwauynib8haa)
## Workflow/Roadmap
### Step 1
- [x] Create a new project with the following files
- [x] index.html
- [x] app.js
- [x] index.css
- [x] Create a form in the `index.html` with the following fields
- [x] Input with first name
- [x] Input with last name
- [x] Text area for comments
- [x] Checkbox to subscribe to a newsletter
- [x] Input for an email
- [x] Submit button
### Step 2
- [x] Disable the submit button initially
- [x] The button should only be enabled if
- [x] First name and last name have at least 1 letter in the text box
- [x] Hide the input for an email initially
- [x] The input for email should be displayed if
- [x] The checkbox is checked
### Step 3
- [x] After clicking submit
- [x] Make a POST request to https://jsonplaceholder.typicode.com/users
- [x] The request object should follow this structure { firstName, lastName, isSubscribed, email, comment }
- [x] The email property should only be sent IF they have checked the box to subscribe
- [x] If the request is successful
- [x] Display a success message that disappears after 2 seconds (e.g. ‘Thanks for your submission ’
- [x] Clear all form fields
- [x] If the request is NOT successful
- [x] Display a failure message (e.g. ‘Oops something went wrong’)
- [x] Do NOT clear all fields
## Usage
Click here to see Step 1 Verification
There is an the following elements:
- input for first name
- input for last name
- input for comments
- checkbox for subscribing
- input for email
- button for submitting form
Click here to see Step 2 Verification
Submit button is only available when the first and last name inputs are filled in
The email input only shows when the subscription checkbox is checked
Click here to see Step 3 Verification with email
After the form is submitted:
- A message is displayed for 2 seconds
- the form fields are emptied and submit button is disabled
- The form data with `email` and `isSubscribed` as true is seen in the request
Click here to see Step 3 Verification with NO email
After the form is submitted:
- A message is displayed in the form under the submit button for 2 seconds
- the form fields are emptied and submit button is disabled
- The form data with `isSubscribed` as false is seen in the request
Click here to see Step 3 Verification failure scenario/success scenario
Failure Scenario
First, In the `Network` tab of the console, I set `throttling` to `offline`
Then 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.
Success Scenario
In the `Network` tab of the console, I set `throttling` to `No throttling` so it can go back to online
After the form is submitted:
- A message is displayed for 2 seconds
- the form fields are emptied and submit button is disabled
- The form data with `email` and `isSubscribed` as true is seen in the request
## Credits
[Adam Abundis](https://adamabundis.xyz) ([@adamabundis](https://twitter.com/adamabundis))
back to top
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Acknowledgements
* [Article - Brian Jenney -The Framework Developer Test: Death by Form](https://typeshare.co/brianjenney/posts/the-framework-developer-test-death-by-form)
* [Google Docs - Form Challenge Instructions](https://docs.google.com/document/d/1zC4wts9HVIxBVdAdGrbk32-JEAbQh-orMGCMZE3sKAI/edit#heading=h.gwauynib8haa)
* [JSON Placeholder API](https://jsonplaceholder.typicode.com/)
* [Go Make Things - How to show and hide elements with vanilla JavaScript](https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/)
* [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/
)
[W3C - Labeling Controls](https://www.w3.org/WAI/tutorials/forms/labels/)
* Form icon by Icons8