[MUSIC]

Hey, everyone, I'm Guil, a friend and development teacher here at Treehouse.

Imagine that you're planning a party.

Knowing how many people to expect can really help you plan for the party.

So you ask your guests to reply whether they'll be attending or not, and

you plan on tracking the responses.

But how will you do that?

Let's look at a web application designed to help track party RSVPs.

In fact, we'll be programming this app in this course.

In the RSVP app you can enter names in this text field,

click Submit, and the names appear on the invited list.

Once we hear from invitees, we can check them off, and the confirmed text and

outline change color to show that it's been selected.

We can then filter out the invitees who haven't responded yet

by checking this checkbox.

And if we enter someone's name incorrectly, we can fix it by clicking

the edit button, correcting the name and saving it.

Finally, if we need to remove a name, we can simply click remove.

We're going to build the application we just previewed using JavaScript.

This will give you a chance to see how JavaScript can be used in a real,

useful web application.

And on top of that,

many of the features we'll build are common to many other web applications.

So this course will help you build a solid foundation in your knowledge of

JavaScript and the DOM.

Now, I've all ready created an HTML starter file, so

let's take a look at that now.

And to follow along, launch the workspace for this video.

Or, if you'd like to follow along in your own text editor,

download the project files and open the directory named for this video.

Let's get to it.

So here's our starting HTML file, index.html.

In the head, we have a title and links to the external CSS.

Now, I've already written the CSS for this app, and you won't need to write any for

this course.

But feel free to take a look at it if you're curious.

The body has a form with an id of registrar, and

we'll use this id to select the form using JavaScript.

Inside the form we have a text input for a user to type the name of a guest and

a submit button.

Now, below the form is an empty, unordered list element with an ID of invitedList.

This is where our application will place submitted names.

Similarly to the form,

the id here will help us locate this ul element using JavaScript.

So, first, right above the closing body tag, let's include a script tag that

will load the JavaScript file which will contain our application code.

We'll name the file app.js.

Now this file, app.js, doesn't exist yet, so let's create it.

I'll select New File and name it app.js.

Now, usually at this point I like to write a little

log to myself in the console to make sure my two files are connected successfully.

So in app.js, let's write console.log and the message,

('Hello from app.js'); So

now I'll save my two files, launch the workspace.

And in the browser, let's make sure DevTools is open.

Now, in the console we should see that message.

And there it is, Hello from app.js.

So now that we know index.html is loading app.js,

let's switch back over to app.js and remove the console.log.

In the next video, we'll write the code to accept names through the form, and

place them into the ul below.