Name: Build A Calculator With JavaScript Tutorial
Uploaded: 2020-03-28T16:56:35.000Z
Duration: 38 min 50 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

To-infinitive

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.

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.

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.

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.

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.

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.

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?

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.

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.

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.

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

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.

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.

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.

Subtitles ListPlay Video

Build A Calculator With JavaScript Tutorial

entire

essentially

bunch

period