Introduction

This week, we learned about how to build interactivity into our pages with events, JavaScript event listeners, and callback functions. In this lab, we'll use what we learned about events to build something we find in almost every single website we visit: a sign-up form.

This won't be a fully-functioning sign-up form — like most of the rest of this course, we'll only be concerned with the "frontend", or the part of the app that runs in the web browser. But it'll help us dive a little deeper into how events commonly work in user interfaces.

This lab will not be graded, but there is an optional checkoff to help you gauge your understanding. Completion is strongly recommended to help you keep up with the course mat!

Lab 3 - Lab 3 Checkoff

📄 Anatomy of a sign-up form

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8305e4b4-7c2e-4f7c-b7b6-9e65791767fb/ScreenShot2019-01-26at15.10.59.png

Signing up for a site is a deceptively simple thing, but even in just a few input fields and a button, there's a lot of interactivity we can build in to make the experience great. In this lab, we'll add these features into our sign-in form.

  1. Confirmation message - when the user submits the form, we'll pop up a message with the user's desired username to confirm their form submission.
  2. Password confirmation - With a second password field, we can make sure the user enters the password they want, without making typos.
  3. Submit with ENTER key - In most forms online, we can submit a form by hitting the ENTER key. But this isn't always an automatic behavior when we're building interactive forms online. In this lab, we'll check for when the user hits the ENTER key, and submit the form.
  4. Point out missing fields - If the user forgets to fill out a field in our sign-up form, we should highlight the missing field to the user.
  5. Check password strength - A lot of modern websites show the user if the password they are entering is long enough to be secure, as the user's typing in their password. We'll implement a simple version of this into our lab.

Overview

Starter CodeSandbox Link:

Sign-up Form Lab

Before we dive in to writing code, let's see what's already here. there are three files that make up our signup form: index.html, where our HTML is defined; main.css, which adds some styling to the page, and index.js, which is where our JavaScript code will live.

In this lab, we'll only modify index.js. But feel free to check out index.html and main.css to get a sense of how the page is structured and styled!