A good place to start when refactoring a program, is to look for the same code,

or very similar code that appears again and again.

The programmer's slogan, don't repeat yourself,

is the foundation of dry programming.

Duplication, not only makes your programs longer, but

also makes them more difficult to update.

Since a change you make in one part of the program,

will probably need to be made wherever the same code appears.

So let's see if we can simplify our program by identifying and

removing duplicate code, for example,

take a look at the createLI function, can you spot repeated code here?

Notice how after the first list item is created in the first line,

createElement is called five times.

And after we create each element we set a property to a value.

I'll just break these lines out, so you can see this more clearly.

So, for example, in the function this span elements textContent is set,

then here this checkbox type is set and so on.

So we could create a function to accept arguments for the parts of

these lines that are different, and repeat the actions that are the same.

In other words, our new function could accept an element name,

a property name and a property value as arguments.

Then it could create that element, set the supplied property to the supplied value,

and then return the element.

I'll show you what I mean.

Let's name this new function, createElement.

And the function will live inside our createLI function for its private use.

Next, let's copy and paste one of these two line sequences into the function.

So I'll copy the const span and span.text content lines.

And now, we can go through this code and

replace the parts that will change from element to element.

We'll start with the element name that we're passing

into the createElement method.

So let's create a parameter named elementName that we can pass instead.

Now, when we call createElement, we pass in the name of an element as a string.

And this line will create that element.

And we'll store that element in a constant named element.

And we'll also change the other instance of span to our new name of element.

And we also need to pass the property name into the function.

Since it will differ from element to element.

We'll make that the second parameter to the function, and name it property.

And to access the property on element, we'll need to use brackets syntax.

So let's replace .textContent with a set of square brackets and

property within that.

What this does is it lets us dynamically access the property.

So in other words we can use the string contained in the property variable to

access the property of element.

Now, the last value we'll need to supply to this function

is the value that we're assigning to the elements property.

So let's create a third parameter to hold that, and we'll name it value.

We can then assign the property to a value.

Then we'll return this element now that it's created and configured.

So that's all our function needs.

Now, let's replace each two line bit of code with a call to our new function,

and then we'll add in the specific details as arguments and

let the function take care of the rest.

Since we named our function createElement, we can just delete document

from this line, and we can also leave in the string span as the first argument.

After we create the spam tag, will want to set its text content

to the text provided as the argument to createLI.

Just like we're doing in this next line here.

So the second argument we'll pass is the string textContent,

and the third is text, so the property and the value.

And now, we can delete this line of code below.

So let's give this a save, and go to the browser and

quickly test to make sure everything's working okay.

I'll refresh the page and type a name like Ken.

And when I hit Enter, the name appears, so

we know that text is getting appended to the list item as it should.

So, great, it's working.

Now, we can go back and replace the other lines with our new function.

Next, for the label, I'll change it to

just createElement and pass in label,

textContent, and confirmed as arguments.

And now we can delete the textContent line below it.

And we'll do the same for checkbox passing in input, type and checkbox as arguments.

Then deleting the line for checkbox.type.

And now, for editButton, we'll change it to createElement

passing in button then textContent and edit.

Then we can remove editButton.textContent.

And finally for the removeButton we'll say

createElement, button, textContent and

remove Then delete the line below it.

So let's take a look at this now.

We've removed some of the lines from this code so far, but

there is still some repetition with these calls to appendChild.

So I'll add some space between the lines of code so you can see them grouped.

Notice how these pairs of lines follow a similar pattern.

An element is created, then it's appended to the list item.

So let's write another function to perform this pattern.

And we can call the new function appendToLI,

which we'll declare right underneath the createElement function.

So now I'll just copy one of these patterns in as the body of the function

just to start.

So here in the function, instead of span, we'll call this constant element,

and we can replace span in the second line too with element.

So now we'll

need to pass in the values we want to call createElement with.

Let's add them in as parameters, and because they are the same parameters we

call createElement with, I'll simply copy and paste them in.

Then we wanna pass those same parameters into createElement.

So let's paste them in here as well.

And now we can go through and replace the call to createElement with appendToLI

So first we'll replace const span = createElement with

just appendToLI, and since appendToLI is now taking care

of these calls to appendChild, we can also delete them.

Let's skip the label and checkbox for now.

And we'll do the same for both the edit and remove buttons.

So we'll replace const editButton with appendToLI.

Delete appendChild below it.

And for the removeButton, we'll replace the const removeButton,

we'll simply say appendToLI, and get rid of appendChild(removeButton) below it.

So now, what about our label here?

Well, if I just replace it the way I did the others,

with appendToLI, I can't append the checkbox to it.

Well that's because the label is being created outside the scope beyond

the checkbox's reach.

So if appendToLI returned the label once it was finished,

you could call appendChild on it and pass in the checkbox.

So let's add that return statement to appendToLI to return the element.

And now we can store the returned label element in a constant I'll name label.

Then we can delete this appendChild method for label below.

Now, we could leave this creation of the label and checkbox how it is.

And it would be better than it was.

But I prefer to make it a little more concise.

See how we're setting up two constants and then using them on the third line.

So what we can do is, we can cut the first two lines and

paste them in place of the constants that represent them.

And I can even move this appendChild to a new line and

indent it to show it's a continuation of the line above.

Finally, I'll collapse these blank lines down again, and I find this more readable

because each function name suggests what the code is doing.

We append a label to the list item element

then we append a child to the label which is an input we're creating.

Let's save our changes and switch over to the browser and refresh.

And check to make sure this works.

So in the text field I'll type a name like Tommy and hit Enter.

And I see the checkbox so I know it all works.

So let's test it out.

You click confirm, let's click edit, save, and remove and perfect.

Everything is still working as it should be.

Now, another benefit of putting that logic

into the appendToLI function is that we could add other elements and

change the order, or edit their contents, much more easily and intuitively.

We just need to change how, or in what order, we call appendToLI.

Well that's one refractor done so next, let's take a look at the click handler

we built and I think I see some room for improvement here.