Preview
Video Player
00:00
00:00
Saving Names
3:05Earlier, 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 to 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