OK, ladies and gentlemen, now the interesting part is we need to find a solution when we click this
button.
Actually, this is a button, by the way, and when we click this button, I want to target.
So I want to create add even Lisson or there and something to happen right now.
And when it's clicked, I want this here to display some sort of our six images.
Right.
We have six dice images.
One of the six images should be there in there like this dice one dice to those three until day six.
Now, how we can do this, we can use for this purpose.
We will use math random.
We already have used math random before.
Probably we're not going to use it in the future.
So what I'm going to create here is that I'm going to attach event listner of the button when the button
is click.
So the name of the button is actually button and roll dice.
Just going to copy this one in here.
I'm going to say document dot, query selector.
Am we going to select that one with dot button roll dice.
And after that I just want to add event listener and I'm just going to say click here so I'll, I want
some functionality here right now.
Close this one in here.
What I want first to happen, OK, I'm just going to create a variable called dice and this variable,
as I told you, it will be math dot random.
I hope you understand that with the random we can get a random number and I'm going to multiply by six.
OK, now first things first.
Let's check.
This is going to work lot.
It's working.
Let's let's save it.
So open the specked Elliman console and when you click here is it's working.
So that is what we need to do.
Right.
So when we should go there.
OK, now we know that at event listener click it's working.
So one thing that I want to show you here is that this dice console like these dice, by the way, now
these will produce a result, but not the result that we want.
So five point five is going to give us two point three, one and zero.
So two things I don't like here.
The first is the first thing that it will never reach six.
The second thing that I don't like is the second thing is I don't like is this is decimal number.
And the third thing that I don't like is that it also includes zero and we don't have a dice zero.
It starts from one, it goes to six.
So we can escape this one.
We can fix one of the problem, actually, two of the problems never to be zero and also never to always
to get maximum one, two, six.
This is very easily achievable.
So I'm going to cut this one and I'm going to put it in brackets like this.
I'm going to put it one only.
Right.
And now if I click here, still going to have decimal number, but I will never get zero and I should
get number six as well.
Right here it is six point eighty six point something.
No, the other thing that we need to take here is to round this number.
So for that reason, we're going to use, again, math that floor and we're going to round this buddy
here.
OK, so I expect here all of the numbers here it is to be here is six.
So maybe I'm clicking too fast, but they're never going to be zero.
They're never going to be decimal in the maximum.
They will be six.
That is pretty much what we need.
OK, so we have these six so it can go from one to six in our images are going from one to six.
So this should tell you something that we can use.
This one we can concatenated.
We know we.
JavaScript, we can add sauce, we can add images in our HTML, so the first thing I'm going to say,
OK, I'm going to create a variable called the dice and I want to be document that get the query selector.
Sorry, and I want to select the dice.
Right.
Let me show you what I'm trying to select here.
I'm trying to select target this class.
Right.
Because this class initially.
Where was it?
It is we set to display none.
Now we can fix that one very simple dice going to set two style display to what we can set display to
plot.
We can even put it here in this line.
Right.
But I just wanted to put it like this.
Now I'm just going to say set back the dice to be visible or to display block.
So that will give you that optionality here.
Just going to create like this, I'm going to say, OK, creating round no
random number from one until six.
That is what we need to do right here.
You're getting the dice glass with the query we select.
OK, now we have this one.
And if I refresh it, it is the when I click on here, nothing will happen.
But look what's happening because Display Block is going to show you here we did have these dice six.
Right.
And before we set the visible invisible sorry.
Here, what was it.
Right.
And now when I click I said that to display block.
But the second thing that I want to achieve is I don't want every time I click these dice six to appear.
So what I can do, I'm just going to copy this one and I'm going to put it here and we're going to delete
this one.
But this is just to show you what we need to do now with the help of these days, I'm going to get SIRC
source and I know it's like this.
So what I'm what I can do, I'm just going to copy it until here.
So in single quotes, right?
We don't we just slash don't forget about the slash and I'm going to set Dash and I'm going to leave
it like that.
Why?
Because we already checked that the dice comes along the dice.
We already check.
It's changing all the time when we click.
So I just going to plus so I'm going to pen the dice plus and I need to pmg all of my images are have
the extension that point.
Right.
So I, I know that never going to have something else and I'm trying to achieve this.
I'm G dies so I'm through here so I only play around with the dice.
No.
Right.
And everything else is the same.
OK, before we do that I'm just going to Khandala.
What.
The dice just got control of this entire thing or I'm just going to put it here console like I'm going
to put the entire thing in that should give me the entire, the entire path.
So I'm going to refresh it.
I didn't have to so here it is.
I'm G Dice four because I'm coming this one.
So I'm Jidi six because this was six.
I'm Judaize three.
And a look at what's happening here.
Right, because three and this is three now how cool is this.
So we don't need to love this one anymore because it's working and it's working because we said that
this play back to block.
Right.
So that is what we today.
What we did achieve.
First we had that dice.
So when we rolled it, the numbers generated at this at this instance is six.
Just going to leave this one for now.
So I'm just going to roll it.
It's one it's going to roll it again.
It's two.
That's why it's happening here.
Three, three, four, three.
And it will give me a random number every time a.
Do this dive, right?
I do this rolling of the dice, so that is pretty much it.
I hope you enjoyed so far because what we achieved now we just get the query selector and the event
listener.
When we click with a mouse, we just create a random number called dice, and that will go from zero
to six initially to four.
Yeah, to five initially.
That's why we put extra one.
I don't want zero to have it and that's why it's going to have from one to six, but it's going to be
still decimal and we're going to use math, the floor function just to get rid of that decimal.
It will make a good round number.
That is pretty much it.
With this.
I'm selecting the dice, setting back to block and we don't need this anymore.
And here we are sitting the source and we are loading that image right.
Because we do have the images from one till six and they all start with dice, dash, dice, dash six
days, dash three, dice, dash one.
So how cool is this?
Now our application is getting more powerful, more elegant.
We can roll the dice.
We can see this here.
Right.
And it's working.
Next time we will probably play around with the players who who is the players and what we need to sit.
Right, because we need to start calculating the result.
This one, we need to start calculating how much this player have role and how much this player.
So we have a lot of things to do.
But this was the most important and we managed to roll the dice at this one.
So the other button is not working.
Don't worry about it.
So thank you very much.
I hope you enjoyed this one and I'll see you in the next one.