We're almost ready to build the calculator, we need to start setting some JavaScript.
First of all, I want to do is I usually like to grab the elements into an object format so that we
can make use of it as needed within our code.
So this is our main calculator.
And using document queries selector, I'm going to select the element with the class of my cowl and
that's going to bring that element into a usable object format.
And that's always a good idea to just do a quick check to make sure that you do have the element that
you want to make use of and utilize.
So the thing that we need to do, we need to set some variables and these are const they're not going
to be changing.
So this is the key layout.
We can call it Mikis.
This is an array, but it's going to have arrays within it as well.
So for each roll of keys to the first row is going to contain keys of one, two, three and the next
row.
So don't forget to separate these arrays out.
So the next one is actually this is going to be a plus sign.
This is not a for the plus sign.
So this is four, five, six on the keypad of the calculator and then the next one can be a minus sign.
And this essentially is how your keys are going to be laid out.
You might want a different combination, but I think this one is going to be a fairly standard one that
gets used.
This can be for multiplication.
So Asterix for multiplication.
And then let's finalize this with the last straw.
So we've got a C for clear.
We've got a zero four zero.
We've got an equal sign for equal.
And there was one that we're still missing.
So we're missing the backslash, which is the divide, Bill.
So all of our available keys that we need.
And we also have a series of operators that we want to use so we can call them my operators or operators
where we want to call them.
And then this is where we've got the actual operators that we are going to be using within the functionality.
And that's up and coming as we build this application out.
So make sure that they correspond with the keys and we can save that.
So let's refresh, make sure there's no errors and we're ready to build our application.
So what I usually like to do is make sure that the dorm is loaded so the elements are loaded.
And this is the same thing that's used when you use Jeker.
If you're familiar with Chickory, where we've got our document ready.
So we're adding an event listener to the document object.
And the event that we're listening for is dorm content loaded.
I know it's fairly long, but this is the object that gets loaded when all of the dorm content is loaded.
So basically at this point, you're ready to start interacting with the dorm.
So always a good idea to include it, just to make sure that everything is loaded properly.
So once this loads, you're ready to start building out your calculator and we're going to start out
by setting up creating a div.
So this one is going to be the output area.
And if we want to have it as a global object, we can set a variable that's going to be just globally
sitting as my output.
And then within our function we set up that output and using doch create elements.
So this gives us the ability to create elements dynamically and JavaScript and our console log out the
value of my output so we can see that we are creating an element.
So see, that element is being created in the console and right now we don't see a whole lot.
It's just a div that's been created.
So we need to add some properties to it and we want to start this my output and that's its inner HTML
and give it in terms of zero.
So calculators usually have a digit and that's going to be zero.
We can also take that my output object that we created and we could add a class to it.
So using the class list a method, we've got a few choices we can add, remove toggle.
So in this case, we want to add in a class and that class that we want to add in is output.
So let's refresh take another look at it.
And so now we've got a div with a class of output and inner HTML of nothing.
So next we need to append it to our calculator object.
So that's where we can take my calculator object.
And using the append child method in JavaScript gives us the ability to add elements to other elements.
So the element that we want to add is the output object.
So let's see what that looks like.
And there we go.
So now we've got our screen for our calculator.
So it's starting to look a little bit better.
And of course, coming up next, we've got to loop through the keys and add in all of the keys so we
have something that actually looks like a calculator.
So, so far, so good.
We've got a screen.
Go ahead and add this into your project.
And as you can see, if you want to apply the styling now, you can actually visually see the screen
so you can adjust some of the output styling that we created by default in the beginning or you're.
OK, to go with what you currently have as well and then update the styling afterwards, so whatever,
however you will prefer to approach this, either way, we've just got our screen.
And coming up next, we're going to add in the buttons.
So go ahead and create an element dynamically.
So create a diff, update some content inside the div and then add a class to that div.
And then lastly, append it to your main calculator object.
And coming up next, we're going to build the keys.