Hey, welcome to our quick mini project, and the objective of this project or the challenge for this
project is to create some, many days that there's a button and it rolls.
The dice and the dice are actually created all using a JavaScript.
Hey, I'm going to give you a quick preview of what we're going to be creating in the upcoming lesson.
So this is going to be a dice roll where we've got a button.
And when you press the button, it's going to create dice where we've got the squares for three and
one.
So in this case, the rule was a three and a one.
So we've got the pattern up here for the array pattern of where the dots go.
Roll the dice again, a one and a five.
So we got that output here within the console and as well as we've got the visuals for the users that
are rolling the dice.
So this is all created just using and JavaScript.
So there's nothing else but JavaScript.
So when we create all of the HTML, this is all created using a JavaScript.
So we're creating the button as well as we're creating the HTML and applying all of the staling all
done via JavaScript.
So this is all dynamic.
So every time we roll it, it updates and visually represents the days that have been rolled.
So we've got two days here and we can actually with our code, it's fairly dynamic where we can create
multiple days.
So it's simply generating the days for the various areas that we've already created within the JavaScript.
So let's get started and create this from scratch.
And as you can see, there's no HTML here that when the page loads, it's all done with just JavaScript.
So let's get to it.
And we want to have to it to piece two days or two die showing up on the screen and also one button
that we can click and the JavaScript has to generate the dice and not using any staling, only just
JavaScript.
So let's get to it.
So first of all, let's create our first object and that's going to be a button.
So document create element and the element that we're creating as a button.
So we're going to make this clickable and we'll apply some styling to that as well.
So the button text content is going to just say roll, roll, dice
and let's create a mean container.
I'll call it play area.
And that document so create elements.
And the element that we're creating is going to be a div.
So we create that.
And now let's add the play area to our screen.
So let's create the play area and add it to the screen.
So document body, so body already exists as an object, that's what I'm able to add and append the
play area.
And I'm actually if I want it to move it above the JavaScript, I can use prepend, so that will actually
place it above.
So just to show you what I mean.
So we wanted to have the d'Hiv sitting above the script tags, so prepend prepared, if we use appended
or place that afterwards.
And we also want to add in to the play area, we want to append and add in the button object.
So that will show a button on the page, which just shows up.
It doesn't do anything quite yet.
So going back into the code, so we need a way to generate some dice and we know what this we want to
make it visually so that we see the dice.
So we're going to have to generate this and using our JavaScript code in order to do that.
So first of all, we need to have two container areas for the dice.
So let's construct those two areas and we're just going to create them separately.
We'll have area one and document create elements and the element is going to be a div.
And then we're going to do the same thing for Area two and also a div and then also using the play or
the play area we're going to spend.
Both of the dice, so we have an option here to add in a mean container for this element and we can
do that or we don't have to.
So it's up to it's up to us how we do that.
We just have them both floating beneath or we can have the main container area.
So if you do want to add a container, we just need to create another element and another device so
that we can contain this content that we're going to be applying the styling so clear area append container
and then within the container.
We need to append area one and container of hand, area to and we don't have any content in them yet.
So let's add in some content.
So area one text content.
First dice, and we're going to be updating this visually, and that can be for the second days.
So this is just so that we see what it looks like.
I want to add in some borders around those elements.
So let's create a function to add borders.
So call it function at borders, because we do have two elements.
So whatever element we want to add a border to, we're going to select the element that gets passed
in style.
Border and one thick solid, I will just do a black border, we could also make it more dynamic.
We could pass in a few other options style and we'll also add in some padding to it.
So 10 packs of padding.
So let's add borders to each one of those elements.
And add in boarders and then we can also do more complex styling if needed.
But also let's update the font size so style font size and set the font size to a one point five.
So this is just expecting a string value to be returned.
So we refresh it and we've got the two font areas.
So I also want to set some more styling where I want to set the width of each one of these and I want
to equal that width to be 50 percent.
And we already are going to have a problem because we do have a border, so we can just update it to
40 percent.
And also, let's take the elements and style float and what's left floated, so that way they're going
to be in line with each other.
So we've got our first base, our second base.
Let's set up an element.
Style, height, and let's equal rights to be able to do 300 pics.
So maybe that's a little bit too big and actually, instead of guessing, we're going to just calculate
whatever the witness because we've already said it to 40 percent so we can take that element and use
its offset with value.
So it's going to return back the offset with of the element.
So when we resize, we see we get a height of one hundred and seventy.
If we resize again, we get two or nine.
So because it's slightly bigger, so.
The size of it is now based on how wide of the screen we have it.
So let's go back in, and that's setting up the two dicey areas, so now we have to populate it with
some data.
And what we want to do is we want to calculate out what values we need for having.
The different dice, and we also want to add in the ability to roll.
So let's first set up the event listener for Button.
So let's go down here and take button.
We're adding an event listener and the event is going to listen for a click.
And whenever it gets clicked, then we are going to be rolling the dice.
So we want to happen when we roll the dice.
So what we want to do is we want to add content into text area one and area two, and we also want to
roll random values for those.
So let's take the we create a function that's going to roll value and it's going to roll a value into
each one of those.
So we've got area one and area two.
So we're going to just add in values into those and we're going to run this function.
So it's going to roll of value.
So it's going to assign a new value to each one of those.
And then we can use the console log and use area one.
And I just put whatever value is going to be.
So we're going to update the area objects with vowels, with values.
And so we're going to do over here.
So let's select area one because it's a global object and use the math random and order we want to do
with math.
Random Wanniassa, use the math for.
Actually did the math floor, so actually we're getting the math random and the math or just needs to
be reversed there.
So it's in here is a math random because the math random itself.
You can see in the console what their math random does is when we go into the console, type in math
random, it's going to turn back a random number.
So if we want to multiply it by six, because we've got six days, so it's going to turn back a random
number from zero to five point nine nine nine.
And that means that we also need to time that by six and then we need to add one to it.
So we also need to round this down to the nearest value.
So that's what math floor is going to do, or it's going to round it down.
So multiply it by six and we're going to add one.
And we can do this exact same thing for Area two, so it's a sign values to those.
So let's see what happens.
We roll the dice and now we're getting the random values being shown in there.
We can also right now, we can update what is contained within the text content area for these elements.
And of course, we are going to be generating out what it's going to look like, dice, and that's going
to be all using JavaScript.
So we can really simply just kind of do this where we've got the area one and the area two and getting
the area to value.
So the VAL is just going to be part of that element object.
So it's not already a predefined value like we do have for tax content, but this is one that we've
just created.
So it's going to sit within these objects and it's kind of hidden away so we're not able to see it.
So now whenever we roll, we're going to get the values of the roles being shown there.
So we want to actually generate out what's going to look like dice.
So it's going to be a little bit more complex.
And for that, we're going to have to update the entire HTML.
So let me update these to update the entire HTML.
And we're going to create a function that is going to generate what's going to look like a value on
the elements and creating the value Jen Dice.
And it's going to need a value coming in.
And so it's going to return back the HTML content for it.
So using the generating that those values.
And for here, we're going to return back some HTML content and for out we're just going to return back
to the value of the day's.
So it's still returning back those value, so now we want to generate some HTML for this.
So next, let's create what the dice are going to look like.
So depending on the dots, so for the dice, if you will create a multidimensional array and then within
here we'll have what we want the dice to look like.
So you need to create six of those.
So when we think of how this is going to look, if we think of it in a grid like format where we've
got one, two, three, four, five, six, seven, eight, nine across the grid, we want to what values
do we want to color in, depending on what this looks like?
So let's do five for one and four.
Number two, we want to color in one and nine.
For number three, we want to do one, five and nine.
For number four, we want to do one three.
Seven and nine, and that's four, so five is also going to have the center dot colored in.
So one, two, three, four, five and I've got one extra array here.
And for six, we're going to color in everything so all of the spots on the dice are going to get colored
in.
So that means that four and six and seven, eight, seven and nine are going to get colored in as well.
So let's add these and coloring these in.
So now we've got returned value for the array and we need to associate the array value with whatever
value is being passed in here.
So let's make a quick adjustment to here and we're not going to add the plus one because arrays are
zero based so that whenever we're generating these values, we've got the winner.
And of course, we can add in the plus one.
If we need to of so right now we're just generating these.
Random values.
And then we're using these to make sure we've got what looks like dice being put put, so let's loop
through.
That X equals zero, and while X is less than nine, X equals X plus one, and this is where we're going
to construct the HTML that we're returning, and that's going to be the estimate that we're going to
return.
And then just below, we're going to do HTML plus HTML and close off the div.
So let's construct the what we want the elements to look like.
So we want to have a series of span's there and they got to be 33 across.
We also can select which pattern we want from the base view.
So let's do that first or take the dice view and check to see what pattern we have.
So just call this temp array and associate that to Docx view and we'll pull back whatever value we have.
And right now, I can add that to the HTML just so that we can see what's being output or what.
Actually, we'll just put it into the console.
So console log and have the temporary array.
So this is the array for whatever dice value we've got.
So roll the dice.
So we've got a four and a six and these are the patterns that we want to output.
And of course these numbers are one less because these are going to be corresponding to the value without
the plus one that we just removed.
So we know what we've got, what we want the pattern to look like.
So we want to check to see if value is included in the array and as we loop through and add in the span's.
So let's do that or we've got HTML equals HTML plus spane and close off the span.
So we roll the dice and we get these spans.
So I want to also apply some style to the spam.
With 33 percent and update the display in Line Block, we could also create a class for this and that's
probably going to be a better option for us to just create a class for these.
So right now, we're just adding in the axis and then we'll update and we'll create a class and we can
apply the class.
So what we want is X to show on the ones that we want it to show on.
And the way that we do that is we can check to see if it's in the array.
And if it is, then we add that value in.
So let's tamp array includes.
And the value that it includes is going to be X and we're actually.
Have these numbered so we don't have starting at zero, so let's update this and it should be one to
10.
So if it includes X, then we're going to add this value.
And if it doesn't include X, then the HMO value is not going to have anything.
They're just going to have a blank space.
So see what that looks like.
So we roll.
So the first value.
Is going to be a one, and the second value is a four.
So let's create a style, and I know I said we want to strictly do it with HTML, so, of course we
can add in the additional style properties where we could have a height.
So but we said up to 100 pics, so we have predefined widths and heights could be a little bit easier.
So 100 picks.
And also let's do one other update as well.
So I'm going to pull all of this out so I don't have to keep updating them.
And I'm going to do it just outside where I'm going to update the HTML with whatever value we've got.
And I'm going to set that using the template literals and whatever the value is that we're creating.
So let's create a temporary value and just set it to be blank and so that we can use this temporary
value and add that into the code.
So it's going to add that into the HTML.
So this way we only have to reset the temporary value and just leave it as a space.
So only if the temporary value includes, then we'll update it as an X.
So let's see what that looks like.
The Senate looks like we've got a syntax error.
So in that unexpected token line 44.
And that's because of brackets, it automatically closes that sort added in the extra Bartik.
So let's see what's happening here.
So these are supposed to be in position one and nine, so right now it's let's see what's happening
here.
And it's and that's because our main container should be set to 300 pics, so we shouldn't be creating
it dynamically.
So let's update that as well.
So instead of this and this is going to sit with to be 300 pics, and that's why that is not fitting
properly inside of there.
And then we can also set the height to 300 pics.
I'll leave the calculation in there for your reference.
So if you ever do want to calculate the value dynamically, you can do that as well.
And L style, let's update the background color.
And I said it to Hex Colors or DDD let's see what that looks like.
And so now we're quite a bit bigger and I do have the screen zoomed and that's why it's coming in so
big.
So let's try to roll the dice.
So we got a two and then we got a nine, so they took up a little bit more space than I was expecting.
Let's make the final adjustments and instead of outputting a value, this is going to be the background
color.
So instead of having an X there, we're just going to keep that empty and just have just a blank span
and we're going to resize the width and the height of it.
So, again, we're not going to need an X, but how about we include a color for the background color?
So let's set the width and we've got 300 picks to play with.
So let's do 90 and 90.
So give us an option to do some margins.
Let's also add in some other parameters.
We've got the border
radius, so that will turn it slightly rounded.
But we did 20 picks for that.
And then let's lastly the background color.
And now this is going to be whatever the value of the temp file was.
So we've got temp Vall there.
And also, one other thing, let's go ahead and add in a margin.
So two margin sounds just about right.
So now let's go back out and we'll try it since we were old ones were older one and a five, a six and
a three and a two and a one.
A three and a five.
We can see that in that output there.
So that's it.
So we were able to complete the dice in the rolling of the dice, all using JavaScript.
And also this probably looks better as white, so make sure that it also matches the background.
So let's update this background to be white as well.
So refresh.
So there's our dose.
And also, if you want to make the border slightly and style, and these are just some finishing touches
of border radius, Stu picks for the border radius.
So then the entire dice are going to have border radius around it.
And we might also even want to do a little tweak on the size.
And you can make whatever adjustments you want, so making it fully dynamic and sizes, quite a bit
of a challenge, so it's a little bit easier just to do it this way.
And also, let's create some margins so that they're not right next to each other, so creating Tepic
margin, so that will give us some spacing between each one of the days.
So there we go.
We've completed creating the dates, all using JavaScript.
Now it's up to you.
Have some fun with it, customize it and make it your own.