Welcome back to Web does simplified.

In today's video, we're going to take a look at making this simple calculated using plain vanilla JavaScript and modernity is six practices What's get started now to get started.

Let's look at the basic functionality of our calculator.

We can add numbers just like this.

And if we want to weaken multiplying numbers, any of that stuff works the delete key.

We just remove one character from my list here.

All clear.

We'll get rid of everything.

And of course, we have the ability to use decimal numbers as well for addition, multiplication, subtraction and so on.

We also have the ability to chain operations so you can say one times 36 just quit times again, and it automatically put it up here.

We could do it on a multiplication and so on.

So let's get started coding this Over here.

I have visual studio code open, and all we need to do is create some finals.

First, we want an index dot html, which is going to be all over each team.

L will create a stiles dot CSS for all of our styles in a script dot Js which is going to contain all of our shop A script.

Next.

We want to go under index dot html file here, use exclamation point enter to get our boilerplate html code here We could just put calculator as the title and we want to import our script tag and our style of feet.

So to do that, we just had a link here first dialogue sheet and you just there a trip is going to be styles that CSS and we need to tell the browser that this was a stylish sheet here.

Perfect.

And then we can do our same thing for a script tag.

The source here is going to be equal to script Ah Js And we want to make sure defer that.

So what loads after our entire pages parts?

Now that that's out of the way, we can save this here and we can open this up using live server that we can have our page open right here would not be in on it.

Of course, the first thing we want to do is actually add in all the different elements for our calculator and we're going to use grid to lay everything out nice and need.

So what we want to do is you wanna have a single did, which is going to wrap everything and we're going to give it a class here, which is going to say calculator grid, that's lower cased and inside of here, we're going to put our different elements.

We're gonna have the screen as well as all of our different buttons inside of her application.

So the first thing we want is our output screen.

So we'll say instead of here we have a div.

We're just going to have a class of output so that we know this This is our output.

And instead of here, we're going to have to do is because, as you see, when we add something, multiply or divide it, it goes up here in the smaller def and the other numbers show up here in this bottom def.

So we're gonna have a first if which is just going to be clear with a class that's just going to have a class of previous operations.

And the reason we're calling this is because this is whatever is up here, whatever we typed in previously and we're going to have a second if which is going to look just like this, but it's going to be our current operated.

So whatever we're currently typing, I'm here.

Then after this output, def.

We have over different buttons that we want to create.

So, for example, we have a button here, and we want this button to have text a C for all clear.

And we also want to add a class to this button because you could see this button is twice as large as all the other buttons.

So which point at a class here, which is going to say span two?

And this, instead of our CSS will make sure it takes of the space of two buttons.

Now it's copy that down, do the same thing for delete, and in this case we don't need this span anymore.

Stop it down again and we can do the week here.

And easiest way to do delete is just copy the symbol that we have from application.

You can also google the copy this symbol and just paste it in here and now we don't have to do any special code to go onto the next road because we're using grid.

So again we could just copy this down change toe one, two, three and so on were going to have more education here.

And we're just going to do this till we get all the way down to our equals button.

And now that we're all way down to the equals button again, you want to make sure that that class fear, which is just going to say, span to says his equals button also takes up two rows just like the all clear button does.

And now that we have all that done, that's essentially all the HTML we need for application.

If we go into application over here, you can see that we have already from buttons being shown up.

But clearly there's no style is being applied to them.

So let's jump into our styles that CSS and start styling our computer to look just like this.

The first thing that I like to do is select all over elements, including our before elements and our after elements just like this, I want to change the box size into the border box, so that way it's easier to size or elements.

Also, I want to set our fun family here so that it's set on all of our different owners.

In this case, I'm going to use a fund called Gotham Rounded which you may not have installed on your system.

So you can choose any fund that you like the look of and we want to apply a default front toe fall back onto so on.

Our case will default to sand.

Surf is got around.

It is not found.

Next, we want to set the fund, wait for our entire application.

And in our case, we're just going to use a fondly of normal.

Now that we have that done out of the wife, we go over here, we can see already are fun, has changed slightly to be this cop and rounded fund.

Next thing we wanna do is actually set up our background because that's going to be fairly straightforward.

The next thing we want to do is dial our background.

In our case, we're just going to select the body element and we're going to first remove all padding and margin so that our background fills our entire screen and then we're going to apply a background here, so Here's the background keyword and we want to fly a winning ingredient.

We won't apply this brilliant to the right so that were First color is going to be the car on the left and our second color is the color on the right.

So we just wanted to find our two colors here.

In our case, we're using 00 a f f as our left side color on our right side.

Color is just going to be a green color, which is 00 ff six C.

Now, if we say that you go back to our page over here, you see that we have ingredient going all the way across, which is perfect.

The next thing we wanna do is style this grid that we have right here.

So we think they're strode out here and select that calculator grid class that we defined earlier, which is wrapping all of our different buttons and elements.

Did you want to make sure that our display here except a grid and we want to justify the content into the center of the screen and we want to align the items into this side of the screen?

That way, everything is centered on.

If we say that and look back, you can see that everything is centered.

But it's not centered vertically, and that's because our catheter grid doesn't take up the full height.

So we want to set up.

Hey, aren't here a minimum life which is just going to be 100 view h, which is just essentially saying it's going to fill 100% of the fight all the time.

Now we say that you see that everything is centered in the very center of our screen and spaced out in order to make our buttons actually look like our buttons over here, though we want to use grid template columns, Ingrid template roads.

So first we could define our columns.

In our case, our columns are going to repeat.

We're going to have four columns and columns are all gonna be 100 pixels wide.

Next we want to do the same thing.

But for our template Rose.

So we're going to have our rose here on our first rope.

This output is actually congrats large.

Is it needs.

If we input a very large number here, for example, you can see that this grows to fit that large number.

So we wanna have first the value, which is going to be a min max value, which has at minimum, we want this to be 100 and 20 pixels tall, but at a maximum, we want it to the auto, which essentially says as large as it needs to be to fit everything.

Then after that, we want to repeat five times the value of 100 pixels because we want our buttons down here to be exactly square.

And as you can see, we have five different rows of buttons.

Now, if we say that, go back to review over here, you can see that everything is starting to get laid out.

How we like it.

In order to properly position our buttons, the first thing you wanna do is actually select them.

So we can just do that by selecting all the buttons inside of a grid.

And all they wanna do is change your cursor to be the point, your cursor, so that when we hover over them, we get a nice point of.

So as you can see here and next, we want to change the font size so that It's quite a bit larger and easier to see for use to R.

E.

M.

We want to give it a little bit of a border.

In this case, we're just going to use a one pixel, solid white border around all of our elements.

And if we look over here, we can see that we have that one pixel border around everything.

We want to remove the outline from these buttons.

This is just something that browsers put in by default and we don't actually need.

And lastly, we want to apply a background color to these different moments in our case, or just going to fly a slightly opaque background of completely white.

So to 55 to 25 to 55.

But it's only gonna be 75% opaque.

Now if we say that and go back, you see, our buttons are already starting to look like the buttons over here.

The last thing we need to do to these buttons is actually make us so we hover over them.

They change color because, as you say, over here, these buttons changed to be almost completely white when you cover.

So in order to do that well, again, copy this selector down, but we'll use the hover portion of it, and we want to just change the background color.

It's going to stay the exact same white, but we'll change the pace.

It's a here to B 90% and now if we go back over and hover over button, you see that it turns to this white color now in order to fix our buttons so they don't look quite so strange.

We just need to change our wine items to align content because we want to line the entire content of the script in the center, not the items themselves.

Now, if you say that you said our buttons air filling out the space that they need to, you'll notice this all clear button is not taking up, too with spots, and this equals Button is also not taking up two withs.

So in order to fix that, we can just use that class.

But just fan tube and only need to do this said that we want our great column here to span two columns, and if we say that you see automatically, all clear and equal are now span in two columns, But our output, which is this singular section right here is not properly style.

So let's work on styling that next.

In order to make it easier to see what we're styling, I'm going to add a little bit of dummy text in here.

So we're gonna set 1 23 plus and down here, we'll have 4 56 That way, we have a little bit of dummy text we can play around with when we're doing our styles.

So the first thing you want to do the style are actual output element has a whole This, as we remember, is this black ish looking section right here.

So in order to make it spanned the entire wit, we have a really nice trick, which is called a great column again.

But in this case, we want to say we want to go from calling number one all the way to call number negative one, which is essentially just the last column.

And if we say that and go back here, you can see this now fills the entire width of our top row.

Next thing we want to do is change the background color here.

So we could change our background core to be rgb a again.

And we want this to be black this time.

And with that same 75% transparency And already you can see this is starting to look a lot like our calculator over here.

Next, we want online these elements inside of our container and easiest way to do that is going to be using flex.

So we'll change our display here to flex well, Einar items on flex end because we want these to be on the right set of our container over here.

And we also want them to be spaced out as far apart from each other.

So we're going to use to justify a content we want to stay space between.

This is going to put as much space between our elements as possible.

Now we can say that and you can see that our elements are being lined up side by side instead of vertically.

So we want to change our flex direction to be that we could just stay for extraction column so that they wind up vertically instead of horizontally.

Also, you noticed everything is pushed up right to the edges of our container.

So to change that, we're just a little bit of padding card container, for example, 10 pixels.

Now, as you can see, everything is not being pushed up to the edges of the container.

And also, I'm gonna change the space between to, say space around instead because it'll push our elements a little bit closer to each other and a little further away from the top and bottom of the container.

The last thing we want to do is as you remember, over here, things wrapped as they get too long.

So in order to make that happen, we need to use what's called word rap, which is going to allow us to say where we want to break our words.

So we can say we want to be able to break a word in the middle of it.

So not just a the end of a word or during the space.

And we also want to put words break here so that we want to be able to break all words now.