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!
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.
Starter CodeSandbox Link:
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!