Tour the Application

[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