Our calculator so far does not really look much like a calculator, so let's fix that.
And in this lesson, we're going to update and build the keys.
So the early lesson we set up, how the keys need to look.
And this is an array with a bunch of arrays inside.
So multidimensional array where we've got an array with arrays inside.
And each one of these arrays represents another roll of keys that we want to add into our project.
So let's build those.
So starting and we're going to create a loop.
And because this is an array, we're going to loop through all of the elements within the array, all
the items in the array.
So this is within the Mickeys array using the array length value.
So this is by default within any one of the arrays.
Those have the length with that as well.
So just utilizing that within the loop and then as we loop through, we want to create some dips.
So let's create a div.
Just do let div.
And just as we created the screen, we're going to create some elements on the fly using JavaScript.
So using the create element method in JavaScript allows us to create elements dynamically on the front.
So we're creating a div.
So all we need to do is specify the type of element that we want to create.
This div is going to be our role, so we need to add a class to it.
So doing class list are going to add a class and this is one of the classes I still need to create.
So this is a role.
So let's quickly add that one and this one is going to be having a width of one hundred percent.
So it's going to go all the way across and display block, which by default is because it's a div.
But we're just going to add that in anyway.
So now we've got our main container roll and we need to still build out all of the buttons and we can
do that by looping through.
So creating another loop here where we're going to loop through all of the buttons we can use of different
variables.
So in this case, let's use X, and this is going to be indicating all of the different keys.
So as we loop through this array, we also want to loop through the array with in the array, and that's
where we get my keys arrays race.
That's the main array.
And we've got that mean array within the Y object and we want to loop through and get the length of
each one of these ones.
So they're going to have their own lengths to it.
So that's where we can get a length from it.
So a console log out the value of my keys and X because remember we're looping through so we've got
a loop within a room and we also have arrays within arrays.
So we're looping through the main array using the Mickeys array.
And then as we're iterating through, this is the next roll value and this is where we're getting that
role.
So it's referring to this array inside of the array.
Well, the first one is and this we're being able to turn back with X.
So you see that basically what happens here is that we see each and every one of the keys.
So that means that we need to create the buttons.
So let's create those buttons.
We can call it B10.
We could call it another value as well for the variable.
And we're doing that again, the exact same thing where we're creating an element on the fly.
And this one as well is going to be a div and then taking that button.
And we do have those values of the inner HTML that we need to set.
So it could be Interreg Temel or inner text.
Usually I do prefer to use in our HTML, but you could just as easily use in text as well in this case
because we're not actually applying any HTML inside of the element.
We also have a class that we need to add.
And this again, it's the same format where we're adding a class and the class that we're adding is
B10, and this corresponds with the class that we set earlier that has the button class.
So these are the buttons that we're adding.
And then we also want to add in something different in this one.
We want to add an event listener.
So want those buttons to be clickable.
And whenever they get clicked, we're going to invoke the function called button hit and we'll take
care of that upcoming as well.
It's we're looping through take that mean parent div penned a child to it and the child that we're spending
is the button that we just created.
So having every time we loop through and all console logout, whatever div looks like so we can get
a better sense of what it is that we're outputting here.
And I'll comment that one a placeholder.
So the button hit function and this is just a blank function so that we're not throwing any errors.
Now you can see that we're creating each one of these rows.
The rows have all of the buttons that we needed to add in.
So there's one last thing that we need to do and that's appending the buttons to the calculator.
So just as we appended the output screen, we're also going to attend the div.
And when we refresh, we see we've got all of the buttons placed and I forgot one of the properties
within the button.
So let's update that.
And this is display inline block.
So try that one more time.
So there we go.
So we have something that looks a whole lot more like a calculator and we're ready.
To start introducing some of our JavaScript functionality, and these are clickable as well, so whenever
we click over these, you're going to see that we are invoking this function.
So for now, so you can see that whenever I click these, it's actually passing in and it's doing something
within the function.
So go ahead and build out the visual part of this project.
So build out the visual calculator and you can be ready to move on to the next lesson.
We're going to introduce the functionality of the button.
So that's still to come in the upcoming lesson.