"Python Collections (2016, retired 2019)" was retired on January 6, 2020.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed DOM Scripting By Example!
You have completed DOM Scripting By Example!
Preview
It'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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up