Preview
Video Player
00:00
00:00
Registering Names
7:49The first feature we'll work on is name registration. We'll harness the default browser behavior for forms to get two handlers for the price of one, using the submit event.
Whenever I'm faced with
a large complex project.
0:00
I like to start with the first thing
I can see that needs to be done.
0:03
The smaller the better.
0:06
I program that, make sure it works,
and move to the next task.
0:07
So what's the first thing we can do here?
0:11
Well let's start by capturing
the input from the form field.
0:13
Then we can print it to the console.
0:16
Let's take a quick look at index.html and
we know that the form's ID is registrar.
0:18
So we can select the form by its ID
0:24
then get a hold of the input
child element from there.
0:27
Now you might be tempted
to set a click handler
0:30
on the submit button to respond
to the user submission.
0:33
But you can submit
a form in multiple ways.
0:36
You can click the Submit button, but
you can also just hit the Enter key,
0:39
and that's the way I often do it.
0:42
Now to capture both methods of submitting,
we can set a handler on the form itself.
0:44
You see forms have a special event
called submit that we can listen for.
0:50
And a submit event will fire when the user
either clicks Submit or hits Enter.
0:55
There's a link in the teacher's notes
to read more about the submit event.
1:00
So let's see what this
looks like in the code.
1:03
In app.js,
1:06
let's create a variable to hold a
reference to the form element and the dom.
1:07
We'll name it form.
1:11
Now you can also write this using
the var keyword they both create
1:22
a variable named form.
1:26
But we'll use const which creates
a constant because we won't be assigning
1:28
a different value to the form variable.
1:32
Using const or let instead of var is
a best practice when creating variables.
1:34
And you can see the teacher's notes
if you're still not quite sure of
1:39
the difference between var const and let.
1:42
Next will select the form's
input element using a constant
1:45
with const input =
form.querySelector Input.
1:51
This selection references the input
element inside the form, so
2:00
we can read the name the user
typed into that field.
2:04
Finally, we can add a submit event
handler to the form that logs the inputs
2:07
value to the console.
2:12
So below the Constance we'll
type form.addEventListener
2:14
then pass in the submit event and
an arrow function.
2:19
I'm using a JavaScript arrow function
here to define the anonymous function
2:29
the handler function.
2:33
And if you're not used to arrow
functions check the teacher's notes for
2:34
information on this way of
writing JavaScript functions.
2:37
Now to log the inputs value to the
console, type console.log and input.value.
2:41
Let's save this and see it in the browser.
2:51
I'll refresh the browser and
open my console,
2:54
so I can see the message printout.
2:57
So now,
if I type something like Guil H and
3:00
click Submit,
we should see it show up in the console.
3:04
But what just happened here?
3:08
The whole page refresh
when I click submit and
3:10
if we were looking closely at the console,
you could see the name flash there for
3:13
a fraction of a second
before it cleared out again.
3:17
So we see that the handler is working just
fine but something else is happening.
3:19
The page is reloading when
the form is submitted.
3:24
This is the normal behavior of a form
when an HTML form is submitted,
3:27
the browser sends the information to the
URL specified by the action attribute and
3:31
loads that URL as well,
just like following a link.
3:36
Well for this app, we won't be
sending this data to a remote server,
3:39
and we don't want to
leave the current page.
3:42
So how can we prevent this from happening?
3:45
Well the DOM event object can help
us with the prevent default method.
3:47
Prevent default cancels the default
behavior associated with an event,
3:52
here's the MDN page for this method and
3:56
you can find the link to this
page in the teacher's notes.
3:58
So we can use this method on the event
object in our submit handler.
4:02
I'll show you how, back in app.js
at the top of the handler we
4:06
can call preventDefault on the event
object referred to by the E perimeter.
4:11
So we'll type e.preventDefault
followed by a set of and
4:17
this will cancel the browsers
default submit behavior.
4:21
So now let's save this and
see what happens in the browser.
4:26
So I'll just type a name like Chris.
4:31
And hit Enter, and that's more like it.
4:34
The name is logged to the console.
4:36
And if we enter a name and
4:39
click Submit,
we also get the console to log the value.
4:42
So we see that both methods
of submitting are captured.
4:48
All right, now that we're
successfully getting the name,
4:51
let's add it to the unordered
list below the form.
4:54
Remember, list item elements
are children of UL elements, so
4:57
we'll need our handler to create
a list item to hold the name.
5:01
And we'll that element to the UL.
5:05
So back in our handler we won't
need this console.long anymore.
5:08
And instead lets store
the input value into a variable
5:14
called text with const text = input.value.
5:19
Then we'll select the UL element
which has the ID invitedList
5:26
where you can select it
with getElement by ID.
5:31
After that we can create a list item
5:47
element with the create element method,
5:52
and store it in a variable named alive.
5:57
And finally we will use
the append child method to
6:05
place the list item inside
the un ordered list element.
6:08
Let's save our file and
go over to the browser and have a look.
6:18
I'll type in a name like
Marvin hit Enter and
6:24
we have a list item that appears but
it's empty.
6:28
So let's look back at our code.
6:31
It looks like we never put
the text into the list element.
6:33
So right after we declare the li variable.
6:38
Let's set it's text content
to the value of text with li.
6:41
TextContent = text.
6:46
Now let's have another look.
6:51
Refreshing and
typing Marvin again we see that it works.
6:53
So let's fix one more small thing.
7:00
You see how the input element doesn't
clear out when we submit a name.
7:02
Let's fix that by setting its
value to an empty string.
7:06
We've all ready saved the inputs
value into a variable named input.
7:10
So now we can safely remove its contents
by setting it's an empty string.
7:14
So in our handler right
below the text constant
7:19
we'll say input.value = an empty string.
7:23
Let's save and make sure this works.
7:29
Typing in Marvin again and
hitting enter we see
7:32
that the input now clears out
when we submit the form right?
7:35
All right, so the first main
feature of our app is complete.
7:40
And next, I'll show you how to
add a way to mark a guest off
7:44
once they've responded.
7:47