Original subtitles

All right.

So how did that go?

Now I want you to really give this a good go before you come and check the solutions because this really

is how you're going to prove to yourself that you've actually internalized and learned all of this information

that we've been teaching you.

But once you have done and if you want to check the solution or you just want to fix a particular bug

or see how I did it then go ahead and continue watching.

So we first start off, this is the web site that we've got, and notice that it's already been styled and

it's already set up so that we can start writing Javascript.

Now there's just one problem. We currently don't have a Javascript file, so we're going to go into a project

and we're going to create a new file that's called index.js.

So now that we have our Javascript file, it's still not linked to our index.html. Just as we linked

up our style sheet in the CSS sections,

we have to link up our index.js. And the best place to do that is just before the end of the body.

So we're going to create a script tag that has an external source, and the source is going to be index.js.

So now we can test this by simply writing an alert that says "Working!".

And now, if we reload our web site and we get our alert, then we know that our Javascript has been linked

up without any issues.

All right.

So that's step one.

Now the next thing we want to do is to place some images into our image elements by default,

so when our web site starts up it should have two images of the die six face already showing.

So we know that our images are located in a folder called images, and they're numbered dice1 through to

dice6.

So we can simply change the src here to images/dice6.png, and we can do the same thing

over here.

And now if we hit save and refresh we've got some dice on the page.

Looking pretty good. All right.

So that's step two.

Now step three involves going into our index.js and generating some random numbers that we're going

to be using to select a random dice face.

So we first have to create a variable called randomNumber1,

and remember that to create a random number, we simply use the method Math.random, and this will generate

a number between 0 and 0.9999999 recurring.

So in our case we need a random number between 1 and 6.

So we need to multiply this random number that we get by 6.

So if the random number was between 0 and 0.9, then we now have a number between 0 and 5. And

we can't have that random number be a decimal number,

so we need it to be a whole number. And we can do that by rounding it down using Math.floor.

So remember that if at any point you're not quite sure what your code is doing, you can always just

copy it and paste it into your console and just run it to see what the values are.

So we're currently getting random numbers between 0 and 5.

So to change that range from 0 to 5 to 1 to 6 all we need today is just to add one.

So let's recap on this method. We're generating a random number between 0 and 0.99999.

Then we're multiplying that number,

whatever it may be, by 6, in order to change it to between 0 and 5.99999.

Then we're rounding that number down to the nearest whole number,

so it becomes between zero and five.

And finally we're changing that range from between 0 and 5 to between 1 and 6 by simply adding 1 to

the number.

And you can verify each step of this code by simply testing it out inside the console.

Now if any of this seem confusing then make sure that you go back to our lesson on randomization where

we talked about this in more detail.

All right. So now we have a randomNumber1 which is going to give us a random number between 1 and

6 and then we're going to use this random number to select a random dice image.

So you might notice that our dice images are very handily named from dice1 through to dice6.

So we can simply use concatenation to add this number to the end of the string 'dice', and get our random

dice image.

So let's create a variable called randomDiceImage, and we can create this using concatenation.

So we can say "dice" + randomNumber1 + ".png".

So this will be a string that is from dice1.png through to dice6.png.

So we can now use that string to change the source of our image to that random image name.

So the next part is changing that attribute value for the source.

So at the moment it's just a static image,

it's always going to show dice6. But we're going to change this string based on the random number that

we got back.

So, in order to change it, we have to tap into the src attribute of our image element.

So notice that the source is actually not just the name of the image but it also has the folder that

the images are contained in,

and that's because all of our dice images are nested inside this folder called images, which is how we

would normally organize our assets.

So in order to include that name we also have to add it by concatenation. So we can say var

randomImageSource = "images", which is the name of the folder,

notice that it's a plural, with an s, and then / +

randomDiceImage.

Now this step is optional, because you can also add it in here,

but I think it's just easier for you to see what's going on,

so I'm leaving it as a separate line here.

So now what we'll get back inside this variable will be something like images/dice1.png

through to images/dice6.png.

So now we're ready to change the src attribute of our image element.

So do you remember how you can change the attributes of the elements?

Well before we do anything we have to first select the element.

So we'll say document.querySelectorAll, because we actually have two images that we need to change

rather than just selecting the first one.

So we're going to use querySelectorAll, and we're going to select based on our img tag.

So we're going to get two of these back and to tap into the first one we just have to specify the index

0 inside a square bracket.

So now we can either assign this to a variable, say var image1 equals this document.querySelector

image at index 0, or you can simply just continue along that same line.

But let's make it easier to see

by separating it all out.

So now we've got image1, and we can now set its attribute by using the method setAttribute.

Now, in this case, the first input in here has to be the attribute's name that you want to change.

And in our case the one that we want to change is the attribute called src.

So let's put that in there.

And the second parameter, or the second input, is what we want to change it to.

So we want to change it to our randomImageSource.

So we'll just put that variable in there, randomImageSource.

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

that we refresh the web site we get a new random dice showing up on the left, and it's going between dice1.png

through to dice6.png.

All right. So now we have to do exactly the same thing for the second image element.

Now very often you will be tempted to copy and paste code.

And I just want you to hear my voice in your head whenever you do that to remember that it's probably

better to just write out the code for extra coding practice, because when you copy and paste code, especially

in a case like this, I will bet that you will probably get at least one or two bugs.

So let's just write out our code instead.

Now the first thing we need to create is a randomNumber2.

And this is going to equal exactly the same thing

Math.floor

Math.random, multiply that by 6, and then add 1 to the value.

So now we can use randomNumber2 to create the second random dice image.

So in this case I'm going to make it a little bit simpler and we can cut down on these two lines of

code. So we can simply say var randomImageSource2 = "images/dice" + randomNumber2

+ ".png".

So now we have our randomImageSource2. Then we can go ahead and perform the next two steps, which

I'll combine into one line as well,

so you can see how you can do it.

So we're going to use document.querySelectorAll, and we're going to select our img element, and

we're going to grab the second one in the array, so we're going to tap into the one at index 1.

Now that we've gotten this element using these lines of code, we're going to set its attribute, and the

attribute we're going to set is src, and the value we're going to set it to is randomImageSource2.

So now if we hit save and we refresh, then you can see that both our dices are generating new random

dice images.

It's pretty neat,

right? Now the next step we have to address is the title, and we're going to change the innerHTML

of the title depending on what was the result of the dice roll.

So we can use an if statement to do this.

We can say that if randomNumber1 was greater than randomNumber2, then in that case that means

player 1 won.

So we're going to tap into the h1 by saying document.querySelector, because in this case we only

have one h1, and we're going to say .innerHTML equals,

you can put whatever you want here,

but I'm just going to say "Player 1 Wins!", and I'm going to add a emoji tag in here.

So, on a Mac, if you wanted to add emojis then you can simply go into Edit, Emoji & Symbols, and on

Windows you can simply search for the flag emoji

inside Google Chrome.

So this is the case where if player 1 wins.

So the next one is going to be an else if, and in this case this is, what if randomNumber2 was greater

than randomNumber1?

Then clearly that means that player 2 won.

So we'll say document.querySelector("h1").innerHTML = "Player 2 Wins!".

Now finally, the third scenario is, what if randomNumber1 actually equaled randomNumber2?

Well, in that case

we'll address it with an else statement, and we'll say document.querySelector("h1").innerHTML =

"Draw!". Cool.

So now if we hit save and we refresh our page then you can see that depending on the dice roll then

we'll tell the user which player won, or whether there was a draw.

So I hope you had fun with this challenge and it helped you to get to grips with a lot of the things

that we've been learning in these past few lessons.

Now of course, depending on how you wrote your code, it could have been a lot shorter or a lot longer, or you

might have used different ways, like say getElementById, or getElementByTagName, instead of

querySelector or querySelectorAll.

And of course if you wanted to refactor your code and make it a lot shorter then you can always do that.

But always remember that there is a healthy balance between really short code and expressive code that

anybody could understand when they came around.

So I would say something like this is probably a little bit too long but I think it helps to see what's

going on

exactly every step of the way.

Now if you were to go even more extreme and to say, you know, instead move this into here and then move

this into here.

Now this code will still work but having such a long line of code where everything is happening all

in one place is a little bit much,

and it makes it harder for anybody else who comes along to understand what's going on in your code.

So I recommend aiming for that healthy balance and aiming to keep your code really really readable.

Now in the next module we're going to be digging into some more intermediate parts of the Document Object

Model, and we're going to see how we can respond to events such as button clicks and also keyboard strokes.

So for all of that and more, I'll see you on the next lesson.