1
00:00:00,000 --> 00:00:04,679
[MUSIC]

2
00:00:04,679 --> 00:00:08,720
Hey, everyone, I'm Guil, a friend and
development teacher here at Treehouse.

3
00:00:08,720 --> 00:00:10,560
Imagine that you're planning a party.

4
00:00:10,560 --> 00:00:14,070
Knowing how many people to expect can
really help you plan for the party.

5
00:00:14,070 --> 00:00:17,090
So you ask your guests to reply whether
they'll be attending or not, and

6
00:00:17,090 --> 00:00:18,387
you plan on tracking the responses.

7
00:00:18,387 --> 00:00:19,610
But how will you do that?

8
00:00:20,860 --> 00:00:23,960
Let's look at a web application
designed to help track party RSVPs.

9
00:00:23,960 --> 00:00:26,318
In fact, we'll be programming
this app in this course.

10
00:00:26,318 --> 00:00:30,252
In the RSVP app you can enter
names in this text field,

11
00:00:30,252 --> 00:00:34,457
click Submit, and
the names appear on the invited list.

12
00:00:34,457 --> 00:00:39,315
Once we hear from invitees, we can check
them off, and the confirmed text and

13
00:00:39,315 --> 00:00:43,840
outline change color to show
that it's been selected.

14
00:00:43,840 --> 00:00:47,540
We can then filter out the invitees
who haven't responded yet

15
00:00:47,540 --> 00:00:48,990
by checking this checkbox.

16
00:00:50,360 --> 00:00:55,140
And if we enter someone's name
incorrectly, we can fix it by clicking

17
00:00:55,140 --> 00:01:00,150
the edit button,
correcting the name and saving it.

18
00:01:01,200 --> 00:01:04,590
Finally, if we need to remove a name,
we can simply click remove.

19
00:01:07,030 --> 00:01:10,440
We're going to build the application
we just previewed using JavaScript.

20
00:01:10,440 --> 00:01:13,720
This will give you a chance to see
how JavaScript can be used in a real,

21
00:01:13,720 --> 00:01:14,950
useful web application.

22
00:01:14,950 --> 00:01:16,270
And on top of that,

23
00:01:16,270 --> 00:01:19,940
many of the features we'll build
are common to many other web applications.

24
00:01:19,940 --> 00:01:22,840
So this course will help you build
a solid foundation in your knowledge of

25
00:01:22,840 --> 00:01:23,760
JavaScript and the DOM.

26
00:01:25,100 --> 00:01:27,780
Now, I've all ready created
an HTML starter file, so

27
00:01:27,780 --> 00:01:28,740
let's take a look at that now.

28
00:01:28,740 --> 00:01:31,530
And to follow along,
launch the workspace for this video.

29
00:01:31,530 --> 00:01:33,890
Or, if you'd like to follow
along in your own text editor,

30
00:01:33,890 --> 00:01:37,110
download the project files and
open the directory named for this video.

31
00:01:37,110 --> 00:01:37,610
Let's get to it.

32
00:01:39,220 --> 00:01:42,929
So here's our starting HTML file,
index.html.

33
00:01:42,929 --> 00:01:46,790
In the head, we have a title and
links to the external CSS.

34
00:01:46,790 --> 00:01:49,722
Now, I've already written the CSS for this
app, and you won't need to write any for

35
00:01:49,722 --> 00:01:50,228
this course.

36
00:01:50,228 --> 00:01:53,180
But feel free to take a look
at it if you're curious.

37
00:01:53,180 --> 00:01:56,617
The body has a form with
an id of registrar, and

38
00:01:56,617 --> 00:02:00,800
we'll use this id to select
the form using JavaScript.

39
00:02:00,800 --> 00:02:05,770
Inside the form we have a text input for
a user to type the name of a guest and

40
00:02:05,770 --> 00:02:07,260
a submit button.

41
00:02:07,260 --> 00:02:13,320
Now, below the form is an empty, unordered
list element with an ID of invitedList.

42
00:02:13,320 --> 00:02:16,790
This is where our application
will place submitted names.

43
00:02:16,790 --> 00:02:18,140
Similarly to the form,

44
00:02:18,140 --> 00:02:22,860
the id here will help us locate
this ul element using JavaScript.

45
00:02:24,040 --> 00:02:28,871
So, first, right above the closing body
tag, let's include a script tag that

46
00:02:28,871 --> 00:02:33,284
will load the JavaScript file which
will contain our application code.

47
00:02:36,210 --> 00:02:39,430
We'll name the file app.js.

48
00:02:39,430 --> 00:02:43,670
Now this file, app.js,
doesn't exist yet, so let's create it.

49
00:02:44,700 --> 00:02:51,760
I'll select New File and name it app.js.

50
00:02:51,760 --> 00:02:54,690
Now, usually at this point
I like to write a little

51
00:02:54,690 --> 00:02:58,860
log to myself in the console to make sure
my two files are connected successfully.

52
00:02:58,860 --> 00:03:04,034
So in app.js,
let's write console.log and the message,

53
00:03:04,034 --> 00:03:10,226
('Hello from app.js'); So

54
00:03:10,226 --> 00:03:15,081
now I'll save my two files,
launch the workspace.

55
00:03:15,081 --> 00:03:18,490
And in the browser,
let's make sure DevTools is open.

56
00:03:19,510 --> 00:03:21,741
Now, in the console we
should see that message.

57
00:03:21,741 --> 00:03:24,970
And there it is, Hello from app.js.

58
00:03:24,970 --> 00:03:28,254
So now that we know
index.html is loading app.js,

59
00:03:28,254 --> 00:03:32,370
let's switch back over to app.js and
remove the console.log.

60
00:03:34,030 --> 00:03:38,710
In the next video, we'll write the code
to accept names through the form, and

61
00:03:38,710 --> 00:03:40,390
place them into the ul below.