Preview
Video Player
00:00
00:00
States of the Application
7:09Let's plan how we're going to let users edit names on the list.
[MUSIC]
0:00
Our RSVP application has begun to take
shape, but it's missing one key feature.
0:04
Say a user added Joan to the RSVP list,
but meant to type John.
0:10
They'll need a way to edit
the names they've added.
0:15
Before we dive in and create this feature,
let's think about how to accomplish this.
0:18
Pretend you're a user for a moment.
0:22
What would you look for
to know you could edit this name?
0:25
I for instance might look for
a button next to it that says Edit.
0:28
Clicking the button,
maybe the name becomes a form field or
0:32
I can edit the name.
0:34
When I'm done editing the name,
I will look for a Save button to click.
0:36
And clicking this button would bring
the app back to the initial state.
0:40
There are two parts to this.
0:44
We need an initial view and
an editing view.
0:46
And we need to give the user buttons
to move between these two views.
0:49
When they click the buttons,
0:54
the code we write will alter the DOM to
reflect the view the user has moved to.
0:55
In other words, clicking Edit
will remove the text element and
0:59
add an input element, as well as changing
the Edit button to be a save button.
1:03
And clicking Save will
reverse those changes.
1:08
So as JavaScript programmers, we'll need
to write code to handle all these details.
1:11
So in this video,
we'll start by creating an Edit button for
1:16
the user, then we'll replace and
1:19
modify elements to move the list items
between the initial and editing states.
1:21
First, though, let's just focus
on adding the Edit button.
1:26
Well, you can add an Edit
button to each li element
1:29
by modifying our createLI function.
1:32
And we'll add it before the Remove button.
1:35
Now, the code we wrote earlier for
adding the Remove button
1:38
is nearly identical to the code
required for the Edit button.
1:41
We need to create the button,
set its text to Edit,
1:45
then append the button to
the list item element.
1:49
The Edit and Remove buttons will appear
next to each other, so let's copy
1:52
the three lines of code for the Remove
button and paste the new code above it.
1:57
Now that we have two buttons,
2:05
we need to rename these two
constants to differentiate them.
2:06
The edit button will be placed
before the removeButton.
2:10
So we'll name the first button editButton.
2:14
And change the name and
the two lines that follow as well.
2:20
Let's also set its text to edit.
2:28
Next, let's change the remove button's
constant to be more specific.
2:33
We'll name it removeButton and
change the name in the next two lines.
2:38
Now let's save our file and
preview our changes in the browser.
2:51
In the app, I'll enter a name,
let's say Faye.
2:58
And you can see the edit button
has been added to the list item.
3:02
I'll just add two more names,
Jim and Eden.
3:06
And then I'll click the remove button
to show it still removes the names.
3:10
But clicking on the edit button
deletes the names as well.
3:15
Can you think of why?
3:20
Well, let's look at the click
handler to delete names.
3:23
Remember, we placed it on the parent
ul element so it would catch any clicks
3:28
inside that element, then inside we
execute this code for any button clicks.
3:32
Since the edit button is
also inside the ul element,
3:38
clicking it also triggers
the code that deletes names.
3:42
So since there are two kinds of
buttons in the list items, Edit and
3:45
Remove, we need our handler
to distinguish between them.
3:50
So let's wrap the deletion
code in another if statement
3:54
that examines the text
content of the button.
3:59
As the condition, we'll type
e.target.textContent equals remove.
4:10
So now we're saying,
if the clicked element is a BUTTON and
4:22
if its text content is remove,
run this code.
4:28
And now the edit button
won't trigger this behavior.
4:32
We can create the behavior for the edit
button by following the same pattern.
4:36
In fact,
let's just copy this if statement here and
4:40
add it to the end as an else if statement.
4:44
Then we can change remove to edit.
4:54
And inside the else if block,
let's just console.log edit for now.
4:59
So now any buttons that receive clicks
will have their text content examined.
5:08
If the button text is remove,
this code block will run, and
5:14
if the text content is edit,
this code will run.
5:18
So let's see this in the browser.
5:21
I'll open up my console and
enter a few numbers just to
5:22
generate some list items quickly,
let's say one, two, three, and four.
5:27
In my list, clicking remove
still removes the list item.
5:33
But now clicking edit triggers
our console logging behavior.
5:38
All right, so great work.
5:45
You've added an edit button and
5:46
modified the click handler to run
code when that button is clicked.
5:48
So let's do some quick cleanup now.
5:53
Since we're examining the event
target in a number of ways,
5:55
let's create a constant to
make our code more readable.
6:00
We'll declare the constant right
under where we check the tag name.
6:04
Now, at this point,
we know the target element is a button.
6:08
So let's call the constant button.
6:11
Then let's change these
e.target to button.
6:19
And now our code is easier to read.
6:31
Now, that list item and parent ul element
here are a big part of this application.
6:33
It's likely that we'll need to
reference these elements again.
6:40
For example, in the edit button's handler.
6:43
So instead of hiding these constants
inside the button's if statement,
6:45
I'll move them outside
the if statement and
6:50
paste them right below
the button constant.
6:52
Grouping the declarations together
this way also makes our code look more
7:00
readable.
7:03
And now the code inside the if
statement is simpler and more focused.
7:04