WEBVTT 0 00:00.510 --> 00:00.890 All right. 1 00:00.890 --> 00:02.690 So how did that go? 2 00:02.880 --> 00:09.090 Now I want you to really give this a good go before you come and check the solutions because this really 3 00:09.090 --> 00:15.480 is how you're going to prove to yourself that you've actually internalized and learned all of this information 4 00:15.480 --> 00:16.650 that we've been teaching you. 5 00:16.890 --> 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 6 00:22.410 --> 00:26.480 or see how I did it then go ahead and continue watching. 7 00:26.490 --> 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 8 00:32.880 --> 00:37.290 it's already set up so that we can start writing Javascript. 9 00:37.290 --> 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 10 00:44.130 --> 00:48.180 and we're going to create a new file that's called index.js. 11 00:48.360 --> 00:55.530 So now that we have our Javascript file, it's still not linked to our index.html. Just as we linked 12 00:55.530 --> 00:58.200 up our style sheet in the CSS sections, 13 00:58.320 --> 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. 14 01:05.670 --> 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. 15 01:12.010 --> 01:19.290 So now we can test this by simply writing an alert that says "Working!". 16 01:19.680 --> 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 17 01:25.770 --> 01:27.690 up without any issues. 18 01:27.700 --> 01:27.920 All right. 19 01:27.930 --> 01:29.090 So that's step one. 20 01:29.100 --> 01:35.730 Now the next thing we want to do is to place some images into our image elements by default, 21 01:35.730 --> 01:43.450 so when our web site starts up it should have two images of the die six face already showing. 22 01:43.470 --> 01:49.890 So we know that our images are located in a folder called images, and they're numbered dice1 through to 23 01:49.890 --> 01:51.010 dice6. 24 01:51.150 --> 02:00.600 So we can simply change the src here to images/dice6.png, and we can do the same thing 25 02:00.630 --> 02:01.530 over here. 26 02:04.160 --> 02:09.070 And now if we hit save and refresh we've got some dice on the page. 27 02:09.200 --> 02:11.280 Looking pretty good. All right. 28 02:11.300 --> 02:12.610 So that's step two. 29 02:12.770 --> 02:20.090 Now step three involves going into our index.js and generating some random numbers that we're going 30 02:20.090 --> 02:24.410 to be using to select a random dice face. 31 02:24.410 --> 02:30.040 So we first have to create a variable called randomNumber1, 32 02:30.140 --> 02:37.760 and remember that to create a random number, we simply use the method Math.random, and this will generate 33 02:37.760 --> 02:42.780 a number between 0 and 0.9999999 recurring. 34 02:42.860 --> 02:48.670 So in our case we need a random number between 1 and 6. 35 02:48.800 --> 02:53.380 So we need to multiply this random number that we get by 6. 36 02:53.510 --> 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 37 03:01.790 --> 03:05.060 we can't have that random number be a decimal number, 38 03:05.060 --> 03:12.000 so we need it to be a whole number. And we can do that by rounding it down using Math.floor. 39 03:12.080 --> 03:17.660 So remember that if at any point you're not quite sure what your code is doing, you can always just 40 03:17.720 --> 03:23.250 copy it and paste it into your console and just run it to see what the values are. 41 03:23.330 --> 03:26.950 So we're currently getting random numbers between 0 and 5. 42 03:27.050 --> 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. 43 03:36.200 --> 03:44.610 So let's recap on this method. We're generating a random number between 0 and 0.99999. 44 03:44.930 --> 03:46.600 Then we're multiplying that number, 45 03:46.600 --> 03:55.250 whatever it may be, by 6, in order to change it to between 0 and 5.99999. 46 03:56.390 --> 04:00.420 Then we're rounding that number down to the nearest whole number, 47 04:00.470 --> 04:04.030 so it becomes between zero and five. 48 04:04.190 --> 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 49 04:11.390 --> 04:12.040 the number. 50 04:12.110 --> 04:18.860 And you can verify each step of this code by simply testing it out inside the console. 51 04:18.860 --> 04:25.430 Now if any of this seem confusing then make sure that you go back to our lesson on randomization where 52 04:25.430 --> 04:28.010 we talked about this in more detail. 53 04:28.010 --> 04:34.940 All right. So now we have a randomNumber1 which is going to give us a random number between 1 and 54 04:34.960 --> 04:43.160 6 and then we're going to use this random number to select a random dice image. 55 04:43.160 --> 04:50.120 So you might notice that our dice images are very handily named from dice1 through to dice6. 56 04:50.240 --> 04:57.800 So we can simply use concatenation to add this number to the end of the string 'dice', and get our random 57 04:57.800 --> 04:58.910 dice image. 58 04:58.940 --> 05:06.780 So let's create a variable called randomDiceImage, and we can create this using concatenation. 59 05:06.890 --> 05:13.600 So we can say "dice" + randomNumber1 + ".png". 60 05:13.640 --> 05:20.400 So this will be a string that is from dice1.png through to dice6.png. 61 05:20.690 --> 05:29.080 So we can now use that string to change the source of our image to that random image name. 62 05:29.090 --> 05:34.760 So the next part is changing that attribute value for the source. 63 05:34.760 --> 05:37.210 So at the moment it's just a static image, 64 05:37.250 --> 05:43.700 it's always going to show dice6. But we're going to change this string based on the random number that 65 05:43.700 --> 05:44.680 we got back. 66 05:44.960 --> 05:50.740 So, in order to change it, we have to tap into the src attribute of our image element. 67 05:50.900 --> 05:58.580 So notice that the source is actually not just the name of the image but it also has the folder that 68 05:58.580 --> 06:00.670 the images are contained in, 69 06:00.890 --> 06:06.500 and that's because all of our dice images are nested inside this folder called images, which is how we 70 06:06.500 --> 06:09.560 would normally organize our assets. 71 06:09.590 --> 06:18.860 So in order to include that name we also have to add it by concatenation. So we can say var 72 06:18.890 --> 06:24.860 randomImageSource = "images", which is the name of the folder, 73 06:24.860 --> 06:32.160 notice that it's a plural, with an s, and then / + 74 06:32.450 --> 06:34.190 randomDiceImage. 75 06:34.580 --> 06:37.870 Now this step is optional, because you can also add it in here, 76 06:37.910 --> 06:40.310 but I think it's just easier for you to see what's going on, 77 06:40.310 --> 06:42.460 so I'm leaving it as a separate line here. 78 06:42.470 --> 06:49.390 So now what we'll get back inside this variable will be something like images/dice1.png 79 06:49.460 --> 06:55.800 through to images/dice6.png. 80 06:55.940 --> 07:01.190 So now we're ready to change the src attribute of our image element. 81 07:01.190 --> 07:05.100 So do you remember how you can change the attributes of the elements? 82 07:05.360 --> 07:09.250 Well before we do anything we have to first select the element. 83 07:09.380 --> 07:17.780 So we'll say document.querySelectorAll, because we actually have two images that we need to change 84 07:17.840 --> 07:20.430 rather than just selecting the first one. 85 07:20.480 --> 07:25.600 So we're going to use querySelectorAll, and we're going to select based on our img tag. 86 07:25.730 --> 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 87 07:32.570 --> 07:34.610 0 inside a square bracket. 88 07:34.670 --> 07:41.840 So now we can either assign this to a variable, say var image1 equals this document.querySelector 89 07:41.840 --> 07:47.200 image at index 0, or you can simply just continue along that same line. 90 07:47.360 --> 07:48.800 But let's make it easier to see 91 07:48.800 --> 07:50.260 by separating it all out. 92 07:50.360 --> 07:59.120 So now we've got image1, and we can now set its attribute by using the method setAttribute. 93 07:59.270 --> 08:06.200 Now, in this case, the first input in here has to be the attribute's name that you want to change. 94 08:06.500 --> 08:11.010 And in our case the one that we want to change is the attribute called src. 95 08:11.270 --> 08:13.290 So let's put that in there. 96 08:13.490 --> 08:18.310 And the second parameter, or the second input, is what we want to change it to. 97 08:18.560 --> 08:22.400 So we want to change it to our randomImageSource. 98 08:22.550 --> 08:28.570 So we'll just put that variable in there, randomImageSource. 99 08:28.610 --> 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 100 08:35.540 --> 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 101 08:45.290 --> 08:48.820 through to dice6.png. 102 08:48.830 --> 08:54.920 All right. So now we have to do exactly the same thing for the second image element. 103 08:54.920 --> 08:59.850 Now very often you will be tempted to copy and paste code. 104 09:00.120 --> 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 105 09:06.620 --> 09:14.180 better to just write out the code for extra coding practice, because when you copy and paste code, especially 106 09:14.180 --> 09:19.230 in a case like this, I will bet that you will probably get at least one or two bugs. 107 09:19.250 --> 09:21.860 So let's just write out our code instead. 108 09:21.860 --> 09:26.060 Now the first thing we need to create is a randomNumber2. 109 09:26.540 --> 09:28.710 And this is going to equal exactly the same thing 110 09:28.720 --> 09:29.650 Math.floor 111 09:32.780 --> 09:40.990 Math.random, multiply that by 6, and then add 1 to the value. 112 09:41.250 --> 09:46.700 So now we can use randomNumber2 to create the second random dice image. 113 09:46.710 --> 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 114 09:50.850 --> 10:07.890 code. So we can simply say var randomImageSource2 = "images/dice" + randomNumber2 115 10:07.890 --> 10:10.190 + ".png". 116 10:10.200 --> 10:16.980 So now we have our randomImageSource2. Then we can go ahead and perform the next two steps, which 117 10:16.980 --> 10:19.300 I'll combine into one line as well, 118 10:19.380 --> 10:20.690 so you can see how you can do it. 119 10:20.820 --> 10:28.380 So we're going to use document.querySelectorAll, and we're going to select our img element, and 120 10:28.380 --> 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. 121 10:34.980 --> 10:43.050 Now that we've gotten this element using these lines of code, we're going to set its attribute, and the 122 10:43.050 --> 10:49.710 attribute we're going to set is src, and the value we're going to set it to is randomImageSource2. 123 10:50.060 --> 11:00.770 So now if we hit save and we refresh, then you can see that both our dices are generating new random 124 11:00.770 --> 11:01.890 dice images. 125 11:01.910 --> 11:02.550 It's pretty neat, 126 11:02.570 --> 11:08.690 right? Now the next step we have to address is the title, and we're going to change the innerHTML 127 11:08.750 --> 11:13.770 of the title depending on what was the result of the dice roll. 128 11:13.820 --> 11:16.540 So we can use an if statement to do this. 129 11:16.790 --> 11:25.010 We can say that if randomNumber1 was greater than randomNumber2, then in that case that means 130 11:25.040 --> 11:26.450 player 1 won. 131 11:26.570 --> 11:33.380 So we're going to tap into the h1 by saying document.querySelector, because in this case we only 132 11:33.380 --> 11:40.560 have one h1, and we're going to say .innerHTML equals, 133 11:40.700 --> 11:42.180 you can put whatever you want here, 134 11:42.200 --> 11:49.220 but I'm just going to say "Player 1 Wins!", and I'm going to add a emoji tag in here. 135 11:49.280 --> 11:55.370 So, on a Mac, if you wanted to add emojis then you can simply go into Edit, Emoji & Symbols, and on 136 11:55.370 --> 11:58.520 Windows you can simply search for the flag emoji 137 11:58.550 --> 12:00.400 inside Google Chrome. 138 12:00.400 --> 12:05.120 So this is the case where if player 1 wins. 139 12:05.220 --> 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 140 12:13.610 --> 12:15.630 than randomNumber1? 141 12:15.860 --> 12:19.380 Then clearly that means that player 2 won. 142 12:19.400 --> 12:31.480 So we'll say document.querySelector("h1").innerHTML = "Player 2 Wins!". 143 12:31.480 --> 12:39.410 Now finally, the third scenario is, what if randomNumber1 actually equaled randomNumber2? 144 12:39.700 --> 12:40.560 Well, in that case 145 12:40.570 --> 12:51.830 we'll address it with an else statement, and we'll say document.querySelector("h1").innerHTML = 146 12:52.190 --> 12:56.080 "Draw!". Cool. 147 12:56.090 --> 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 148 13:02.560 --> 13:08.000 we'll tell the user which player won, or whether there was a draw. 149 13:08.660 --> 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 150 13:13.700 --> 13:17.100 that we've been learning in these past few lessons. 151 13:17.150 --> 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 152 13:22.760 --> 13:29.390 might have used different ways, like say getElementById, or getElementByTagName, instead of 153 13:29.390 --> 13:31.490 querySelector or querySelectorAll. 154 13:31.640 --> 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. 155 13:37.940 --> 13:44.570 But always remember that there is a healthy balance between really short code and expressive code that 156 13:44.630 --> 13:47.290 anybody could understand when they came around. 157 13:47.330 --> 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 158 13:52.850 --> 13:53.320 going on 159 13:53.330 --> 13:55.220 exactly every step of the way. 160 13:55.490 --> 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 161 14:04.070 --> 14:06.980 this into here. 162 14:07.070 --> 14:13.280 Now this code will still work but having such a long line of code where everything is happening all 163 14:13.280 --> 14:15.460 in one place is a little bit much, 164 14:15.560 --> 14:20.700 and it makes it harder for anybody else who comes along to understand what's going on in your code. 165 14:20.720 --> 14:26.220 So I recommend aiming for that healthy balance and aiming to keep your code really really readable. 166 14:26.240 --> 14:31.310 Now in the next module we're going to be digging into some more intermediate parts of the Document Object 167 14:31.310 --> 14:38.260 Model, and we're going to see how we can respond to events such as button clicks and also keyboard strokes. 168 14:38.300 --> 14:41.320 So for all of that and more, I'll see you on the next lesson.