0 1 00:00:00,510 --> 00:00:00,890 All right. 1 2 00:00:00,890 --> 00:00:02,690 So how did that go? 2 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 3 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 4 5 00:00:15,480 --> 00:00:16,650 that we've been teaching you. 5 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 6 7 00:00:22,410 --> 00:00:26,480 or see how I did it then go ahead and continue watching. 7 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 8 9 00:00:32,880 --> 00:00:37,290 it's already set up so that we can start writing Javascript. 9 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 10 11 00:00:44,130 --> 00:00:48,180 and we're going to create a new file that's called index.js. 11 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 12 13 00:00:55,530 --> 00:00:58,200 up our style sheet in the CSS sections, 13 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. 14 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. 15 16 00:01:12,010 --> 00:01:19,290 So now we can test this by simply writing an alert that says "Working!". 16 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 17 18 00:01:25,770 --> 00:01:27,690 up without any issues. 18 19 00:01:27,700 --> 00:01:27,920 All right. 19 20 00:01:27,930 --> 00:01:29,090 So that's step one. 20 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, 21 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. 22 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 23 24 00:01:49,890 --> 00:01:51,010 dice6. 24 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 25 26 00:02:00,630 --> 00:02:01,530 over here. 26 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. 27 28 00:02:09,200 --> 00:02:11,280 Looking pretty good. All right. 28 29 00:02:11,300 --> 00:02:12,610 So that's step two. 29 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 30 31 00:02:20,090 --> 00:02:24,410 to be using to select a random dice face. 31 32 00:02:24,410 --> 00:02:30,040 So we first have to create a variable called randomNumber1, 32 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 33 34 00:02:37,760 --> 00:02:42,780 a number between 0 and 0.9999999 recurring. 34 35 00:02:42,860 --> 00:02:48,670 So in our case we need a random number between 1 and 6. 35 36 00:02:48,800 --> 00:02:53,380 So we need to multiply this random number that we get by 6. 36 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 37 38 00:03:01,790 --> 00:03:05,060 we can't have that random number be a decimal number, 38 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. 39 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 40 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. 41 42 00:03:23,330 --> 00:03:26,950 So we're currently getting random numbers between 0 and 5. 42 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. 43 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. 44 45 00:03:44,930 --> 00:03:46,600 Then we're multiplying that number, 45 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. 46 47 00:03:56,390 --> 00:04:00,420 Then we're rounding that number down to the nearest whole number, 47 48 00:04:00,470 --> 00:04:04,030 so it becomes between zero and five. 48 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 49 50 00:04:11,390 --> 00:04:12,040 the number. 50 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. 51 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 52 53 00:04:25,430 --> 00:04:28,010 we talked about this in more detail. 53 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 54 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. 55 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. 56 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 57 58 00:04:57,800 --> 00:04:58,910 dice image. 58 59 00:04:58,940 --> 00:05:06,780 So let's create a variable called randomDiceImage, and we can create this using concatenation. 59 60 00:05:06,890 --> 00:05:13,600 So we can say "dice" + randomNumber1 + ".png". 60 61 00:05:13,640 --> 00:05:20,400 So this will be a string that is from dice1.png through to dice6.png. 61 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. 62 63 00:05:29,090 --> 00:05:34,760 So the next part is changing that attribute value for the source. 63 64 00:05:34,760 --> 00:05:37,210 So at the moment it's just a static image, 64 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 65 66 00:05:43,700 --> 00:05:44,680 we got back. 66 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. 67 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 68 69 00:05:58,580 --> 00:06:00,670 the images are contained in, 69 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 70 71 00:06:06,500 --> 00:06:09,560 would normally organize our assets. 71 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 72 73 00:06:18,890 --> 00:06:24,860 randomImageSource = "images", which is the name of the folder, 73 74 00:06:24,860 --> 00:06:32,160 notice that it's a plural, with an s, and then / + 74 75 00:06:32,450 --> 00:06:34,190 randomDiceImage. 75 76 00:06:34,580 --> 00:06:37,870 Now this step is optional, because you can also add it in here, 76 77 00:06:37,910 --> 00:06:40,310 but I think it's just easier for you to see what's going on, 77 78 00:06:40,310 --> 00:06:42,460 so I'm leaving it as a separate line here. 78 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 79 80 00:06:49,460 --> 00:06:55,800 through to images/dice6.png. 80 81 00:06:55,940 --> 00:07:01,190 So now we're ready to change the src attribute of our image element. 81 82 00:07:01,190 --> 00:07:05,100 So do you remember how you can change the attributes of the elements? 82 83 00:07:05,360 --> 00:07:09,250 Well before we do anything we have to first select the element. 83 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 84 85 00:07:17,840 --> 00:07:20,430 rather than just selecting the first one. 85 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. 86 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 87 88 00:07:32,570 --> 00:07:34,610 0 inside a square bracket. 88 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 89 90 00:07:41,840 --> 00:07:47,200 image at index 0, or you can simply just continue along that same line. 90 91 00:07:47,360 --> 00:07:48,800 But let's make it easier to see 91 92 00:07:48,800 --> 00:07:50,260 by separating it all out. 92 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. 93 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. 94 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. 95 96 00:08:11,270 --> 00:08:13,290 So let's put that in there. 96 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. 97 98 00:08:18,560 --> 00:08:22,400 So we want to change it to our randomImageSource. 98 99 00:08:22,550 --> 00:08:28,570 So we'll just put that variable in there, randomImageSource. 99 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 100 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 101 102 00:08:45,290 --> 00:08:48,820 through to dice6.png. 102 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. 103 104 00:08:54,920 --> 00:08:59,850 Now very often you will be tempted to copy and paste code. 104 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 105 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 106 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. 107 108 00:09:19,250 --> 00:09:21,860 So let's just write out our code instead. 108 109 00:09:21,860 --> 00:09:26,060 Now the first thing we need to create is a randomNumber2. 109 110 00:09:26,540 --> 00:09:28,710 And this is going to equal exactly the same thing 110 111 00:09:28,720 --> 00:09:29,650 Math.floor 111 112 00:09:32,780 --> 00:09:40,990 Math.random, multiply that by 6, and then add 1 to the value. 112 113 00:09:41,250 --> 00:09:46,700 So now we can use randomNumber2 to create the second random dice image. 113 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 114 115 00:09:50,850 --> 00:10:07,890 code. So we can simply say var randomImageSource2 = "images/dice" + randomNumber2 115 116 00:10:07,890 --> 00:10:10,190 + ".png". 116 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 117 118 00:10:16,980 --> 00:10:19,300 I'll combine into one line as well, 118 119 00:10:19,380 --> 00:10:20,690 so you can see how you can do it. 119 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 120 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. 121 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 122 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. 123 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 124 125 00:11:00,770 --> 00:11:01,890 dice images. 125 126 00:11:01,910 --> 00:11:02,550 It's pretty neat, 126 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 127 128 00:11:08,750 --> 00:11:13,770 of the title depending on what was the result of the dice roll. 128 129 00:11:13,820 --> 00:11:16,540 So we can use an if statement to do this. 129 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 130 131 00:11:25,040 --> 00:11:26,450 player 1 won. 131 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 132 133 00:11:33,380 --> 00:11:40,560 have one h1, and we're going to say .innerHTML equals, 133 134 00:11:40,700 --> 00:11:42,180 you can put whatever you want here, 134 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. 135 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 136 137 00:11:55,370 --> 00:11:58,520 Windows you can simply search for the flag emoji 137 138 00:11:58,550 --> 00:12:00,400 inside Google Chrome. 138 139 00:12:00,400 --> 00:12:05,120 So this is the case where if player 1 wins. 139 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 140 141 00:12:13,610 --> 00:12:15,630 than randomNumber1? 141 142 00:12:15,860 --> 00:12:19,380 Then clearly that means that player 2 won. 142 143 00:12:19,400 --> 00:12:31,480 So we'll say document.querySelector("h1").innerHTML = "Player 2 Wins!". 143 144 00:12:31,480 --> 00:12:39,410 Now finally, the third scenario is, what if randomNumber1 actually equaled randomNumber2? 144 145 00:12:39,700 --> 00:12:40,560 Well, in that case 145 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 = 146 147 00:12:52,190 --> 00:12:56,080 "Draw!". Cool. 147 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 148 149 00:13:02,560 --> 00:13:08,000 we'll tell the user which player won, or whether there was a draw. 149 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 150 151 00:13:13,700 --> 00:13:17,100 that we've been learning in these past few lessons. 151 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 152 153 00:13:22,760 --> 00:13:29,390 might have used different ways, like say getElementById, or getElementByTagName, instead of 153 154 00:13:29,390 --> 00:13:31,490 querySelector or querySelectorAll. 154 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. 155 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 156 157 00:13:44,630 --> 00:13:47,290 anybody could understand when they came around. 157 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 158 159 00:13:52,850 --> 00:13:53,320 going on 159 160 00:13:53,330 --> 00:13:55,220 exactly every step of the way. 160 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 161 162 00:14:04,070 --> 00:14:06,980 this into here. 162 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 163 164 00:14:13,280 --> 00:14:15,460 in one place is a little bit much, 164 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. 165 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. 166 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 167 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. 168 169 00:14:38,300 --> 00:14:41,320 So for all of that and more, I'll see you on the next lesson.