In the previous video, we added an 'edit' button to our list items. Now we'll need to manipulate the DOM when the 'edit' buttons are clicked to get to an editing state.
In the last video we added an edit button to our list items. 0:01 So now we need to manipulate the DOM when those edit buttons are clicked 0:05 to get to an editing state. 0:08 So how will we need to manipulate the DOM to move to an editing state? 0:11 We want the text to turn into a text input element so the user can alter the text. 0:15 So let's start there. 0:20 So we're gonna need to create a text input and replace the current text with it. 0:21 That means we'll also need to remove the text from the list item so 0:26 we can put this new element in its place. 0:30 So let's hop over to Chrome Dev Tools to look at the list items DOM structure. 0:33 Now if you don't have a list item generated go ahead and 0:36 add a couple of names using the form then in Chrome right or 0:39 Ctrl+click on one of the names and choose inspect. 0:44 And this opens the developer tools and you can see the structure of the list items. 0:48 So notice inside the list item we have a label and 0:53 checkbox then the two button elements. 0:59 But what is the text itself? 1:03 It doesn't appear to be an HTML element. 1:05 Well, this is a text element which is different from an HTML element. 1:08 Text elements are accessed and manipulated differently than HTML elements. 1:12 So to simplify the way we'll need to think about manipulating the text element, 1:17 let's turn it into an HTML element. 1:21 And we can do this by wrapping it in a span tag. 1:22 Back in app.js, the first thing we'll need to do is modify 1:25 the createLI function where the list items are being created. 1:29 So let's copy this line that creates an input and 1:34 paste it right below where we're creating the list item. 1:38 Now I'll rename a constant to span and change input to span. 1:44 Then instead of setting the list items text content we're going to set 1:53 the spans text content with span.textContent. 1:59 And finally, we'll append the span to the list item with 2:03 li.appendChild(span). 2:09 Let's save our file. 2:15 Go over to the browser and refresh. 2:17 In the text field I'll enter the name Alina. 2:20 And now over in the div tools you can see that the name 2:23 inside the list item is now inside a span. 2:27 Moving back to the edit handler, in app.js we can 2:34 remove this console.log from the else if branch. 2:39 And let's first select the span using the first element child property on the list 2:44 item element with const span = li.firstElementChild. 2:50 Next will create the input element we want to replace the span with. 2:59 Then right below, we'll configure it to be a text input with input.type = text. 3:16 And now we can use the span to place the new input element into the DOM using 3:27 insert before. 3:32 We wanna place the new input element before the span so 3:39 we'll pass input first then span. 3:43 And finally we'll call removeChild on the span to remove it. 3:46 Let's save the file and see how this works in the browser. 3:57 I'll refresh and enter a name, let say Francis. 4:01 And then in the list item, once we click edit and 4:07 inspect the LI in the dev tools. 4:13 We can see that we're successfully replacing the text with an input element. 4:19 Now we should also provide the name for users to edit. 4:24 So going back to app.js let's set the value 4:28 of the input element to the text content of the span 4:33 with input.value = span.textContent. 4:39 We'll give this a save and look at it in the browser. 4:44 Entering a name again and clicking edit. 4:46 We see that the name appears in the input, nice. 4:53 Now there is one more change we need to make to our editing state. 4:56 How will users save and exit this state? 5:00 We'll need to save button, 5:03 also because we're in the editing state we don't need the edit button anymore. 5:05 So let's change the edit button to a save button. 5:10 At the bottom of the else if branched we can set the button text to save with 5:14 button.textContent = save. 5:20 Saving the file, and switching over to the browser. 5:27 Let's enter a name and click edit and we see that the button changes to say save. 5:30 Now clicking the save button does nothing for now. 5:38 I like to offer you a challenge now that we've implemented an edit state 5:43 see if you can implement a saved state. 5:47 The list item should move to the saved state when the user clicks save. 5:49 This is similar to the way we moved to the edit state from the save state. 5:54 In fact, I'll give you a hint for this challenge. 5:58 You'll need to undo all the things we did to move the app to an edit state. 6:00 Go ahead and give it a try and 6:04 in the next video I'll show you how I completed the challenge. 6:05 Good luck. 6:07
You need to sign up for Treehouse in order to download course files.Sign up