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:

• Article - Brian Jenney -The Framework Developer Test: Death by Form
• Google Docs - Form Challenge Instructions

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

• Article - Brian Jenney -The Framework Developer Test: Death by Form
• Google Docs - Form Challenge Instructions
• JSON Placeholder API
• Go Make Things - How to show and hide elements with vanilla JavaScript
• Go Make Things - Listening for events on multiple elements using JavaScript event delegation W3C - Labeling Controls
• Form icon by Icons8

back to top