1
00:00:00,000 --> 00:00:04,949
[MUSIC]

2
00:00:04,949 --> 00:00:10,652
Our RSVP application has begun to take
shape, but it's missing one key feature.

3
00:00:10,652 --> 00:00:15,640
Say a user added Joan to the RSVP list,
but meant to type John.

4
00:00:15,640 --> 00:00:18,080
They'll need a way to edit
the names they've added.

5
00:00:18,080 --> 00:00:21,909
Before we dive in and create this feature,
let's think about how to accomplish this.

6
00:00:22,990 --> 00:00:25,100
Pretend you're a user for a moment.

7
00:00:25,100 --> 00:00:28,570
What would you look for
to know you could edit this name?

8
00:00:28,570 --> 00:00:32,280
I for instance might look for
a button next to it that says Edit.

9
00:00:32,280 --> 00:00:34,880
Clicking the button,
maybe the name becomes a form field or

10
00:00:34,880 --> 00:00:36,590
I can edit the name.

11
00:00:36,590 --> 00:00:40,240
When I'm done editing the name,
I will look for a Save button to click.

12
00:00:40,240 --> 00:00:43,200
And clicking this button would bring
the app back to the initial state.

13
00:00:44,270 --> 00:00:46,210
There are two parts to this.

14
00:00:46,210 --> 00:00:49,780
We need an initial view and
an editing view.

15
00:00:49,780 --> 00:00:54,030
And we need to give the user buttons
to move between these two views.

16
00:00:54,030 --> 00:00:55,180
When they click the buttons,

17
00:00:55,180 --> 00:00:59,750
the code we write will alter the DOM to
reflect the view the user has moved to.

18
00:00:59,750 --> 00:01:03,350
In other words, clicking Edit
will remove the text element and

19
00:01:03,350 --> 00:01:08,300
add an input element, as well as changing
the Edit button to be a save button.

20
00:01:08,300 --> 00:01:11,390
And clicking Save will
reverse those changes.

21
00:01:11,390 --> 00:01:16,470
So as JavaScript programmers, we'll need
to write code to handle all these details.

22
00:01:16,470 --> 00:01:19,430
So in this video,
we'll start by creating an Edit button for

23
00:01:19,430 --> 00:01:21,310
the user, then we'll replace and

24
00:01:21,310 --> 00:01:25,689
modify elements to move the list items
between the initial and editing states.

25
00:01:26,920 --> 00:01:29,445
First, though, let's just focus
on adding the Edit button.

26
00:01:29,445 --> 00:01:32,890
Well, you can add an Edit
button to each li element

27
00:01:32,890 --> 00:01:35,400
by modifying our createLI function.

28
00:01:35,400 --> 00:01:38,490
And we'll add it before the Remove button.

29
00:01:38,490 --> 00:01:41,530
Now, the code we wrote earlier for
adding the Remove button

30
00:01:41,530 --> 00:01:45,280
is nearly identical to the code
required for the Edit button.

31
00:01:45,280 --> 00:01:49,213
We need to create the button,
set its text to Edit,

32
00:01:49,213 --> 00:01:52,977
then append the button to
the list item element.

33
00:01:52,977 --> 00:01:57,111
The Edit and Remove buttons will appear
next to each other, so let's copy

34
00:01:57,111 --> 00:02:01,390
the three lines of code for the Remove
button and paste the new code above it.

35
00:02:05,339 --> 00:02:06,917
Now that we have two buttons,

36
00:02:06,917 --> 00:02:10,218
we need to rename these two
constants to differentiate them.

37
00:02:10,218 --> 00:02:14,909
The edit button will be placed
before the removeButton.

38
00:02:14,909 --> 00:02:18,640
So we'll name the first button editButton.

39
00:02:20,600 --> 00:02:23,239
And change the name and
the two lines that follow as well.

40
00:02:28,347 --> 00:02:31,055
Let's also set its text to edit.

41
00:02:33,557 --> 00:02:38,940
Next, let's change the remove button's
constant to be more specific.

42
00:02:38,940 --> 00:02:43,938
We'll name it removeButton and
change the name in the next two lines.

43
00:02:51,140 --> 00:02:54,372
Now let's save our file and
preview our changes in the browser.

44
00:02:58,339 --> 00:03:02,819
In the app, I'll enter a name,
let's say Faye.

45
00:03:02,819 --> 00:03:06,310
And you can see the edit button
has been added to the list item.

46
00:03:06,310 --> 00:03:10,466
I'll just add two more names,
Jim and Eden.

47
00:03:10,466 --> 00:03:14,290
And then I'll click the remove button
to show it still removes the names.

48
00:03:15,950 --> 00:03:19,860
But clicking on the edit button
deletes the names as well.

49
00:03:20,910 --> 00:03:21,680
Can you think of why?

50
00:03:23,360 --> 00:03:26,290
Well, let's look at the click
handler to delete names.

51
00:03:28,090 --> 00:03:32,960
Remember, we placed it on the parent
ul element so it would catch any clicks

52
00:03:32,960 --> 00:03:38,640
inside that element, then inside we
execute this code for any button clicks.

53
00:03:38,640 --> 00:03:42,580
Since the edit button is
also inside the ul element,

54
00:03:42,580 --> 00:03:45,940
clicking it also triggers
the code that deletes names.

55
00:03:45,940 --> 00:03:50,070
So since there are two kinds of
buttons in the list items, Edit and

56
00:03:50,070 --> 00:03:54,340
Remove, we need our handler
to distinguish between them.

57
00:03:54,340 --> 00:03:59,251
So let's wrap the deletion
code in another if statement

58
00:03:59,251 --> 00:04:03,332
that examines the text
content of the button.

59
00:04:10,522 --> 00:04:18,994
As the condition, we'll type
e.target.textContent equals remove.

60
00:04:22,361 --> 00:04:28,198
So now we're saying,
if the clicked element is a BUTTON and

61
00:04:28,198 --> 00:04:32,767
if its text content is remove,
run this code.

62
00:04:32,767 --> 00:04:35,380
And now the edit button
won't trigger this behavior.

63
00:04:36,470 --> 00:04:40,310
We can create the behavior for the edit
button by following the same pattern.

64
00:04:40,310 --> 00:04:44,721
In fact,
let's just copy this if statement here and

65
00:04:44,721 --> 00:04:48,139
add it to the end as an else if statement.

66
00:04:54,689 --> 00:04:59,538
Then we can change remove to edit.

67
00:04:59,538 --> 00:05:04,398
And inside the else if block,
let's just console.log edit for now.

68
00:05:08,988 --> 00:05:14,170
So now any buttons that receive clicks
will have their text content examined.

69
00:05:14,170 --> 00:05:18,170
If the button text is remove,
this code block will run, and

70
00:05:18,170 --> 00:05:21,730
if the text content is edit,
this code will run.

71
00:05:21,730 --> 00:05:22,775
So let's see this in the browser.

72
00:05:22,775 --> 00:05:27,570
I'll open up my console and
enter a few numbers just to

73
00:05:27,570 --> 00:05:32,430
generate some list items quickly,
let's say one, two, three, and four.

74
00:05:33,890 --> 00:05:38,749
In my list, clicking remove
still removes the list item.

75
00:05:38,749 --> 00:05:42,650
But now clicking edit triggers
our console logging behavior.

76
00:05:45,159 --> 00:05:46,852
All right, so great work.

77
00:05:46,852 --> 00:05:48,634
You've added an edit button and

78
00:05:48,634 --> 00:05:53,050
modified the click handler to run
code when that button is clicked.

79
00:05:53,050 --> 00:05:55,970
So let's do some quick cleanup now.

80
00:05:55,970 --> 00:06:00,340
Since we're examining the event
target in a number of ways,

81
00:06:00,340 --> 00:06:04,030
let's create a constant to
make our code more readable.

82
00:06:04,030 --> 00:06:08,118
We'll declare the constant right
under where we check the tag name.

83
00:06:08,118 --> 00:06:11,690
Now, at this point,
we know the target element is a button.

84
00:06:11,690 --> 00:06:13,698
So let's call the constant button.

85
00:06:19,326 --> 00:06:26,380
Then let's change these
e.target to button.

86
00:06:31,191 --> 00:06:33,900
And now our code is easier to read.

87
00:06:33,900 --> 00:06:40,090
Now, that list item and parent ul element
here are a big part of this application.

88
00:06:40,090 --> 00:06:43,030
It's likely that we'll need to
reference these elements again.

89
00:06:43,030 --> 00:06:45,380
For example, in the edit button's handler.

90
00:06:45,380 --> 00:06:50,102
So instead of hiding these constants
inside the button's if statement,

91
00:06:50,102 --> 00:06:52,920
I'll move them outside
the if statement and

92
00:06:52,920 --> 00:06:55,827
paste them right below
the button constant.

93
00:07:00,108 --> 00:07:03,903
Grouping the declarations together
this way also makes our code look more

94
00:07:03,903 --> 00:07:04,900
readable.

95
00:07:04,900 --> 00:07:08,442
And now the code inside the if
statement is simpler and more focused.