1
00:00:00,910 --> 00:00:05,640
In the last video, I challenged you
to move list items to a saved state,

2
00:00:05,640 --> 00:00:07,260
when the Save button was clicked.

3
00:00:07,260 --> 00:00:09,740
Now I'll show you how I
solved this challenge.

4
00:00:09,740 --> 00:00:12,520
First though let's think
through the problem.

5
00:00:12,520 --> 00:00:17,230
Remember when I talked about reversing
the edit state to get to the saved state?

6
00:00:17,230 --> 00:00:22,310
To get to the edit state we exchanged
the span element with an input element and

7
00:00:22,310 --> 00:00:25,980
we also changed the edit
button to read save.

8
00:00:25,980 --> 00:00:30,540
And to get back we need to reverse those
changes, taking the end put out and

9
00:00:30,540 --> 00:00:31,230
putting a span in.

10
00:00:31,230 --> 00:00:35,210
And we also need to change
the save button to read edit.

11
00:00:35,210 --> 00:00:37,000
So just like we did for the edit state,

12
00:00:37,000 --> 00:00:42,550
we'll first add a branch to the else
if statement here in the click handler.

13
00:00:43,750 --> 00:00:47,430
And this new branch is going to
handle any clicks on a save button.

14
00:00:47,430 --> 00:00:52,370
Since this new branch is going to
reverse the effects of the edit branch,

15
00:00:52,370 --> 00:00:56,440
I'm going to copy this
edit else if branch, and

16
00:00:56,440 --> 00:00:59,790
paste it at the end to
create the new save branch.

17
00:00:59,790 --> 00:01:02,300
Then we'll make the appropriate
changes in this new branch.

18
00:01:04,180 --> 00:01:06,540
So first for the condition.

19
00:01:06,540 --> 00:01:10,610
We want to target buttons with
the text content of save.

20
00:01:13,365 --> 00:01:19,045
And now the first child element of
the list item will be an input instead.

21
00:01:19,045 --> 00:01:22,105
So it will change the span
constant to be input.

22
00:01:23,645 --> 00:01:26,485
Likewise we want to create a new span.

23
00:01:26,485 --> 00:01:31,949
So right below will say const
span document.createElement span.

24
00:01:34,449 --> 00:01:39,553
And we don't need to set the spans type,
so we can delete this line and

25
00:01:39,553 --> 00:01:44,129
we wanna set the spans text content
to the inputs value because

26
00:01:44,129 --> 00:01:49,090
these represent the edits
the user has made to the name.

27
00:01:49,090 --> 00:01:53,600
So we'll switch up this next line by
putting what's on the left side of

28
00:01:53,600 --> 00:01:59,120
the equals or the assignment operator
on the right and vice versa.

29
00:01:59,120 --> 00:02:04,810
So this is going to say
span.textContent = input.value.

30
00:02:06,190 --> 00:02:11,120
And now to append the span
element before the input,

31
00:02:11,120 --> 00:02:13,270
we need to reverse these
arguments as well.

32
00:02:14,310 --> 00:02:18,240
So we'll make the first argument span and
the second argument input.

33
00:02:20,020 --> 00:02:22,500
Then we want to remove the input.

34
00:02:24,430 --> 00:02:28,412
And finally set the text
content of the button to edit.

35
00:02:30,267 --> 00:02:32,476
All right let's try this
out in the browser.

36
00:02:34,691 --> 00:02:42,090
I'll refresh the page and
submit the name, Dennis, And click edit.

37
00:02:43,180 --> 00:02:47,030
So far so good, so
now I'll just change this to Denise.

38
00:02:49,510 --> 00:02:52,040
And when I click save, it works.

39
00:02:52,040 --> 00:02:56,238
So you've just implemented a simple
editing capability to our application.

40
00:02:56,238 --> 00:03:01,040
And then in the next video we'll add
a way to filter out invitees who have yet

41
00:03:01,040 --> 00:03:02,050
to respond.

42
00:03:02,050 --> 00:03:04,260
That way our users can see
the guest list at a glance.