Preview
Video Player
00:00
00:00
Moving to an Editing State
6:08In 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