1
00:00:00,000 --> 00:00:01,484
How it'd go?

2
00:00:01,484 --> 00:00:05,010
Now, I'll show you one way
you might refactor this code.

3
00:00:05,010 --> 00:00:08,920
If you use the loop, you most likely
remove the most of this code.

4
00:00:08,920 --> 00:00:14,820
For instance, you can see that this
code here is the same as this code and

5
00:00:14,820 --> 00:00:17,900
this code,
it's the same code repeated ten times.

6
00:00:17,900 --> 00:00:21,980
Before I go into how to optimize the code,
I'll start with the code at the top.

7
00:00:21,980 --> 00:00:25,580
I declare five variables at
the beginning of the script.

8
00:00:25,580 --> 00:00:30,330
The html variable is set to an empty
string, and the other four variables

9
00:00:30,330 --> 00:00:33,620
are not assigned a value, their values are
going to be assigned later in the script.

10
00:00:34,830 --> 00:00:38,899
I'll start by removing nine
of these sets of code.

11
00:00:44,563 --> 00:00:46,480
That's already looking much better.

12
00:00:47,710 --> 00:00:51,290
Now, the program only adds
a single div to the page.

13
00:00:51,290 --> 00:00:54,542
I'll use a for loop to repeat
this set of code multiple times.

14
00:00:59,036 --> 00:01:04,485
I'll name the counter variable i,
and set its initial value to 1.

15
00:01:05,930 --> 00:01:10,810
Next, comes the condition,
as long as the value of i is less than or

16
00:01:10,810 --> 00:01:13,020
equal to 10, the loop will run.

17
00:01:14,050 --> 00:01:16,850
Finally, the current value of i should

18
00:01:16,850 --> 00:01:19,400
increase by 1 at the end
of each loop iteration.

19
00:01:21,110 --> 00:01:26,143
Now, I'll move this code inside the loop.

20
00:01:30,979 --> 00:01:35,664
And great,
I went from 67 lines of code to just 15.

21
00:01:35,664 --> 00:01:41,007
And to display a number inside each
div starting from 1, I'll insert or

22
00:01:41,007 --> 00:01:46,010
interpolate the value of i into
the string containing the div text.

23
00:01:47,380 --> 00:01:50,910
I'll save my file and
refresh the browser, and

24
00:01:50,910 --> 00:01:52,310
ten color full dots appear on the page.

25
00:01:53,610 --> 00:01:58,840
Looking at the elements panel in
Chrome dev tools, I see the ten divs.

26
00:01:58,840 --> 00:02:01,350
Each one has a style attribute

27
00:02:01,350 --> 00:02:05,250
with a background color property
set to a random RGB value, good.

28
00:02:10,910 --> 00:02:16,418
What's great about using a loop,
is that I can go back to the code and

29
00:02:16,418 --> 00:02:21,363
change the condition to say i
is less than or equal to 100.

30
00:02:21,363 --> 00:02:23,460
Now, the code runs 100 times.

31
00:02:28,316 --> 00:02:32,707
If you got this far, nice work, you've
started to implement the DRY principle and

32
00:02:32,707 --> 00:02:36,890
started refactoring JavaScript to
make your code more efficient.

33
00:02:36,890 --> 00:02:39,240
But is there more that you could do here?

34
00:02:39,240 --> 00:02:43,590
Notice that the random number
generating code repeats three times.

35
00:02:43,590 --> 00:02:47,590
When you see code repeating like this, a
warning alarm should go off in your head.

36
00:02:47,590 --> 00:02:51,550
So I have another challenge for you,
review this code and see if there's a way

37
00:02:51,550 --> 00:02:55,230
you can add a function to get
rid of this duplicate code.

38
00:02:55,230 --> 00:02:58,540
And while you're at it, see if there
are other ways you might improve the code.

39
00:02:58,540 --> 00:03:01,468
I'll see you in the next video
with some of my suggestions.