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