[MUSIC] 0:00 Our RSVP application has begun to take shape, but it's missing one key feature. 0:04 Say a user added Joan to the RSVP list, but meant to type John. 0:10 They'll need a way to edit the names they've added. 0:15 Before we dive in and create this feature, let's think about how to accomplish this. 0:18 Pretend you're a user for a moment. 0:22 What would you look for to know you could edit this name? 0:25 I for instance might look for a button next to it that says Edit. 0:28 Clicking the button, maybe the name becomes a form field or 0:32 I can edit the name. 0:34 When I'm done editing the name, I will look for a Save button to click. 0:36 And clicking this button would bring the app back to the initial state. 0:40 There are two parts to this. 0:44 We need an initial view and an editing view. 0:46 And we need to give the user buttons to move between these two views. 0:49 When they click the buttons, 0:54 the code we write will alter the DOM to reflect the view the user has moved to. 0:55 In other words, clicking Edit will remove the text element and 0:59 add an input element, as well as changing the Edit button to be a save button. 1:03 And clicking Save will reverse those changes. 1:08 So as JavaScript programmers, we'll need to write code to handle all these details. 1:11 So in this video, we'll start by creating an Edit button for 1:16 the user, then we'll replace and 1:19 modify elements to move the list items between the initial and editing states. 1:21 First, though, let's just focus on adding the Edit button. 1:26 Well, you can add an Edit button to each li element 1:29 by modifying our createLI function. 1:32 And we'll add it before the Remove button. 1:35 Now, the code we wrote earlier for adding the Remove button 1:38 is nearly identical to the code required for the Edit button. 1:41 We need to create the button, set its text to Edit, 1:45 then append the button to the list item element. 1:49 The Edit and Remove buttons will appear next to each other, so let's copy 1:52 the three lines of code for the Remove button and paste the new code above it. 1:57 Now that we have two buttons, 2:05 we need to rename these two constants to differentiate them. 2:06 The edit button will be placed before the removeButton. 2:10 So we'll name the first button editButton. 2:14 And change the name and the two lines that follow as well. 2:20 Let's also set its text to edit. 2:28 Next, let's change the remove button's constant to be more specific. 2:33 We'll name it removeButton and change the name in the next two lines. 2:38 Now let's save our file and preview our changes in the browser. 2:51 In the app, I'll enter a name, let's say Faye. 2:58 And you can see the edit button has been added to the list item. 3:02 I'll just add two more names, Jim and Eden. 3:06 And then I'll click the remove button to show it still removes the names. 3:10 But clicking on the edit button deletes the names as well. 3:15 Can you think of why? 3:20 Well, let's look at the click handler to delete names. 3:23 Remember, we placed it on the parent ul element so it would catch any clicks 3:28 inside that element, then inside we execute this code for any button clicks. 3:32 Since the edit button is also inside the ul element, 3:38 clicking it also triggers the code that deletes names. 3:42 So since there are two kinds of buttons in the list items, Edit and 3:45 Remove, we need our handler to distinguish between them. 3:50 So let's wrap the deletion code in another if statement 3:54 that examines the text content of the button. 3:59 As the condition, we'll type e.target.textContent equals remove. 4:10 So now we're saying, if the clicked element is a BUTTON and 4:22 if its text content is remove, run this code. 4:28 And now the edit button won't trigger this behavior. 4:32 We can create the behavior for the edit button by following the same pattern. 4:36 In fact, let's just copy this if statement here and 4:40 add it to the end as an else if statement. 4:44 Then we can change remove to edit. 4:54 And inside the else if block, let's just console.log edit for now. 4:59 So now any buttons that receive clicks will have their text content examined. 5:08 If the button text is remove, this code block will run, and 5:14 if the text content is edit, this code will run. 5:18 So let's see this in the browser. 5:21 I'll open up my console and enter a few numbers just to 5:22 generate some list items quickly, let's say one, two, three, and four. 5:27 In my list, clicking remove still removes the list item. 5:33 But now clicking edit triggers our console logging behavior. 5:38 All right, so great work. 5:45 You've added an edit button and 5:46 modified the click handler to run code when that button is clicked. 5:48 So let's do some quick cleanup now. 5:53 Since we're examining the event target in a number of ways, 5:55 let's create a constant to make our code more readable. 6:00 We'll declare the constant right under where we check the tag name. 6:04 Now, at this point, we know the target element is a button. 6:08 So let's call the constant button. 6:11 Then let's change these e.target to button. 6:19 And now our code is easier to read. 6:31 Now, that list item and parent ul element here are a big part of this application. 6:33 It's likely that we'll need to reference these elements again. 6:40 For example, in the edit button's handler. 6:43 So instead of hiding these constants inside the button's if statement, 6:45 I'll move them outside the if statement and 6:50 paste them right below the button constant. 6:52 Grouping the declarations together this way also makes our code look more 7:00 readable. 7:03 And now the code inside the if statement is simpler and more focused. 7:04