[MUSIC]

Our RSVP application has begun to take shape, but it's missing one key feature.

Say a user added Joan to the RSVP list, but meant to type John.

They'll need a way to edit the names they've added.

Before we dive in and create this feature, let's think about how to accomplish this.

Pretend you're a user for a moment.

What would you look for to know you could edit this name?

I for instance might look for a button next to it that says Edit.

Clicking the button, maybe the name becomes a form field or

I can edit the name.

When I'm done editing the name, I will look for a Save button to click.

And clicking this button would bring the app back to the initial state.

There are two parts to this.

We need an initial view and an editing view.

And we need to give the user buttons to move between these two views.

When they click the buttons,

the code we write will alter the DOM to reflect the view the user has moved to.

In other words, clicking Edit will remove the text element and

add an input element, as well as changing the Edit button to be a save button.

And clicking Save will reverse those changes.

So as JavaScript programmers, we'll need to write code to handle all these details.

So in this video, we'll start by creating an Edit button for

the user, then we'll replace and

modify elements to move the list items between the initial and editing states.

First, though, let's just focus on adding the Edit button.

Well, you can add an Edit button to each li element

by modifying our createLI function.

And we'll add it before the Remove button.

Now, the code we wrote earlier for adding the Remove button

is nearly identical to the code required for the Edit button.

We need to create the button, set its text to Edit,

then append the button to the list item element.

The Edit and Remove buttons will appear next to each other, so let's copy

the three lines of code for the Remove button and paste the new code above it.

Now that we have two buttons,

we need to rename these two constants to differentiate them.

The edit button will be placed before the removeButton.

So we'll name the first button editButton.

And change the name and the two lines that follow as well.

Let's also set its text to edit.

Next, let's change the remove button's constant to be more specific.

We'll name it removeButton and change the name in the next two lines.

Now let's save our file and preview our changes in the browser.

In the app, I'll enter a name, let's say Faye.

And you can see the edit button has been added to the list item.

I'll just add two more names, Jim and Eden.

And then I'll click the remove button to show it still removes the names.

But clicking on the edit button deletes the names as well.

Can you think of why?

Well, let's look at the click handler to delete names.

Remember, we placed it on the parent ul element so it would catch any clicks

inside that element, then inside we execute this code for any button clicks.

Since the edit button is also inside the ul element,

clicking it also triggers the code that deletes names.

So since there are two kinds of buttons in the list items, Edit and

Remove, we need our handler to distinguish between them.

So let's wrap the deletion code in another if statement

that examines the text content of the button.

As the condition, we'll type e.target.textContent equals remove.

So now we're saying, if the clicked element is a BUTTON and

if its text content is remove, run this code.

And now the edit button won't trigger this behavior.

We can create the behavior for the edit button by following the same pattern.

In fact, let's just copy this if statement here and

add it to the end as an else if statement.

Then we can change remove to edit.

And inside the else if block, let's just console.log edit for now.

So now any buttons that receive clicks will have their text content examined.

If the button text is remove, this code block will run, and

if the text content is edit, this code will run.

So let's see this in the browser.

I'll open up my console and enter a few numbers just to

generate some list items quickly, let's say one, two, three, and four.

In my list, clicking remove still removes the list item.

But now clicking edit triggers our console logging behavior.

All right, so great work.

You've added an edit button and

modified the click handler to run code when that button is clicked.

So let's do some quick cleanup now.

Since we're examining the event target in a number of ways,

let's create a constant to make our code more readable.

We'll declare the constant right under where we check the tag name.

Now, at this point, we know the target element is a button.

So let's call the constant button.

Then let's change these e.target to button.

And now our code is easier to read.

Now, that list item and parent ul element here are a big part of this application.

It's likely that we'll need to reference these elements again.

For example, in the edit button's handler.

So instead of hiding these constants inside the button's if statement,

I'll move them outside the if statement and

paste them right below the button constant.

Grouping the declarations together this way also makes our code look more

readable.

And now the code inside the if statement is simpler and more focused.