Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,510 --> 00:00:00,890
All right.
2
00:00:00,890 --> 00:00:02,690
So how did that go?
3
00:00:02,880 --> 00:00:09,090
Now I want you to really give this a good go before you come and check the solutions because this really
4
00:00:09,090 --> 00:00:15,480
is how you're going to prove to yourself that you've actually internalized and learned all of this information
5
00:00:15,480 --> 00:00:16,650
that we've been teaching you.
6
00:00:16,890 --> 00:00:22,260
But once you have done and if you want to check the solution or you just want to fix a particular bug
7
00:00:22,410 --> 00:00:26,480
or see how I did it then go ahead and continue watching.
8
00:00:26,490 --> 00:00:32,820
So we first start off, this is the web site that we've got, and notice that it's already been styled and
9
00:00:32,880 --> 00:00:37,290
it's already set up so that we can start writing Javascript.
10
00:00:37,290 --> 00:00:44,010
Now there's just one problem. We currently don't have a Javascript file, so we're going to go into a project
11
00:00:44,130 --> 00:00:48,180
and we're going to create a new file that's called index.js.
12
00:00:48,360 --> 00:00:55,530
So now that we have our Javascript file, it's still not linked to our index.html. Just as we linked
13
00:00:55,530 --> 00:00:58,200
up our style sheet in the CSS sections,
14
00:00:58,320 --> 00:01:05,460
we have to link up our index.js. And the best place to do that is just before the end of the body.
15
00:01:05,670 --> 00:01:11,820
So we're going to create a script tag that has an external source, and the source is going to be index.js.
16
00:01:12,010 --> 00:01:19,290
So now we can test this by simply writing an alert that says "Working!".
17
00:01:19,680 --> 00:01:25,770
And now, if we reload our web site and we get our alert, then we know that our Javascript has been linked
18
00:01:25,770 --> 00:01:27,690
up without any issues.
19
00:01:27,700 --> 00:01:27,920
All right.
20
00:01:27,930 --> 00:01:29,090
So that's step one.
21
00:01:29,100 --> 00:01:35,730
Now the next thing we want to do is to place some images into our image elements by default,
22
00:01:35,730 --> 00:01:43,450
so when our web site starts up it should have two images of the die six face already showing.
23
00:01:43,470 --> 00:01:49,890
So we know that our images are located in a folder called images, and they're numbered dice1 through to
24
00:01:49,890 --> 00:01:51,010
dice6.
25
00:01:51,150 --> 00:02:00,600
So we can simply change the src here to images/dice6.png, and we can do the same thing
26
00:02:00,630 --> 00:02:01,530
over here.
27
00:02:04,160 --> 00:02:09,070
And now if we hit save and refresh we've got some dice on the page.
28
00:02:09,200 --> 00:02:11,280
Looking pretty good. All right.
29
00:02:11,300 --> 00:02:12,610
So that's step two.
30
00:02:12,770 --> 00:02:20,090
Now step three involves going into our index.js and generating some random numbers that we're going
31
00:02:20,090 --> 00:02:24,410
to be using to select a random dice face.
32
00:02:24,410 --> 00:02:30,040
So we first have to create a variable called randomNumber1,
33
00:02:30,140 --> 00:02:37,760
and remember that to create a random number, we simply use the method Math.random, and this will generate
34
00:02:37,760 --> 00:02:42,780
a number between 0 and 0.9999999 recurring.
35
00:02:42,860 --> 00:02:48,670
So in our case we need a random number between 1 and 6.
36
00:02:48,800 --> 00:02:53,380
So we need to multiply this random number that we get by 6.
37
00:02:53,510 --> 00:03:01,790
So if the random number was between 0 and 0.9, then we now have a number between 0 and 5. And
38
00:03:01,790 --> 00:03:05,060
we can't have that random number be a decimal number,
39
00:03:05,060 --> 00:03:12,000
so we need it to be a whole number. And we can do that by rounding it down using Math.floor.
40
00:03:12,080 --> 00:03:17,660
So remember that if at any point you're not quite sure what your code is doing, you can always just
41
00:03:17,720 --> 00:03:23,250
copy it and paste it into your console and just run it to see what the values are.
42
00:03:23,330 --> 00:03:26,950
So we're currently getting random numbers between 0 and 5.
43
00:03:27,050 --> 00:03:36,170
So to change that range from 0 to 5 to 1 to 6 all we need today is just to add one.
44
00:03:36,200 --> 00:03:44,610
So let's recap on this method. We're generating a random number between 0 and 0.99999.
45
00:03:44,930 --> 00:03:46,600
Then we're multiplying that number,
46
00:03:46,600 --> 00:03:55,250
whatever it may be, by 6, in order to change it to between 0 and 5.99999.
47
00:03:56,390 --> 00:04:00,420
Then we're rounding that number down to the nearest whole number,
48
00:04:00,470 --> 00:04:04,030
so it becomes between zero and five.
49
00:04:04,190 --> 00:04:11,390
And finally we're changing that range from between 0 and 5 to between 1 and 6 by simply adding 1 to
50
00:04:11,390 --> 00:04:12,040
the number.
51
00:04:12,110 --> 00:04:18,860
And you can verify each step of this code by simply testing it out inside the console.
52
00:04:18,860 --> 00:04:25,430
Now if any of this seem confusing then make sure that you go back to our lesson on randomization where
53
00:04:25,430 --> 00:04:28,010
we talked about this in more detail.
54
00:04:28,010 --> 00:04:34,940
All right. So now we have a randomNumber1 which is going to give us a random number between 1 and
55
00:04:34,960 --> 00:04:43,160
6 and then we're going to use this random number to select a random dice image.
56
00:04:43,160 --> 00:04:50,120
So you might notice that our dice images are very handily named from dice1 through to dice6.
57
00:04:50,240 --> 00:04:57,800
So we can simply use concatenation to add this number to the end of the string 'dice', and get our random
58
00:04:57,800 --> 00:04:58,910
dice image.
59
00:04:58,940 --> 00:05:06,780
So let's create a variable called randomDiceImage, and we can create this using concatenation.
60
00:05:06,890 --> 00:05:13,600
So we can say "dice" + randomNumber1 + ".png".
61
00:05:13,640 --> 00:05:20,400
So this will be a string that is from dice1.png through to dice6.png.
62
00:05:20,690 --> 00:05:29,080
So we can now use that string to change the source of our image to that random image name.
63
00:05:29,090 --> 00:05:34,760
So the next part is changing that attribute value for the source.
64
00:05:34,760 --> 00:05:37,210
So at the moment it's just a static image,
65
00:05:37,250 --> 00:05:43,700
it's always going to show dice6. But we're going to change this string based on the random number that
66
00:05:43,700 --> 00:05:44,680
we got back.
67
00:05:44,960 --> 00:05:50,740
So, in order to change it, we have to tap into the src attribute of our image element.
68
00:05:50,900 --> 00:05:58,580
So notice that the source is actually not just the name of the image but it also has the folder that
69
00:05:58,580 --> 00:06:00,670
the images are contained in,
70
00:06:00,890 --> 00:06:06,500
and that's because all of our dice images are nested inside this folder called images, which is how we
71
00:06:06,500 --> 00:06:09,560
would normally organize our assets.
72
00:06:09,590 --> 00:06:18,860
So in order to include that name we also have to add it by concatenation. So we can say var
73
00:06:18,890 --> 00:06:24,860
randomImageSource = "images", which is the name of the folder,
74
00:06:24,860 --> 00:06:32,160
notice that it's a plural, with an s, and then / +
75
00:06:32,450 --> 00:06:34,190
randomDiceImage.
76
00:06:34,580 --> 00:06:37,870
Now this step is optional, because you can also add it in here,
77
00:06:37,910 --> 00:06:40,310
but I think it's just easier for you to see what's going on,
78
00:06:40,310 --> 00:06:42,460
so I'm leaving it as a separate line here.
79
00:06:42,470 --> 00:06:49,390
So now what we'll get back inside this variable will be something like images/dice1.png
80
00:06:49,460 --> 00:06:55,800
through to images/dice6.png.
81
00:06:55,940 --> 00:07:01,190
So now we're ready to change the src attribute of our image element.
82
00:07:01,190 --> 00:07:05,100
So do you remember how you can change the attributes of the elements?
83
00:07:05,360 --> 00:07:09,250
Well before we do anything we have to first select the element.
84
00:07:09,380 --> 00:07:17,780
So we'll say document.querySelectorAll, because we actually have two images that we need to change
85
00:07:17,840 --> 00:07:20,430
rather than just selecting the first one.
86
00:07:20,480 --> 00:07:25,600
So we're going to use querySelectorAll, and we're going to select based on our img tag.
87
00:07:25,730 --> 00:07:32,480
So we're going to get two of these back and to tap into the first one we just have to specify the index
88
00:07:32,570 --> 00:07:34,610
0 inside a square bracket.
89
00:07:34,670 --> 00:07:41,840
So now we can either assign this to a variable, say var image1 equals this document.querySelector
90
00:07:41,840 --> 00:07:47,200
image at index 0, or you can simply just continue along that same line.
91
00:07:47,360 --> 00:07:48,800
But let's make it easier to see
92
00:07:48,800 --> 00:07:50,260
by separating it all out.
93
00:07:50,360 --> 00:07:59,120
So now we've got image1, and we can now set its attribute by using the method setAttribute.
94
00:07:59,270 --> 00:08:06,200
Now, in this case, the first input in here has to be the attribute's name that you want to change.
95
00:08:06,500 --> 00:08:11,010
And in our case the one that we want to change is the attribute called src.
96
00:08:11,270 --> 00:08:13,290
So let's put that in there.
97
00:08:13,490 --> 00:08:18,310
And the second parameter, or the second input, is what we want to change it to.
98
00:08:18,560 --> 00:08:22,400
So we want to change it to our randomImageSource.
99
00:08:22,550 --> 00:08:28,570
So we'll just put that variable in there, randomImageSource.
100
00:08:28,610 --> 00:08:35,540
So now if we hit save and we go back to our web site and we refresh it, then you can see that every time
101
00:08:35,540 --> 00:08:45,290
that we refresh the web site we get a new random dice showing up on the left, and it's going between dice1.png
102
00:08:45,290 --> 00:08:48,820
through to dice6.png.
103
00:08:48,830 --> 00:08:54,920
All right. So now we have to do exactly the same thing for the second image element.
104
00:08:54,920 --> 00:08:59,850
Now very often you will be tempted to copy and paste code.
105
00:09:00,120 --> 00:09:06,620
And I just want you to hear my voice in your head whenever you do that to remember that it's probably
106
00:09:06,620 --> 00:09:14,180
better to just write out the code for extra coding practice, because when you copy and paste code, especially
107
00:09:14,180 --> 00:09:19,230
in a case like this, I will bet that you will probably get at least one or two bugs.
108
00:09:19,250 --> 00:09:21,860
So let's just write out our code instead.
109
00:09:21,860 --> 00:09:26,060
Now the first thing we need to create is a randomNumber2.
110
00:09:26,540 --> 00:09:28,710
And this is going to equal exactly the same thing
111
00:09:28,720 --> 00:09:29,650
Math.floor
112
00:09:32,780 --> 00:09:40,990
Math.random, multiply that by 6, and then add 1 to the value.
113
00:09:41,250 --> 00:09:46,700
So now we can use randomNumber2 to create the second random dice image.
114
00:09:46,710 --> 00:09:50,850
So in this case I'm going to make it a little bit simpler and we can cut down on these two lines of
115
00:09:50,850 --> 00:10:07,890
code. So we can simply say var randomImageSource2 = "images/dice" + randomNumber2
116
00:10:07,890 --> 00:10:10,190
+ ".png".
117
00:10:10,200 --> 00:10:16,980
So now we have our randomImageSource2. Then we can go ahead and perform the next two steps, which
118
00:10:16,980 --> 00:10:19,300
I'll combine into one line as well,
119
00:10:19,380 --> 00:10:20,690
so you can see how you can do it.
120
00:10:20,820 --> 00:10:28,380
So we're going to use document.querySelectorAll, and we're going to select our img element, and
121
00:10:28,380 --> 00:10:34,740
we're going to grab the second one in the array, so we're going to tap into the one at index 1.
122
00:10:34,980 --> 00:10:43,050
Now that we've gotten this element using these lines of code, we're going to set its attribute, and the
123
00:10:43,050 --> 00:10:49,710
attribute we're going to set is src, and the value we're going to set it to is randomImageSource2.
124
00:10:50,060 --> 00:11:00,770
So now if we hit save and we refresh, then you can see that both our dices are generating new random
125
00:11:00,770 --> 00:11:01,890
dice images.
126
00:11:01,910 --> 00:11:02,550
It's pretty neat,
127
00:11:02,570 --> 00:11:08,690
right? Now the next step we have to address is the title, and we're going to change the innerHTML
128
00:11:08,750 --> 00:11:13,770
of the title depending on what was the result of the dice roll.
129
00:11:13,820 --> 00:11:16,540
So we can use an if statement to do this.
130
00:11:16,790 --> 00:11:25,010
We can say that if randomNumber1 was greater than randomNumber2, then in that case that means
131
00:11:25,040 --> 00:11:26,450
player 1 won.
132
00:11:26,570 --> 00:11:33,380
So we're going to tap into the h1 by saying document.querySelector, because in this case we only
133
00:11:33,380 --> 00:11:40,560
have one h1, and we're going to say .innerHTML equals,
134
00:11:40,700 --> 00:11:42,180
you can put whatever you want here,
135
00:11:42,200 --> 00:11:49,220
but I'm just going to say "Player 1 Wins!", and I'm going to add a emoji tag in here.
136
00:11:49,280 --> 00:11:55,370
So, on a Mac, if you wanted to add emojis then you can simply go into Edit, Emoji & Symbols, and on
137
00:11:55,370 --> 00:11:58,520
Windows you can simply search for the flag emoji
138
00:11:58,550 --> 00:12:00,400
inside Google Chrome.
139
00:12:00,400 --> 00:12:05,120
So this is the case where if player 1 wins.
140
00:12:05,220 --> 00:12:13,610
So the next one is going to be an else if, and in this case this is, what if randomNumber2 was greater
141
00:12:13,610 --> 00:12:15,630
than randomNumber1?
142
00:12:15,860 --> 00:12:19,380
Then clearly that means that player 2 won.
143
00:12:19,400 --> 00:12:31,480
So we'll say document.querySelector("h1").innerHTML = "Player 2 Wins!".
144
00:12:31,480 --> 00:12:39,410
Now finally, the third scenario is, what if randomNumber1 actually equaled randomNumber2?
145
00:12:39,700 --> 00:12:40,560
Well, in that case
146
00:12:40,570 --> 00:12:51,830
we'll address it with an else statement, and we'll say document.querySelector("h1").innerHTML =
147
00:12:52,190 --> 00:12:56,080
"Draw!". Cool.
148
00:12:56,090 --> 00:13:02,560
So now if we hit save and we refresh our page then you can see that depending on the dice roll then
149
00:13:02,560 --> 00:13:08,000
we'll tell the user which player won, or whether there was a draw.
150
00:13:08,660 --> 00:13:13,700
So I hope you had fun with this challenge and it helped you to get to grips with a lot of the things
151
00:13:13,700 --> 00:13:17,100
that we've been learning in these past few lessons.
152
00:13:17,150 --> 00:13:22,760
Now of course, depending on how you wrote your code, it could have been a lot shorter or a lot longer, or you
153
00:13:22,760 --> 00:13:29,390
might have used different ways, like say getElementById, or getElementByTagName, instead of
154
00:13:29,390 --> 00:13:31,490
querySelector or querySelectorAll.
155
00:13:31,640 --> 00:13:37,860
And of course if you wanted to refactor your code and make it a lot shorter then you can always do that.
156
00:13:37,940 --> 00:13:44,570
But always remember that there is a healthy balance between really short code and expressive code that
157
00:13:44,630 --> 00:13:47,290
anybody could understand when they came around.
158
00:13:47,330 --> 00:13:52,850
So I would say something like this is probably a little bit too long but I think it helps to see what's
159
00:13:52,850 --> 00:13:53,320
going on
160
00:13:53,330 --> 00:13:55,220
exactly every step of the way.
161
00:13:55,490 --> 00:14:04,070
Now if you were to go even more extreme and to say, you know, instead move this into here and then move
162
00:14:04,070 --> 00:14:06,980
this into here.
163
00:14:07,070 --> 00:14:13,280
Now this code will still work but having such a long line of code where everything is happening all
164
00:14:13,280 --> 00:14:15,460
in one place is a little bit much,
165
00:14:15,560 --> 00:14:20,700
and it makes it harder for anybody else who comes along to understand what's going on in your code.
166
00:14:20,720 --> 00:14:26,220
So I recommend aiming for that healthy balance and aiming to keep your code really really readable.
167
00:14:26,240 --> 00:14:31,310
Now in the next module we're going to be digging into some more intermediate parts of the Document Object
168
00:14:31,310 --> 00:14:38,260
Model, and we're going to see how we can respond to events such as button clicks and also keyboard strokes.
169
00:14:38,300 --> 00:14:41,320
So for all of that and more, I'll see you on the next lesson.
17218
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.