Instructor: Finally here goes the last part of the
solution of our coding challenge.
And this coding challenge is a really fun one,
because this time we have to add another dice to the game
and then we will have two dice instead of just one.
So let's now do that so the dice is down here
and I will just duplicate this line
and now we have two dice.
And since they are different, we need a way to identify
them both separately
and therefore I'm going to create an ID called dice one.
And down here we will have an ID
and you can imagine that this will be
dice number two, right?
And I will just for a CSS,
it's also quite simple because all I have to do is
to position them
so I just need to specify their top.
So top of this one will be 120 pixels.
And then duplicating it.
And 250 pixels for the second dice.
And since they both share the dice class,
all of these rules here appear to both.
All right so let's, before we start coding,
see how this looks.
Actually we cannot really see how this looks because
one of the dice gets hidden.
And that's because of the code that we wrote exactly to hide
the dice.
So maybe let's start by changing that code.
So it's right here, so as I mentioned right in the
beginning, probably in one of the first lectures of the
section, the query selector only selects the first
occurrence of the elements with this string here.
So we could use the query selector all method here
and then we would have to use a four loop or a while
to loop through the results.
And we will do that later in the next project
but for now let's keep things a bit simpler
and I will therefore just use the select element by ID
method here.
So I don't want this anymore, I'm just going to say
document.get element by ID
and the first one is called dice one
and I'm just going to set its style
or better it's display property to block.
So that we can see it here.
And the same thing for the second one.
So we don't need this one anymore.
And now since this variable here is gone
I will also simply go ahead and replace this code
with this part here.
Ok so dice one will be the value of dice.
Now we still only have one dice value right?
So we need to fix that as well.
So I'm going to create dice one instead of dice.
Duplicate this line and create dice one with the exact
same formula.
Swift this runs twice, we already know that the math random
always generates a different number,
so these will be two different numbers.
Not always but generally
there will be two different numbers.
So now here's dice one and then duplicating this line
we will have dice two here.
And then the value of the random dice roll.
All right now down there
in the places where we actually hide the dice,
now I will need to change that as well.
So for example in here,
we have two dice.
Now we need to put it to none
For both.
And the same thing here as well.
None.
And none.
Now maybe you're thinking,
oh I'm repeating a lot of code here,
I could just create a function instead.
And yes that's true, you could actually create
a function called hide dice, for example,
and replace this code by that.
And would actually make some sense,
but in this solution of this coding challenge,
I'm not going to do that, but of course you can try it out
and then see for yourself that it's going to work too.
Ok, so here we are back.
And actually let's comment out this part here
from the last challenge.
Actually this one as well.
So we don't need this last dice thing, ok?
Because what we want is only this what we had before.
Oh let me just copy it from the original, ok?
So it's less confusing like this.
So we want the original part to this.
OK, so this is what we had before.
If the dice is different to one, then everything
happens normally.
But now it's different because now, it's enough
for one of them to be one and then we lose our score
and it's the next player's turn.
So what has to happen that we can continue playing
and that our score gets added?
So the first dice of course needs to be different from one,
and at the same time, dice two also needs to not be one.
So this solves coding challenge number three.
And now let's test that this actually works.
In the beginning there's no dice, as we know.
If I roll the dice, oh ok, so here we have now two dice.
But there's a still a problem because here we don't
have a number right now.
So actually the problem right now is not yet solved.
So let me look at the console here.
And there we have an error.
And an error happened in line 32
Where we see that we still were using the old dice value.
And actually yes we did.
So of course we don't want the dice here anymore
but now what gets added to our score is not only dice one
but of course the sum of these two.
So dice one plus dice two.
So that's what we're missing here.
So closing this,
and once again, roll the dice.
And yes, now four plus two is six.
Hold it, and the next player, oh and he once again
rolled one of them was a one
so it's right back to player two.
So yeah, this was challenge number three with two dices.
So we did three nice changes here which hopefully
helped you get a bit more practice with your javascript.
All right so see you soon.