1
00:00:00,780 --> 00:00:03,360
Whenever I'm faced with
a large complex project.

2
00:00:03,360 --> 00:00:06,160
I like to start with the first thing
I can see that needs to be done.

3
00:00:06,160 --> 00:00:07,520
The smaller the better.

4
00:00:07,520 --> 00:00:11,030
I program that, make sure it works,
and move to the next task.

5
00:00:11,030 --> 00:00:13,300
So what's the first thing we can do here?

6
00:00:13,300 --> 00:00:16,570
Well let's start by capturing
the input from the form field.

7
00:00:16,570 --> 00:00:18,660
Then we can print it to the console.

8
00:00:18,660 --> 00:00:24,750
Let's take a quick look at index.html and
we know that the form's ID is registrar.

9
00:00:24,750 --> 00:00:27,470
So we can select the form by its ID

10
00:00:27,470 --> 00:00:30,990
then get a hold of the input
child element from there.

11
00:00:30,990 --> 00:00:33,900
Now you might be tempted
to set a click handler

12
00:00:33,900 --> 00:00:36,880
on the submit button to respond
to the user submission.

13
00:00:36,880 --> 00:00:39,240
But you can submit
a form in multiple ways.

14
00:00:39,240 --> 00:00:42,360
You can click the Submit button, but
you can also just hit the Enter key,

15
00:00:42,360 --> 00:00:44,750
and that's the way I often do it.

16
00:00:44,750 --> 00:00:50,650
Now to capture both methods of submitting,
we can set a handler on the form itself.

17
00:00:50,650 --> 00:00:55,630
You see forms have a special event
called submit that we can listen for.

18
00:00:55,630 --> 00:01:00,640
And a submit event will fire when the user
either clicks Submit or hits Enter.

19
00:01:00,640 --> 00:01:03,670
There's a link in the teacher's notes
to read more about the submit event.

20
00:01:03,670 --> 00:01:06,170
So let's see what this
looks like in the code.

21
00:01:06,170 --> 00:01:07,210
In app.js,

22
00:01:07,210 --> 00:01:11,360
let's create a variable to hold a
reference to the form element and the dom.

23
00:01:11,360 --> 00:01:12,882
We'll name it form.

24
00:01:22,104 --> 00:01:26,810
Now you can also write this using
the var keyword they both create

25
00:01:26,810 --> 00:01:28,563
a variable named form.

26
00:01:28,563 --> 00:01:32,467
But we'll use const which creates
a constant because we won't be assigning

27
00:01:32,467 --> 00:01:34,940
a different value to the form variable.

28
00:01:34,940 --> 00:01:39,553
Using const or let instead of var is
a best practice when creating variables.

29
00:01:39,553 --> 00:01:42,925
And you can see the teacher's notes
if you're still not quite sure of

30
00:01:42,925 --> 00:01:45,033
the difference between var const and let.

31
00:01:45,033 --> 00:01:51,337
Next will select the form's
input element using a constant

32
00:01:51,337 --> 00:01:56,641
with const input =
form.querySelector Input.

33
00:02:00,103 --> 00:02:04,048
This selection references the input
element inside the form, so

34
00:02:04,048 --> 00:02:07,930
we can read the name the user
typed into that field.

35
00:02:07,930 --> 00:02:12,847
Finally, we can add a submit event
handler to the form that logs the inputs

36
00:02:12,847 --> 00:02:14,369
value to the console.

37
00:02:14,369 --> 00:02:19,081
So below the Constance we'll
type form.addEventListener

38
00:02:19,081 --> 00:02:23,153
then pass in the submit event and
an arrow function.

39
00:02:29,110 --> 00:02:33,560
I'm using a JavaScript arrow function
here to define the anonymous function

40
00:02:33,560 --> 00:02:34,934
the handler function.

41
00:02:34,934 --> 00:02:37,801
And if you're not used to arrow
functions check the teacher's notes for

42
00:02:37,801 --> 00:02:41,050
information on this way of
writing JavaScript functions.

43
00:02:41,050 --> 00:02:47,861
Now to log the inputs value to the
console, type console.log and input.value.

44
00:02:51,718 --> 00:02:53,610
Let's save this and see it in the browser.

45
00:02:54,770 --> 00:02:57,550
I'll refresh the browser and
open my console,

46
00:02:57,550 --> 00:02:59,380
so I can see the message printout.

47
00:03:00,650 --> 00:03:04,930
So now,
if I type something like Guil H and

48
00:03:04,930 --> 00:03:08,440
click Submit,
we should see it show up in the console.

49
00:03:08,440 --> 00:03:10,290
But what just happened here?

50
00:03:10,290 --> 00:03:13,240
The whole page refresh
when I click submit and

51
00:03:13,240 --> 00:03:17,120
if we were looking closely at the console,
you could see the name flash there for

52
00:03:17,120 --> 00:03:19,590
a fraction of a second
before it cleared out again.

53
00:03:19,590 --> 00:03:24,670
So we see that the handler is working just
fine but something else is happening.

54
00:03:24,670 --> 00:03:27,760
The page is reloading when
the form is submitted.

55
00:03:27,760 --> 00:03:31,810
This is the normal behavior of a form
when an HTML form is submitted,

56
00:03:31,810 --> 00:03:36,290
the browser sends the information to the
URL specified by the action attribute and

57
00:03:36,290 --> 00:03:39,220
loads that URL as well,
just like following a link.

58
00:03:39,220 --> 00:03:42,920
Well for this app, we won't be
sending this data to a remote server,

59
00:03:42,920 --> 00:03:45,320
and we don't want to
leave the current page.

60
00:03:45,320 --> 00:03:47,760
So how can we prevent this from happening?

61
00:03:47,760 --> 00:03:52,960
Well the DOM event object can help
us with the prevent default method.

62
00:03:52,960 --> 00:03:56,841
Prevent default cancels the default
behavior associated with an event,

63
00:03:56,841 --> 00:03:58,907
here's the MDN page for this method and

64
00:03:58,907 --> 00:04:02,280
you can find the link to this
page in the teacher's notes.

65
00:04:02,280 --> 00:04:06,143
So we can use this method on the event
object in our submit handler.

66
00:04:06,143 --> 00:04:11,325
I'll show you how, back in app.js
at the top of the handler we

67
00:04:11,325 --> 00:04:17,730
can call preventDefault on the event
object referred to by the E perimeter.

68
00:04:17,730 --> 00:04:21,984
So we'll type e.preventDefault
followed by a set of and

69
00:04:21,984 --> 00:04:26,170
this will cancel the browsers
default submit behavior.

70
00:04:26,170 --> 00:04:28,480
So now let's save this and
see what happens in the browser.

71
00:04:31,430 --> 00:04:33,230
So I'll just type a name like Chris.

72
00:04:34,410 --> 00:04:36,220
And hit Enter, and that's more like it.

73
00:04:36,220 --> 00:04:38,390
The name is logged to the console.

74
00:04:39,680 --> 00:04:42,640
And if we enter a name and

75
00:04:42,640 --> 00:04:48,000
click Submit,
we also get the console to log the value.

76
00:04:48,000 --> 00:04:50,890
So we see that both methods
of submitting are captured.

77
00:04:51,960 --> 00:04:54,340
All right, now that we're
successfully getting the name,

78
00:04:54,340 --> 00:04:57,910
let's add it to the unordered
list below the form.

79
00:04:57,910 --> 00:05:01,450
Remember, list item elements
are children of UL elements, so

80
00:05:01,450 --> 00:05:05,490
we'll need our handler to create
a list item to hold the name.

81
00:05:05,490 --> 00:05:08,630
And we'll that element to the UL.

82
00:05:08,630 --> 00:05:13,237
So back in our handler we won't
need this console.long anymore.

83
00:05:14,380 --> 00:05:19,132
And instead lets store
the input value into a variable

84
00:05:19,132 --> 00:05:23,262
called text with const text = input.value.

85
00:05:26,208 --> 00:05:31,128
Then we'll select the UL element
which has the ID invitedList

86
00:05:31,128 --> 00:05:34,826
where you can select it
with getElement by ID.

87
00:05:47,940 --> 00:05:52,135
After that we can create a list item

88
00:05:52,135 --> 00:05:57,199
element with the create element method,

89
00:05:57,199 --> 00:06:01,981
and store it in a variable named alive.

90
00:06:05,828 --> 00:06:08,616
And finally we will use
the append child method to

91
00:06:08,616 --> 00:06:11,823
place the list item inside
the un ordered list element.

92
00:06:18,712 --> 00:06:21,980
Let's save our file and
go over to the browser and have a look.

93
00:06:24,020 --> 00:06:28,390
I'll type in a name like
Marvin hit Enter and

94
00:06:28,390 --> 00:06:31,620
we have a list item that appears but
it's empty.

95
00:06:31,620 --> 00:06:33,687
So let's look back at our code.

96
00:06:33,687 --> 00:06:38,140
It looks like we never put
the text into the list element.

97
00:06:38,140 --> 00:06:41,000
So right after we declare the li variable.

98
00:06:41,000 --> 00:06:46,863
Let's set it's text content
to the value of text with li.

99
00:06:46,863 --> 00:06:51,040
TextContent = text.

100
00:06:51,040 --> 00:06:51,890
Now let's have another look.

101
00:06:53,030 --> 00:06:59,100
Refreshing and
typing Marvin again we see that it works.

102
00:07:00,320 --> 00:07:02,700
So let's fix one more small thing.

103
00:07:02,700 --> 00:07:06,700
You see how the input element doesn't
clear out when we submit a name.

104
00:07:06,700 --> 00:07:10,120
Let's fix that by setting its
value to an empty string.

105
00:07:10,120 --> 00:07:14,950
We've all ready saved the inputs
value into a variable named input.

106
00:07:14,950 --> 00:07:19,180
So now we can safely remove its contents
by setting it's an empty string.

107
00:07:19,180 --> 00:07:23,769
So in our handler right
below the text constant

108
00:07:23,769 --> 00:07:28,250
we'll say input.value = an empty string.

109
00:07:29,520 --> 00:07:32,288
Let's save and make sure this works.

110
00:07:32,288 --> 00:07:35,984
Typing in Marvin again and
hitting enter we see

111
00:07:35,984 --> 00:07:40,731
that the input now clears out
when we submit the form right?

112
00:07:40,731 --> 00:07:44,350
All right, so the first main
feature of our app is complete.

113
00:07:44,350 --> 00:07:47,350
And next, I'll show you how to
add a way to mark a guest off

114
00:07:47,350 --> 00:07:48,240
once they've responded.