Let's go back into JavaScript and we're going to actually generate a visual dyce within our HTML, all
using JavaScript.
I've stripped out quite a bit of the functionality from the previous lesson I've kept in the role,
because we want to still keep that creating random number from whatever.
We're rolling all the way up to one all the way through to six and then returning back that number.
I've also kept the button of that Lessner on the button element and I've updated the div to have a class
of output and using the query selector, selecting the element with a class of output.
So we're ready to move on to the next step.
And this is where we're going to build out our role.
So setting up a variable, we can call it roll dice and we've only going to have a Wondai using the
function that we've used earlier.
Returning back six, we're going to console log out whatever the roll of the dice was.
So this is going to give us a numeric value.
So just as before, we can get random generic values all the way from one to six.
And that's what's being returned back from our function that we built out earlier.
So we want to do is we want to build some dice and we're going to create a function in order to build
the dice.
And we want to just pass in this numeric value so we can build out dice, whatever number we want.
We can build out the dice to represent that number.
And that means that adding in the dots that we need in order to represent that number on the dice themselves.
So let's create an element we're just going to call it and building out a function called builder.
And this is going to contain the value of roll dice.
So remember, again, this is a value anywhere from one to six.
Next, adding in the function that builder function, passing in the number value in the argument.
We want to first start out by creating our main container.
So using the document.
Create element method in JavaScript.
Allows us to dynamically create elements, the element that we want to create is going to be a dip.
So for now, we're going to return back that Divx object that we've created and now it's going to be
represented within the variable holder.
And we can use that to output it using append child, which allows you to add in elements to other elements.
So we're selecting that output and we're using append child method to add in that returned object,
which is represented in Holder onto our page.
And we don't see a whole lot happening.
But I when we go into inspect, you're going to see that we generate it with an output.
We've got a brand new div and the more we click it, the more divs we're generating.
And within this div, I want to apply a class to it so we can add that in here where we can do div.
So getting that div object that we just freshly created using set attribute and the attribute that we're
going to set is class and the value that we're going to associate it to it is deicer.
So that's the class that we're going to add in going up into our style.
Let's create a class of deicer and this is the way that the dice are going to be represented visually
within our page.
Set a width so we can have a width of 90 picks and a height of 90 picks as well.
So it's a square and I'm going to add in border radius to make it slightly rounded at the corners.
So let's see what that looks like.
So now when we refresh, go back into the console.
When we hit roll, we see that we're adding in multiple dice.
And what we actually want to do is we want to remove the dice so that we've only got that one element
there.
And I'll show you how to do that in the upcoming lesson.
So for now, build out, create a new brandnew function that's going to create a div, add a class of
dicer to that div, return it back into the element that called it, setting it in that variable and
then adding in that newly created a div to the output element on your page.
So add that functionality in.
When you click the button it's going to add in a new div appended to your output element.