Preview
Video Player
00:00
00:00
Tour the Application
3:41It's party time! You're planning a party, and you've sent invitations out. Now as the RSVP's come in, you need a way to keep track of who's coming. Let's look at the app we'll be building to manage that for us.
[MUSIC]
0:00
Hey, everyone, I'm Guil, a friend and
development teacher here at Treehouse.
0:04
Imagine that you're planning a party.
0:08
Knowing how many people to expect can
really help you plan for the party.
0:10
So you ask your guests to reply whether
they'll be attending or not, and
0:14
you plan on tracking the responses.
0:17
But how will you do that?
0:18
Let's look at a web application
designed to help track party RSVPs.
0:20
In fact, we'll be programming
this app in this course.
0:23
In the RSVP app you can enter
names in this text field,
0:26
click Submit, and
the names appear on the invited list.
0:30
Once we hear from invitees, we can check
them off, and the confirmed text and
0:34
outline change color to show
that it's been selected.
0:39
We can then filter out the invitees
who haven't responded yet
0:43
by checking this checkbox.
0:47
And if we enter someone's name
incorrectly, we can fix it by clicking
0:50
the edit button,
correcting the name and saving it.
0:55
Finally, if we need to remove a name,
we can simply click remove.
1:01
We're going to build the application
we just previewed using JavaScript.
1:07
This will give you a chance to see
how JavaScript can be used in a real,
1:10
useful web application.
1:13
And on top of that,
1:14
many of the features we'll build
are common to many other web applications.
1:16
So this course will help you build
a solid foundation in your knowledge of
1:19
JavaScript and the DOM.
1:22
Now, I've all ready created
an HTML starter file, so
1:25
let's take a look at that now.
1:27
And to follow along,
launch the workspace for this video.
1:28
Or, if you'd like to follow
along in your own text editor,
1:31
download the project files and
open the directory named for this video.
1:33
Let's get to it.
1:37
So here's our starting HTML file,
index.html.
1:39
In the head, we have a title and
links to the external CSS.
1:42
Now, I've already written the CSS for this
app, and you won't need to write any for
1:46
this course.
1:49
But feel free to take a look
at it if you're curious.
1:50
The body has a form with
an id of registrar, and
1:53
we'll use this id to select
the form using JavaScript.
1:56
Inside the form we have a text input for
a user to type the name of a guest and
2:00
a submit button.
2:05
Now, below the form is an empty, unordered
list element with an ID of invitedList.
2:07
This is where our application
will place submitted names.
2:13
Similarly to the form,
2:16
the id here will help us locate
this ul element using JavaScript.
2:18
So, first, right above the closing body
tag, let's include a script tag that
2:24
will load the JavaScript file which
will contain our application code.
2:28
We'll name the file app.js.
2:36
Now this file, app.js,
doesn't exist yet, so let's create it.
2:39
I'll select New File and name it app.js.
2:44
Now, usually at this point
I like to write a little
2:51
log to myself in the console to make sure
my two files are connected successfully.
2:54
So in app.js,
let's write console.log and the message,
2:58
('Hello from app.js'); So
3:04
now I'll save my two files,
launch the workspace.
3:10
And in the browser,
let's make sure DevTools is open.
3:15
Now, in the console we
should see that message.
3:19
And there it is, Hello from app.js.
3:21
So now that we know
index.html is loading app.js,
3:24
let's switch back over to app.js and
remove the console.log.
3:28
In the next video, we'll write the code
to accept names through the form, and
3:34
place them into the ul below.
3:38