Skip to content

Latest commit

 

History

History
168 lines (142 loc) · 6.83 KB

README.md

File metadata and controls

168 lines (142 loc) · 6.83 KB
Raw

Logo

Brian Jenney No Framework Form Challenge


View Demo

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:

back to top

Workflow/Roadmap

Step 1

  • Create a new project with the following files

    • index.html
    • app.js
    • index.css

  • Create a form in the index.html with the following fields

    • Input with first name
    • Input with last name
    • Text area for comments
    • Checkbox to subscribe to a newsletter
    • Input for an email
    • Submit button

Step 2

  • Disable the submit button initially
  • The button should only be enabled if
    • First name and last name have at least 1 letter in the text box
  • Hide the input for an email initially
  • The input for email should be displayed if
    • The checkbox is checked

Step 3

  • After clicking submit
    • Make a POST request to https://jsonplaceholder.typicode.com/users
      • The request object should follow this structure { firstName, lastName, isSubscribed, email, comment }
      • The email property should only be sent IF they have checked the box to subscribe
      • If the request is successful
        • Display a success message that disappears after 2 seconds (e.g. ‘Thanks for your submission ’
        • Clear all form fields
      • If the request is NOT successful
        • Display a failure message (e.g. ‘Oops something went wrong’)
        • Do NOT clear all fields

back to top

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

back to top

Credits

Adam Abundis (@adamabundis)

back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

back to top

Acknowledgements

back to top