1
00:00:00,270 --> 00:00:04,050
A good place to start when refactoring
a program, is to look for the same code,

2
00:00:04,050 --> 00:00:07,140
or very similar code that
appears again and again.

3
00:00:07,140 --> 00:00:09,620
The programmer's slogan,
don't repeat yourself,

4
00:00:09,620 --> 00:00:11,700
is the foundation of dry programming.

5
00:00:11,700 --> 00:00:14,220
Duplication, not only makes
your programs longer, but

6
00:00:14,220 --> 00:00:16,450
also makes them more difficult to update.

7
00:00:16,450 --> 00:00:18,730
Since a change you make in
one part of the program,

8
00:00:18,730 --> 00:00:21,571
will probably need to be made
wherever the same code appears.

9
00:00:21,571 --> 00:00:25,946
So let's see if we can simplify
our program by identifying and

10
00:00:25,946 --> 00:00:28,892
removing duplicate code, for example,

11
00:00:28,892 --> 00:00:34,890
take a look at the createLI function,
can you spot repeated code here?

12
00:00:34,890 --> 00:00:38,936
Notice how after the first list
item is created in the first line,

13
00:00:38,936 --> 00:00:42,920
createElement is called five times.

14
00:00:42,920 --> 00:00:47,270
And after we create each element
we set a property to a value.

15
00:00:48,990 --> 00:00:51,720
I'll just break these lines out,
so you can see this more clearly.

16
00:00:53,720 --> 00:01:00,252
So, for example, in the function this
span elements textContent is set,

17
00:01:00,252 --> 00:01:04,200
then here this checkbox type is set and
so on.

18
00:01:06,360 --> 00:01:10,470
So we could create a function to
accept arguments for the parts of

19
00:01:10,470 --> 00:01:14,290
these lines that are different, and
repeat the actions that are the same.

20
00:01:14,290 --> 00:01:17,370
In other words, our new function
could accept an element name,

21
00:01:17,370 --> 00:01:20,240
a property name and
a property value as arguments.

22
00:01:20,240 --> 00:01:24,640
Then it could create that element, set the
supplied property to the supplied value,

23
00:01:24,640 --> 00:01:25,930
and then return the element.

24
00:01:25,930 --> 00:01:27,660
I'll show you what I mean.

25
00:01:27,660 --> 00:01:30,112
Let's name this new function,
createElement.

26
00:01:30,112 --> 00:01:35,200
And the function will live inside our
createLI function for its private use.

27
00:01:41,971 --> 00:01:47,040
Next, let's copy and paste one of these
two line sequences into the function.

28
00:01:47,040 --> 00:01:51,350
So I'll copy the const span and
span.text content lines.

29
00:01:56,859 --> 00:01:58,986
And now, we can go through this code and

30
00:01:58,986 --> 00:02:02,290
replace the parts that will
change from element to element.

31
00:02:03,770 --> 00:02:06,270
We'll start with the element
name that we're passing

32
00:02:06,270 --> 00:02:07,800
into the createElement method.

33
00:02:07,800 --> 00:02:13,430
So let's create a parameter named
elementName that we can pass instead.

34
00:02:13,430 --> 00:02:18,225
Now, when we call createElement, we pass
in the name of an element as a string.

35
00:02:18,225 --> 00:02:20,170
And this line will create that element.

36
00:02:22,873 --> 00:02:29,379
And we'll store that element
in a constant named element.

37
00:02:29,379 --> 00:02:34,120
And we'll also change the other instance
of span to our new name of element.

38
00:02:38,725 --> 00:02:42,680
And we also need to pass
the property name into the function.

39
00:02:42,680 --> 00:02:45,255
Since it will differ
from element to element.

40
00:02:45,255 --> 00:02:48,790
We'll make that the second parameter
to the function, and name it property.

41
00:02:50,630 --> 00:02:55,110
And to access the property on element,
we'll need to use brackets syntax.

42
00:02:55,110 --> 00:03:00,880
So let's replace .textContent
with a set of square brackets and

43
00:03:00,880 --> 00:03:02,640
property within that.

44
00:03:02,640 --> 00:03:06,695
What this does is it lets us
dynamically access the property.

45
00:03:06,695 --> 00:03:10,916
So in other words we can use the string
contained in the property variable to

46
00:03:10,916 --> 00:03:12,800
access the property of element.

47
00:03:14,210 --> 00:03:17,570
Now, the last value we'll need
to supply to this function

48
00:03:17,570 --> 00:03:20,710
is the value that we're assigning
to the elements property.

49
00:03:20,710 --> 00:03:25,154
So let's create a third parameter to
hold that, and we'll name it value.

50
00:03:25,154 --> 00:03:31,079
We can then assign
the property to a value.

51
00:03:31,079 --> 00:03:34,740
Then we'll return this element now
that it's created and configured.

52
00:03:38,320 --> 00:03:39,960
So that's all our function needs.

53
00:03:39,960 --> 00:03:44,640
Now, let's replace each two line bit of
code with a call to our new function,

54
00:03:44,640 --> 00:03:48,110
and then we'll add in the specific
details as arguments and

55
00:03:48,110 --> 00:03:49,540
let the function take care of the rest.

56
00:03:50,590 --> 00:03:56,780
Since we named our function createElement,
we can just delete document

57
00:03:56,780 --> 00:04:01,850
from this line, and we can also leave in
the string span as the first argument.

58
00:04:01,850 --> 00:04:06,580
After we create the spam tag,
will want to set its text content

59
00:04:06,580 --> 00:04:10,280
to the text provided as
the argument to createLI.

60
00:04:10,280 --> 00:04:14,375
Just like we're doing
in this next line here.

61
00:04:14,375 --> 00:04:20,895
So the second argument we'll
pass is the string textContent,

62
00:04:20,895 --> 00:04:26,440
and the third is text, so
the property and the value.

63
00:04:28,751 --> 00:04:31,030
And now,
we can delete this line of code below.

64
00:04:32,130 --> 00:04:34,880
So let's give this a save,
and go to the browser and

65
00:04:34,880 --> 00:04:37,870
quickly test to make sure
everything's working okay.

66
00:04:37,870 --> 00:04:42,600
I'll refresh the page and
type a name like Ken.

67
00:04:42,600 --> 00:04:44,230
And when I hit Enter, the name appears, so

68
00:04:44,230 --> 00:04:48,520
we know that text is getting appended
to the list item as it should.

69
00:04:48,520 --> 00:04:49,290
So, great, it's working.

70
00:04:49,290 --> 00:04:52,040
Now, we can go back and replace
the other lines with our new function.

71
00:04:53,650 --> 00:04:58,818
Next, for the label, I'll change it to

72
00:04:58,818 --> 00:05:03,835
just createElement and pass in label,

73
00:05:03,835 --> 00:05:10,440
textContent, and confirmed as arguments.

74
00:05:10,440 --> 00:05:12,511
And now we can delete
the textContent line below it.

75
00:05:16,046 --> 00:05:22,938
And we'll do the same for checkbox passing
in input, type and checkbox as arguments.

76
00:05:29,654 --> 00:05:34,478
Then deleting the line for checkbox.type.

77
00:05:34,478 --> 00:05:40,603
And now, for editButton,
we'll change it to createElement

78
00:05:40,603 --> 00:05:45,213
passing in button then textContent and
edit.

79
00:05:49,026 --> 00:05:53,300
Then we can remove editButton.textContent.

80
00:05:53,300 --> 00:05:58,136
And finally for the removeButton we'll say

81
00:05:58,136 --> 00:06:02,972
createElement, button, textContent and

82
00:06:02,972 --> 00:06:08,540
remove Then delete the line below it.

83
00:06:09,630 --> 00:06:11,900
So let's take a look at this now.

84
00:06:11,900 --> 00:06:14,770
We've removed some of the lines
from this code so far, but

85
00:06:14,770 --> 00:06:20,330
there is still some repetition
with these calls to appendChild.

86
00:06:20,330 --> 00:06:23,400
So I'll add some space between the lines
of code so you can see them grouped.

87
00:06:27,714 --> 00:06:32,630
Notice how these pairs of lines
follow a similar pattern.

88
00:06:32,630 --> 00:06:36,580
An element is created,
then it's appended to the list item.

89
00:06:38,410 --> 00:06:41,970
So let's write another function
to perform this pattern.

90
00:06:41,970 --> 00:06:45,640
And we can call the new
function appendToLI,

91
00:06:45,640 --> 00:06:48,830
which we'll declare right underneath
the createElement function.

92
00:06:53,699 --> 00:06:58,183
So now I'll just copy one of these
patterns in as the body of the function

93
00:06:58,183 --> 00:06:59,170
just to start.

94
00:07:02,830 --> 00:07:09,241
So here in the function, instead of span,
we'll call this constant element,

95
00:07:09,241 --> 00:07:14,048
and we can replace span in
the second line too with element.

96
00:07:14,048 --> 00:07:18,910
So now we'll

97
00:07:18,910 --> 00:07:23,130
need to pass in the values we
want to call createElement with.

98
00:07:23,130 --> 00:07:27,610
Let's add them in as parameters, and
because they are the same parameters we

99
00:07:27,610 --> 00:07:31,810
call createElement with,
I'll simply copy and paste them in.

100
00:07:34,729 --> 00:07:39,690
Then we wanna pass those same
parameters into createElement.

101
00:07:39,690 --> 00:07:42,080
So let's paste them in here as well.

102
00:07:48,632 --> 00:07:54,111
And now we can go through and replace
the call to createElement with appendToLI

103
00:07:56,677 --> 00:08:01,698
So first we'll replace const
span = createElement with

104
00:08:01,698 --> 00:08:06,825
just appendToLI, and
since appendToLI is now taking care

105
00:08:06,825 --> 00:08:11,860
of these calls to appendChild,
we can also delete them.

106
00:08:14,794 --> 00:08:17,800
Let's skip the label and checkbox for now.

107
00:08:17,800 --> 00:08:20,770
And we'll do the same for
both the edit and remove buttons.

108
00:08:20,770 --> 00:08:24,680
So we'll replace const
editButton with appendToLI.

109
00:08:26,210 --> 00:08:28,090
Delete appendChild below it.

110
00:08:28,090 --> 00:08:32,040
And for the removeButton,
we'll replace the const removeButton,

111
00:08:32,040 --> 00:08:37,382
we'll simply say appendToLI, and get rid
of appendChild(removeButton) below it.

112
00:08:38,398 --> 00:08:41,790
So now, what about our label here?

113
00:08:41,790 --> 00:08:45,756
Well, if I just replace it
the way I did the others,

114
00:08:45,756 --> 00:08:50,009
with appendToLI,
I can't append the checkbox to it.

115
00:08:50,009 --> 00:08:53,917
Well that's because the label is being
created outside the scope beyond

116
00:08:53,917 --> 00:08:55,730
the checkbox's reach.

117
00:08:55,730 --> 00:09:00,570
So if appendToLI returned
the label once it was finished,

118
00:09:00,570 --> 00:09:04,010
you could call appendChild on it and
pass in the checkbox.

119
00:09:04,010 --> 00:09:09,020
So let's add that return statement
to appendToLI to return the element.

120
00:09:13,462 --> 00:09:19,760
And now we can store the returned label
element in a constant I'll name label.

121
00:09:22,102 --> 00:09:25,780
Then we can delete this appendChild
method for label below.

122
00:09:28,418 --> 00:09:31,800
Now, we could leave this creation of
the label and checkbox how it is.

123
00:09:31,800 --> 00:09:33,720
And it would be better than it was.

124
00:09:33,720 --> 00:09:36,810
But I prefer to make it
a little more concise.

125
00:09:36,810 --> 00:09:41,630
See how we're setting up two constants and
then using them on the third line.

126
00:09:44,160 --> 00:09:49,150
So what we can do is,
we can cut the first two lines and

127
00:09:49,150 --> 00:09:52,020
paste them in place of
the constants that represent them.

128
00:10:04,601 --> 00:10:07,758
And I can even move this
appendChild to a new line and

129
00:10:07,758 --> 00:10:12,220
indent it to show it's
a continuation of the line above.

130
00:10:12,220 --> 00:10:16,600
Finally, I'll collapse these blank lines
down again, and I find this more readable

131
00:10:16,600 --> 00:10:20,510
because each function name
suggests what the code is doing.

132
00:10:20,510 --> 00:10:23,040
We append a label to the list item element

133
00:10:23,040 --> 00:10:26,560
then we append a child to the label
which is an input we're creating.

134
00:10:27,650 --> 00:10:32,207
Let's save our changes and
switch over to the browser and refresh.

135
00:10:32,207 --> 00:10:33,980
And check to make sure this works.

136
00:10:33,980 --> 00:10:39,260
So in the text field I'll type
a name like Tommy and hit Enter.

137
00:10:39,260 --> 00:10:42,900
And I see the checkbox so
I know it all works.

138
00:10:42,900 --> 00:10:44,070
So let's test it out.

139
00:10:44,070 --> 00:10:49,900
You click confirm, let's click edit,
save, and remove and perfect.

140
00:10:49,900 --> 00:10:52,230
Everything is still
working as it should be.

141
00:10:52,230 --> 00:10:55,700
Now, another benefit of putting that logic

142
00:10:55,700 --> 00:11:00,400
into the appendToLI function is that
we could add other elements and

143
00:11:00,400 --> 00:11:04,740
change the order, or edit their contents,
much more easily and intuitively.

144
00:11:04,740 --> 00:11:09,200
We just need to change how, or
in what order, we call appendToLI.

145
00:11:09,200 --> 00:11:13,360
Well that's one refractor done so next,
let's take a look at the click handler

146
00:11:13,360 --> 00:11:16,790
we built and I think I see some room for
improvement here.