Refactor 1: Create List Items

A good place to start when refactoring a program, is to look for the same code, 0:00 or very similar code that appears again and again. 0:04 The programmer's slogan, don't repeat yourself, 0:07 is the foundation of dry programming. 0:09 Duplication, not only makes your programs longer, but 0:11 also makes them more difficult to update. 0:14 Since a change you make in one part of the program, 0:16 will probably need to be made wherever the same code appears. 0:18 So let's see if we can simplify our program by identifying and 0:21 removing duplicate code, for example, 0:25 take a look at the createLI function, can you spot repeated code here? 0:28 Notice how after the first list item is created in the first line, 0:34 createElement is called five times. 0:38 And after we create each element we set a property to a value. 0:42 I'll just break these lines out, so you can see this more clearly. 0:48 So, for example, in the function this span elements textContent is set, 0:53 then here this checkbox type is set and so on. 1:00 So we could create a function to accept arguments for the parts of 1:06 these lines that are different, and repeat the actions that are the same. 1:10 In other words, our new function could accept an element name, 1:14 a property name and a property value as arguments. 1:17 Then it could create that element, set the supplied property to the supplied value, 1:20 and then return the element. 1:24 I'll show you what I mean. 1:25 Let's name this new function, createElement. 1:27 And the function will live inside our createLI function for its private use. 1:30 Next, let's copy and paste one of these two line sequences into the function. 1:41 So I'll copy the const span and span.text content lines. 1:47 And now, we can go through this code and 1:56 replace the parts that will change from element to element. 1:58 We'll start with the element name that we're passing 2:03 into the createElement method. 2:06 So let's create a parameter named elementName that we can pass instead. 2:07 Now, when we call createElement, we pass in the name of an element as a string. 2:13 And this line will create that element. 2:18 And we'll store that element in a constant named element. 2:22 And we'll also change the other instance of span to our new name of element. 2:29 And we also need to pass the property name into the function. 2:38 Since it will differ from element to element. 2:42 We'll make that the second parameter to the function, and name it property. 2:45 And to access the property on element, we'll need to use brackets syntax. 2:50 So let's replace .textContent with a set of square brackets and 2:55 property within that. 3:00 What this does is it lets us dynamically access the property. 3:02 So in other words we can use the string contained in the property variable to 3:06 access the property of element. 3:10 Now, the last value we'll need to supply to this function 3:14 is the value that we're assigning to the elements property. 3:17 So let's create a third parameter to hold that, and we'll name it value. 3:20 We can then assign the property to a value. 3:25 Then we'll return this element now that it's created and configured. 3:31 So that's all our function needs. 3:38 Now, let's replace each two line bit of code with a call to our new function, 3:39 and then we'll add in the specific details as arguments and 3:44 let the function take care of the rest. 3:48 Since we named our function createElement, we can just delete document 3:50 from this line, and we can also leave in the string span as the first argument. 3:56 After we create the spam tag, will want to set its text content 4:01 to the text provided as the argument to createLI. 4:06 Just like we're doing in this next line here. 4:10 So the second argument we'll pass is the string textContent, 4:14 and the third is text, so the property and the value. 4:20 And now, we can delete this line of code below. 4:28 So let's give this a save, and go to the browser and 4:32 quickly test to make sure everything's working okay. 4:34 I'll refresh the page and type a name like Ken. 4:37 And when I hit Enter, the name appears, so 4:42 we know that text is getting appended to the list item as it should. 4:44 So, great, it's working. 4:48 Now, we can go back and replace the other lines with our new function. 4:49 Next, for the label, I'll change it to 4:53 just createElement and pass in label, 4:58 textContent, and confirmed as arguments. 5:03 And now we can delete the textContent line below it. 5:10 And we'll do the same for checkbox passing in input, type and checkbox as arguments. 5:16 Then deleting the line for checkbox.type. 5:29 And now, for editButton, we'll change it to createElement 5:34 passing in button then textContent and edit. 5:40 Then we can remove editButton.textContent. 5:49 And finally for the removeButton we'll say 5:53 createElement, button, textContent and 5:58 remove Then delete the line below it. 6:02 So let's take a look at this now. 6:09 We've removed some of the lines from this code so far, but 6:11 there is still some repetition with these calls to appendChild. 6:14 So I'll add some space between the lines of code so you can see them grouped. 6:20 Notice how these pairs of lines follow a similar pattern. 6:27 An element is created, then it's appended to the list item. 6:32 So let's write another function to perform this pattern. 6:38 And we can call the new function appendToLI, 6:41 which we'll declare right underneath the createElement function. 6:45 So now I'll just copy one of these patterns in as the body of the function 6:53 just to start. 6:58 So here in the function, instead of span, we'll call this constant element, 7:02 and we can replace span in the second line too with element. 7:09 So now we'll 7:14 need to pass in the values we want to call createElement with. 7:18 Let's add them in as parameters, and because they are the same parameters we 7:23 call createElement with, I'll simply copy and paste them in. 7:27 Then we wanna pass those same parameters into createElement. 7:34 So let's paste them in here as well. 7:39 And now we can go through and replace the call to createElement with appendToLI 7:48 So first we'll replace const span = createElement with 7:56 just appendToLI, and since appendToLI is now taking care 8:01 of these calls to appendChild, we can also delete them. 8:06 Let's skip the label and checkbox for now. 8:14 And we'll do the same for both the edit and remove buttons. 8:17 So we'll replace const editButton with appendToLI. 8:20 Delete appendChild below it. 8:26 And for the removeButton, we'll replace the const removeButton, 8:28 we'll simply say appendToLI, and get rid of appendChild(removeButton) below it. 8:32 So now, what about our label here? 8:38 Well, if I just replace it the way I did the others, 8:41 with appendToLI, I can't append the checkbox to it. 8:45 Well that's because the label is being created outside the scope beyond 8:50 the checkbox's reach. 8:53 So if appendToLI returned the label once it was finished, 8:55 you could call appendChild on it and pass in the checkbox. 9:00 So let's add that return statement to appendToLI to return the element. 9:04 And now we can store the returned label element in a constant I'll name label. 9:13 Then we can delete this appendChild method for label below. 9:22 Now, we could leave this creation of the label and checkbox how it is. 9:28 And it would be better than it was. 9:31 But I prefer to make it a little more concise. 9:33 See how we're setting up two constants and then using them on the third line. 9:36 So what we can do is, we can cut the first two lines and 9:44 paste them in place of the constants that represent them. 9:49 And I can even move this appendChild to a new line and 10:04 indent it to show it's a continuation of the line above. 10:07 Finally, I'll collapse these blank lines down again, and I find this more readable 10:12 because each function name suggests what the code is doing. 10:16 We append a label to the list item element 10:20 then we append a child to the label which is an input we're creating. 10:23 Let's save our changes and switch over to the browser and refresh. 10:27 And check to make sure this works. 10:32 So in the text field I'll type a name like Tommy and hit Enter. 10:33 And I see the checkbox so I know it all works. 10:39 So let's test it out. 10:42 You click confirm, let's click edit, save, and remove and perfect. 10:44 Everything is still working as it should be. 10:49 Now, another benefit of putting that logic 10:52 into the appendToLI function is that we could add other elements and 10:55 change the order, or edit their contents, much more easily and intuitively. 11:00 We just need to change how, or in what order, we call appendToLI. 11:04 Well that's one refractor done so next, let's take a look at the click handler 11:09 we built and I think I see some room for improvement here. 11:13