Earlier, I challenged you to move list items to a saved state when the save button was clicked. In this video, I'll show you one solution for this challenge.
In the last video, I challenged you to move list items to a saved state, 0:00 when the Save button was clicked. 0:05 Now I'll show you how I solved this challenge. 0:07 First though let's think through the problem. 0:09 Remember when I talked about reversing the edit state to get to the saved state? 0:12 To get to the edit state we exchanged the span element with an input element and 0:17 we also changed the edit button to read save. 0:22 And to get back we need to reverse those changes, taking the end put out and 0:25 putting a span in. 0:30 And we also need to change the save button to read edit. 0:31 So just like we did for the edit state, 0:35 we'll first add a branch to the else if statement here in the click handler. 0:37 And this new branch is going to handle any clicks on a save button. 0:43 Since this new branch is going to reverse the effects of the edit branch, 0:47 I'm going to copy this edit else if branch, and 0:52 paste it at the end to create the new save branch. 0:56 Then we'll make the appropriate changes in this new branch. 0:59 So first for the condition. 1:04 We want to target buttons with the text content of save. 1:06 And now the first child element of the list item will be an input instead. 1:13 So it will change the span constant to be input. 1:19 Likewise we want to create a new span. 1:23 So right below will say const span document.createElement span. 1:26 And we don't need to set the spans type, so we can delete this line and 1:34 we wanna set the spans text content to the inputs value because 1:39 these represent the edits the user has made to the name. 1:44 So we'll switch up this next line by putting what's on the left side of 1:49 the equals or the assignment operator on the right and vice versa. 1:53 So this is going to say span.textContent = input.value. 1:59 And now to append the span element before the input, 2:06 we need to reverse these arguments as well. 2:11 So we'll make the first argument span and the second argument input. 2:14 Then we want to remove the input. 2:20 And finally set the text content of the button to edit. 2:24 All right let's try this out in the browser. 2:30 I'll refresh the page and submit the name, Dennis, And click edit. 2:34 So far so good, so now I'll just change this to Denise. 2:43 And when I click save, it works. 2:49 So you've just implemented a simple editing capability to our application. 2:52 And then in the next video we'll add a way to filter out invitees who have yet 2:56 to respond. 3:01 That way our users can see the guest list at a glance. 3:02
You need to sign up for Treehouse in order to download course files.Sign up