Now the last example I wanna dive
in is this statistics example here.
And here, we will use a while loop.
I can already say that it's probably not
too surprising, given that we haven't
used a while loop in any other example.
And the goal here will be to get that entered number
and upon a click, we wanna roll the dice
in JavaScript and roll it as often as needed
to the derive or to roll that target number,
which therefore must be between one and six.
And we then wanna output all the dice rolls we had
in a list and also output sum summary
as statistics down there in this sentence.
So for that here, I have my
statistics roll the dice example.
And here we all start again by getting access to the button.
The rollDiceButtonElement here.
That sounds like a fitting name and justice
before I'll get access to the button with query selector.
As I did it before by utilizing the section ID,
which in this case is statistics.
So you would stat ID here to get
access to this button like that.
Then, I actually add a little helper function,
rollDice, which will roll the dice for me.
And then the main function that should
be executed when the button is clicked.
We don't need two separate functions,
but I'm doing it here to have a clear separation
between those random number code, which I'll put
into this rollDice function and the main code
for then outputting the roll of list items.
And so on in this main function that is connected
to a click listener on the button.
And I'll name this function, deriveNumberOfDiceRolls.
Like that, and then connect those roll dice
button element with addEventListener
as before upon a click and then here point
at derive number of dice rolls.
Now I'll start here with derive number of dice rolls.
In there, I need to get access to that input
element here and conveniently this has an ID,
which we can use because that will
be the number which we wanna roll.
And therefore we cannot get access to this element and store
it in the constant, which could be named
targetNumberElement or targetNumberInputElement,
by using document get element by ID
and using that ID was added to this input element.
And then we got the entered number,
which is a constant name I already used before.
In an earlier example, I did use this here
and calculate some already, but since I created
it inside of a function, it was exclusive
to this function and I can therefore create another
constant with the same name in a different
function and entered number here, of course is
targetNumberInputElement.value.
Now, I also wanna get access to this unordered list,
which I then use for outputting my dice rolls.
And that has an idea as well.
So here I'll then create a never constant
before I get my entered number, actually
though the order would not matter here.
I just like to group that together since I will have two
constants that select elements and hence someone
to kind of keep them together for readability
purposes and I'll name this the diceRollsListElement here,
where I also use document get element by ID and use that ID.
Then we have the next step and extract the entered number.
And I will also reach out to dice rolls list element,
and set inner HTML to an empty string to, again,
clear any existing list items we might have in there.
We don't have any items initially,
but once we clicked the roll the dice button,
the first time we will have items.
And I always wanna clear those.
If we click that button again, adjust as we cleared
said user data upon a button click.
Now we can continue.
We have that entered number,
which is the number we wanna roll.
So now as a next step here,
I wanna add a while loop where we keep
on rolling numbers until we rolled this entered number.
And a for this I'll add a new variable.
And that is now a variable and not a constant
because it will receive new values
and dead variable could be named,
hasRolledTargetNumber, which is false initially.
It's a Boolean value, which I store in here.
Hence I have dis variable naming here,
which answers a question basically,
which is how you typically do name your Boolean variables.
And that's false initially because we haven't rolled our
target number yet, but we wanna set it to true inside
of the dwell loop once we did roll it.
So here I will keep on rolling as long as we have not.
Hence the exclamation mark rolled the target number
and then here between curly braces,
we have the actual code for this loop
and that's where we now wanna roll a number.
So here I will execute this rollDice function,
even though it's not doing anything yet,
we'll add the logic soon, I'll execute rollDice.
And I simply expect that this function will
return a random number between one and six.
So here I then have my rolled number and that's a constant
because it will be recreated for every while loop execution.
So it's not reassigned, but it's a brand new variable,
a brand new constant that will be created
for every while loop iteration.
And it will hold that rolled number between one and six.
And now we can check if rolled number is equal to entered
number, and I'm using two equal signs instead
of free equal signs here because entered number
when retrieved from the value property
of an input element will always be a string.
It might be a number that was entered by the user,
but it will be a pipe string.
That's just how HTML and JavaScript works.
When you get the value of an input field,
it's always a string, even if the input is of pipe number.
And even if the user did enter a number,
JavaScript does not care about that.
You always get a string and therefore this entered number,
even though it is a number of value will be a pipe string.
And hence we could either convert it to a number this could
easily be done by adding a plus here in front of it.
That's a quick way of converting a string
to a number in JavaScript, or we don't do this.
And instead we just use the double equal sign comparison
operator here to compare a number value,
which roll dice we'll return eventually
to a string value and check for value equality only.
And inside of this if statement,
we can then set hasRolledTargetNumber
to true if that here yields true.
Now this is one way of doing it,
but it's actually a bit too long on the otherhand
it is hopefully pretty easy to understand.
Nonetheless, I'll comment it out because if you write
a if statement to then store a Boolean value,
based on the result of this, if condition
in another variable, then you can shorten this
and you can just write hasRolledTargetNumber
equal to the result of this comparison.
Because keep in mind these comparison operators yield a
Boolean value, true or false.
And if that's what we wanna store in a variable,
we don't need the extra if check.
We can just store the result of this Boolean
comparison in this variable here.
It's not something we did up to this point
in the course, but it is something which
is also quite common to do in JavaScript.
If you have a variable or any place in your code
that needs a Boolean value, that should
be the result of some comparison.
You don't need the if check.
You can just store the comparison
result itself in the variable.
So this will yield true or false.
And hence we store true or false
in that has rolled target number variable.
And if this should be true, this will no longer yield
true, because we have the negation operator
and we would leave the while loop
once we rolled our target number therefore.
And hence now after does while loop,
we can output some summary statistics.
We can say how many rolls it took us to roll the target
number for this we'll need access to these spans here,
where we do output our summary data.
And we also need to keep track
of the number of rolls we have.
Now I'll first of all, get access to these spans here.
And the first span has an idea of output, total rolls,
so I'll create a constant here,
output total rolls element where I use
document get element by ID and use that ID.
And then we have the second span
where we output that target number.
And this span has an ID of output target number.
So here we can now use this and store
this in a constant as well.
The output target number element that could
be a name we use and then use document
get element by ID output, target number.
Now for output target number element,
we can already set the text content.
So here we can set text content equal to the enteredNumber.
So the entered number, which we extract up here,
because we just wanna repeat
that entered number down there.
So that's easy, now for the number of rolls,
we will have to keep track of those rolls.
And for that, I'll create another helper variable here,
which will name numberOfRolls, and which is 0 initially.
And it is created before we entered that while loop,
because inside of that, while loop, I wanna change it.
There I want to set numberOfRolls equal
to numberOfRolls + 1, I wanna increment it by 1.
And of course, if that's the goal we can
always adjust used is short-hand.
We learned about with the plus plus operator,
which is the same.
This will increment number of rolls by one
and store that new value in that variable
and therefore a number of rolls in the end,
will it be the number of rolls that took us.
And hence we can set output total rolls element text,
content, equal to number of rolls like this.
With that, we're outputting this, but we still don't
create a list item for every roll.
And of course we're not rolling the dice at all.
We'll do that as a last step.
First of all, let's create a list item for every roll
where we log that roll to the screen, basically.
And for that maybe here off after number of rolls,
I wanna create a new roll list element
with document create element, and we create a list
item here as we did it a couple of minutes before as well.
And then on this new roll list element or list item element,
if you wanna be super precise here with our naming
on that element, which be created,
I wanna set the text content here to again,
a little bit of a more complex string.
So again, I will create a helper constant
for that the output text constant, which says roll.
And then I wanna have to number of that roll,
which is number of rolls here.
Since I'm doing that after incrementing number
of rolls that will already be the correct number.
And then I wanna have a semi colon and a white space.
Hence I concatenate that string
and then output the rolled number.
And now we can set this output text here as a value
for the text content on the new roll list item element.
And we can then use this list here,
the dice rolls list element to append this item.
So on that dice rolls list element,
I call append and append the new roll list,
item element like this.
With that, we should be outputting that roll result.
Now we just need to make sure
that we do actually roll a random number.
So we need to work on that rollDice function.
And here in this function, we will utilize some
built in functionality, JavaScript offers
to us when it comes to working with random
numbers and with numbers in general.
We wanna return the value of course,
and that value, which I wanna return
here is basically a random number.
For this we have Math.random just as we
have console.log for logging something.
We have a globally available math object,
which is built into the browser.
So to say, which has random method,
which returns a random number
between zero and one, zero is included.
One is excluded and it returns
any floating point number in between basically.
So it returns value is like this.
Now here, we don't want a number
between zero and one though, but between one and six.
Therefore we'll start by multiplying Math.random with six.
Now we have a random number between zero and six.
Now we don't want all these floating point numbers though.
We want integers only.
And for that, we have another built in
method on this math object and that's the floor method,
which we can wrap around this result, which we derived here.
So we pass the result of calling Math.random
and multiplying it with six as a parameter value
to Math.floor and Math.floor will
simply round dead value down.
It will round it down to the nearest integer.
It cuts any decimal numbers basically.
So if we have 5.64 that would be rounded down to just five.
That's what Math.floor does.
So let me just make this clear here what Math.floor does.
That's what it does.
Now, that's still not all though,
because that will give us a number
between zero and six, six excluded.
And therefore what we need to do as a last step
is we need to add one because now we have
a random number between one and six.
Since we simply add one to our random number
between zero and five, which we got effectively
with just discoed and this code.
And therefor now, we have a function that yields
a random number between one and six.
And now that should be all, was quite
a lot of work, but it should be all.
If we now is save that and I enter four,
then if I click this button, I see some output
and that output output will differ every
time I click this button and you'll see
how many rolls it's took to roll a four.
So that's now this example implemented as well.
And what we see here is a great use case for a while loop,
where we keep on executing some code until a certain
condition is not met anymore.