Welcome in this lesson, we're going to be setting up our HTML and success in preparation of building
out a calculator using JavaScript.
Now, of course, we're going to keep all of the HTML and access to an absolute minimum.
So setting up a basic container for our calculator to be able to place that in there.
And then also a little bit of styling to update the look and feel of the calculator itself.
So we are going to be generating most of this dynamically using JavaScript.
So you're not going to see a whole lot of out output right in the beginning.
So let's set up a width and we're going to have predefined widths for this.
So 350 picks and we'll also make the height 350 picks and then background color.
And let's do the background color.
We'll do it a dim gray color and then add in a little bit of padding.
So five picks of padding.
So when we refresh, there's our basic calculator structure.
And I can make this a little bit smaller as well, because we can have a little bit more space here
on the left hand side as we're building the application out so it's more visible.
The other thing that we need is we need an output area.
So this is going to be the screen area of the calculator and we can set a line height for this one.
So how about we do 40 picks and a background color for this and we can set a background color of white
and the text color can be black or green, whatever you prefer.
Height of it is going to be 40 pixels.
So it's the same as the line height.
And we can also set a margin at the bottom so that the buttons there's some spacing between the screen
and the buttons setting up font size.
What we do on point for M for the font size we text align.
So within the calculator, typically the text is aligned to the right hand side.
So text aligned to the right and selecting a font family.
And how about we do Monov space so we have more of a digital type of text output and podding and we
can do eight picks for the left and the right.
So we're obviously not going to see the output quite yet.
And this is one of the things that we're going to be using in our JavaScript up and coming.
We also need to have buttons.
So these are going to be the buttons that are going to be used on the calculator.
So let's do some quick styling on these.
And of course, if you want to see the way these are going to look, you can always add the elements
in on the page and we can remove them afterwards once we create the JavaScript or you can just trust
me and that this is fairly decent format for the buttons.
And of course, you can adjust them as needed as well.
Set a background color.
And so this is the button color so we can do kind of an off-White there.
Their Isar text line can be center.
We want to set the cursor.
So whenever we're on top of it, we get the pointer icon and vertical a line.
We'll get a middle a line that vertical.
And that means that we need to set a line height so that our button has its text.
Exactly.
Center.
So essentially there's all of the HTML and success that we're going to need.
And the rest of the course, of course, is JavaScript.
Where are we going to build this calculator out?
And we're going to use apply these classes to the elements that we're going to be creating using JavaScript.
And that's coming up next.
So go ahead and set up a basic container to add your calculator in and you can create some of the styling
and you can also do that at a later point as well.