Build A Calculator With JavaScript Tutorial - VoiceTube: Learn English through videos!

Subtitles section Play video

Hello, everybody.
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.
Before 56 became too long, for example, it would just wrapped the next line as it does over here.
The last thing we need to do this style are two different text illness that we have.
So in order to select those, we can first say inside of our output element, we want to get the previous operations and we want to change the color of this to be a mostly white color.
So we'll say our G B A 2 55 to 55 to 55 again 75% of a city.
So it comes across as a little bit of a great color.
And we want the fun size here too.
The 1.5 rpm.
We say that you said it gives us a nice light gray color which is a little bit smaller than what this textile vehicle.
We're done so we can essentially copy this, paste it down, and instead of previous, we have our current opera, and our color here is going to be purely light instead of partially weight.
And our font size is going to be 2.5 now.
If you say that you see the stylist for entire calculator are essentially done, and they worked almost exactly the same mess over here.
Now that all that's done, we can finally get to the interesting part, which is coding up the job.
A skirt which will lower calcula actually work when we cook the buddies to make this easier, which removed this place for the text that we added when we did style sheets.
And let's open up our job a script right here and start working now.
The first thing that we want to do is select all of our different numbers all of our different operations over here, our operations as well as our clear button delete button and all the other miscellaneous buttons.
But in order to make that easy to do, we want to just put some classes into HTML.
It'll be easy to select by and since I don't want to mix our style and class is with our Java script what use data attributes instead of classes so we can say data operation.
And essentially we can select this data attributes in our JavaScript to say we want to select all the data operation buttons.
So what's copies down toe all over different operations, plus and minus?
There we go.
We could do the same exact thing for numbers, so we'll say data number and we're going to copy this down to all of the different numbers we have on the reason again.
Why I'm using data attributes instead of classes is because it's easier to see what parts of the HTML are being used by Java script and which parts of being used by the actual CSS.
And again, I put the number class here on the period because the period acts just like a number for the focus of our calculator.
Next, we want to do one for equals.
Button soldiers say data equals we're going to have one for delete data delete and lastly are all clear.
So data clear.
And we also need to add these to our previous offering and current operate.
And again, I don't want to use these classes since they're already used by a CIA asset.
So we'll just put a data previous operations and again, a data current operation down on this one.
And that should be all the changes we need to make your HD milk to be able to select these elements in our drama script.
Now inside of here, let's first get some constant variables which are going to be all of our different buttons.
So we have a number buttons.
We could just clear that by saying document dot query selector all which is going to get us all elements that matches certain string.
In our case, we select the data attributes which must be inside of brackets.
And we say we want to select data number.
This is going to get all the number elements.
We could do the same exact thing, but for Operation Buttons and this is just going to say data operation.
And of course, we want to get our smaller buttons as well.
So we came down here and we can say We want to get our people's button.
This is just going to be a single button.
So instead of doing document that Queer Selector all we're going to use just query selector, which will get a single element for us instead of multiple again we can save data equals close off that square bracket.
We want to do this a bunch of other times.
We want to do it for the delete button that we have.
Do it for all clear button and of course we need to get our previous operation and this is not a button the sexual text element.
And we want to do the same thing, but for our current offerings.
And we need to go over here.
This is dead equals data, delete more clear.
And this is going to be the previous and lastly Theo current operate.
And now that we have everything selected, let's actually think about how we're going to create the Java script.
It'll make our calculator work as it does over here.
The first thing that we need to think about is, how are we going to store all the information for what's number currently type here.
What number is currently tied here, What operation is it?
And I think the easiest way to do that is to use a class.
We're going to create a calculated class.
I like to do these at the top of the file is possible.
So let's get going here and create a class.
We're just going to be called a calculator, and inside of this class, we're going to put a constructor which is going to take all the inputs for it, as well as all the functions for our calculator.
So are constructed is essentially just going to take a previous operation text element and our current operate text helmet.
And this is because we need to know where to place our display text for our calculator.
So we could just say, previous offer and text element and current and inside of here we can set some variable support his class so they could just set these just like this and we could do the exact same thing.
That current text element and this essentially gives us a way to set these text elements inside of our calculator class.
Next, we want to think about all the operations are calculator class can come perform.
We have the clearing function, the delete function, the adding a vin number.
Also, we have the equals function and the adding of an operation.
So what's defined from these functions?
The 1st 1 we mentioned is clear, and this is just going to clear out our different variables.
Next, we're going to have our delete function for removing a single number.
We're going to create a function called upended number, which is essentially what's going to happen every single time a user clicks on a number to add to the screen just As you see over here, you click a number and it adds it to the screen.
Next thing we need to do is to have a choose operation function thistles.
What's going to happen any time a user clicks on one of these operations over here and this function needs to take the particular operation that they use your selected and same thing with the number function.
We didn't actually pass the number the user selected last two functions that we need to have is we're gonna have a computer function which is just going to take our values inside of our calculator and compute a single value for what we need to display on the calculator.
And lastly, we need to have a function that allows us the update.
Our display was called This update display.
This is going to update the values inside of our output.
And with these operations, all the find, let's think about the different properties are calculator needs to store.
We need to know the previous operate the user entered the current operate that they're working on and the operation that they selected, if any, so inside the clear function, all we need to do is remove all of these values.
The first thing we could do to just say this, that current operation, which is just going to be what is defined by this number right here.
We just want a default this to empty string.
If they clear, we want to do the same thing for the previous opera and again defaulted to empty strength.
And lastly, we want to change the operation to be undefined says they don't have any operations selected if we clear things, and as soon as we create our calculator, we want to call this function.
That's not clear.
And this is because we want to clear all of our inputs and set them all to the default values as soon as we create a new calculator.
So now that we know all the different things that are calculated, induced, defined by our functions and all the different variables that it can hold what's work on hooking up all of our different variables down here and making them operate on our calculator object?
First thing we need to do is create a calculator, so we'll just credit calculated here.
We're gonna set the sequel to a new calculator, which is how you define classes, you say new all by the class name.
And then he passed everything from our constructor into it.
In our case, we need to pass it the previous offering text and the current operate text element, not with past those elements in.
We can actually use this calculator object, so to first use it.
Let's go with our number buttons.
We're going to select our number buttons we want to say for each because we wanted to look over all these different buttons and for each one of these buttons, we want to add event listener so we can save button dot event listener.
And this event listener is going to be whatever we click on the button.
We want to do something on our case.
All we want to do is we're gonna take our calculator on.
We wanna add the number so we'll say pen number of whatever is inside that button.
So we'll say button dot inner text, and this is just going to be eating 1234 etcetera all the way out of the decimal point and zero.
And once that's done, we need to call calculator that update display on this way are displayed.
Values up here will be constantly updated every time we click on a button down here.
And easy way to test that everything we've written so far is working.
If we scroll, we can change our update display here to say this dot current operate text on one, not in her text.
So this will allow us to set the text of this value up here in the white.
We could just set this equal to our this dot current operating just like that and inside of our pen number instead of actually attending the number, we could just change the current offer and t pull that number.
Now, if we go over our calculator here and click on a number, you'll see it shows up over here, and no matter what number we cook on a little show up there.
But if you click on an operation, for example, or any of these other buttons that our numbers, it won't do anything.
So now we know that are pending number function is properly cooked up a little over buttons, and our display is probably being updated every time we click on a button.
And since we know that a pen numbers working, we might as well actually write the A pen number function.
So essentially only need to do is we want to update this current operate value and appendix number that we get passed to the end of it.
So we can just say this dot current operated.
We want to convert it to a string just in case it's a number this way.
We can easily upend something the end by using plus, and we could just take our number here and convert it to a string as well.
And the reason we need to convert everything to a string is because Java script will try to add these as actual numbers.
To try to do one plus one equals two instead of one plus one equals 11 because we want our numbers to be upended and not added.
Now, if we say that we click on a number, you'll see that they constantly get added to the end of the list.
But for example, period keeps getting added, and we only want to allow our user toe add one single period to this output section, so to check for that.
We could just say if the number is equal to the period symbol and we want to also check that we don't already have a period.
So we could say that if this string of numbers here includes a period just like this.
So if we typed the period key and we already have a period kid, we just want to return, which essentially will stop our function from executing any further.
And we won't actually attend to that number.
Now, if we say that we go over here and we try to add multiple periods, I'm clicking this and all it does is at a single period.
And no matter when we try to quit that period, keep it will only allow us to that one.
And this is the FN number function completely done without out of the way.
Let's go down here, copy this and do the exact same thing.
But for our operation buttons.
So we can change this to say operation buttons.
And when we won't click on this, we want instead of a pendant number, we want to choose an operation, and again, we're just going to pass the text of the operation that we're choosing and update the display here on out up in our choose operation function, we need to do a little bit of fancy and math.
If we look over here, clear out all of this.
Let's say we did 22 a soon as we click an operation, you see that this gets brought into a previous operate value and it clears out our current operation to build a typed in a new number.
So what's actually implement that inside of our choose operation function?
The first thing we need to do except the operation, obviously.
So we'll say this stop operation is equal to the operation we passed in that we are calculator knows what operation it needs to use when it computes the value.
Then we want to set the previous operated equal to the current operate.
We essentially are saying we're done typing the current number, so we re cycle that over to his previous operate, and we want to clear out the new current operating.
So say that the current operation is just going to be equal to an empty string, were essentially just clearing out that value.
So now if we say that Go back to our computer here, types of numbers and we clicked.
Plus, it'll completely clear our current operate put into the previous operation and allow us to type in a new value here and the reason it's not being displayed.
It is because in our update display, we're not actually setting it.
So what's competence down and will say that the previous offering text element is going to be equal here to the previous operate.
Now, if they say that I have something that can quick plus, you see that that number gets moved up to the top section, which is great.
We aren't depending operation yet, but we will work on that later when we implement this update display function fully.
You will notice, however, that if we click any of the operation buttons, it'll actually go through and do this even if we have no current value to operate on.
So we need to make sure we add a check in for that.
We actually just want to say that if the current operation, so they can't operate is empty.
So G string just like that, we just want to return, which again will not let us execute any further into her coat.
Another thing to note about this choose operation function is if we look over here and we type in this value, we have a value here.
We have a value up here and we clicked in operation.
It'll actually do the computation, and it'll put over operate values where they need to be.
So we need to have another check in here.
This one is essentially saying that if the previous operations is not equal to an empty string, So if we already have something up here computed and something down here, we want to do the computation.
So instead of here, we're just going to call computer function this dark, compute and then do everything else as before.
And this computer function will update all the variables as we need.
So, for example, was clear this up.
This is our old example.
We say 55 plus 55 if we click equals, it'll say 110.
And again if we say 55 was 55 But we want to divide from that.
For example, you see, it does the computation for 1 10 and automatically pretends our operation here, and this is exactly what this little section of code is going to do as soon as we implement this stock compute function.
And with these two functions completed, we have all the inner workings of how to set all the values and set of our calculator.
All we need to do now is actually work on how we need to compute things as well as display things.
So let's work on our computation.
First, see this.
We're going to take that equals button that we have, and we want Advent listening to it.
In this case again, it's going to be a quick event listener.
It's going to pass in that button, and all this is going to do is come in here.
It's going to call the computer function on a calculator to try to get the computer value, and again it's going to update to display of our calculator.
So now we click equals.
It'll actually call the computer function inside of our code here, so let's work on implementing this now.
The first thing we need to do is create a variable which we're going to call computation, and this is going to be the result of our computer function.
Next, we need to create two more variables have previous variable.
And this is just going to be the actual number version over previous operate operate right here.
So we're just converting the strength to a number, and we're going to do the exact same thing with current.
So here we're gonna get our current operate.
And then what we want to do is we wanna check because if, for example, the user doesn't actually enter anything and click equal, we don't want the code tax free run.
So we're going to check if it is not a number for previous, so we don't have a previous value.
Or if, for example, we don't have a current value, then we just wanna return, which will essentially cancel this function completely.
Then we're going to use what's called a switch statement, and a switch statement is very much like a bunch of if statements chained after each other.
But they allow you to do a bunch of statements on a single object.
So in our case, we want to do a bunch of statements on this operation and inside of the switch, you define your statements by the keyword of case.
And then we put what this dot operation should equal.
So in our case, when we have a plus symbol for the start operation, we want to execute the code inside of this case.
We follow this bias, Colin here, and all the code inside of this case will be executed when this operation equals a plus.
So all we want to do is you want to set that computation variable equal to our previous value added to our current value.
And then we need to use the line here of break to essentially say not to follow any other of the case statements and to just leave the switch statement completely.
We want to do this a bunch of times once for each of our different cases.
So let's pace this down a few times here, I think should be un ended everything.
And we're going to have subtraction, which is going to be a previous value.
My current value.
Have multiplication saying thing.
Previous timers there make sure that's inside the string quotes and again, we're going to have division.
I'm going to just copy this symbol straight from the html pasted in here.
And we want this to be previous divided by the current value.
And along with its statement, we also have the ability to define an L statement which is defined as a default here.
And this default is any time none of these values get executed.
Whatever is in the default is going to be executed on our case.
We just want to return.
Because if none of these symbols match our operation, that means we have an invalid operation somehow.
So we don't want to do any computation Now, Finally, we're computation done outside of this switch statement.
We can come in here, we can set our current operations, which is just going to be equal to the result of our computation.
We set our operation here.
He called two undefined, and we consider previous operate equal to an empty string just like this.
And now, inside of our calculator here were actually able to perform calculations so we can say one plus one equals and we're going to get two right here.
And, for example, if it clears up, oh, actually can clear things up.
And that's because we haven't implemented the clear function yet, so Let's do that so quick.
Now we could just copy this equals code instead of being equals button.
This is just the all clear button.
And instead of calling Compute here, we want to call it clear.
Now if, for example, we have one plus one and they all clear, everything will clear out, which is perfect.
Now, what I was trying to demonstrate is we can click one plus one and include plus again and you'll see it computes to.
And if we clicked, one equals, we get three.
And that's thanks to the code that we wrote up here will be checked if the previous operate already existed and we did the computation before actually doing our operating.
Choosing the last button to implement here is our delete button, and this is going to be really straightforward to implement.
First thing we do is we want to change our current operate, and we want to set it equal to your current operating here Currents, copper and and all I wanna do is convert this to a string and we want to get the very last value from the string and chop it off.
And that's what the slice methods, for We want to go from index number zero, all the wayto one from the end.
So essentially this is going to take all of the different characters inside this string, all the different numbers from the very first number all the way to the second to last number.
And it's going to say that in this new current operate very cool, essentially chopping off the last one.
And if we go down to the very bottom here and hook that variable of so we can take her to be fighting, I spell it properly and instead of clear, we just want to call delete.
Now, if we type in long extreme care and we want to get rid of one of the characters, we just click delete, and it will slowly remove one from that every single time and now at a base value.
Our calculator is entirely functional, but the actual display of our calculator is not that nice.
We don't have any but commas that we'd like to see operates not showing up up here and so on.
So let's go into our calculator and actually change our update display to display things as we would like them to be.
The first thing that we want to do is come in here with an if statement and we want to say that if we have an operation So if the operation is not able to know, then in here we want to display our previous opera in text.
Omit, we want to make this actually a captain, a shin of both our previous operate here and our operation.
So we can just add the operation here so this dot operation and now this is going to be a string that has the operation appended to the end of it.
We say Beth, say 23 plus you'll see up here it says 23 plus and this is great.
But again, we still don't have the actual comma delimited values showing up as we do on this calculator.
If we add in a large number, you can see that it nicely.
Delimit sees values with commas, so let's work on implementing that now.
We can do that with a hoper function.
We'll call it get display number and we'll pass it and the number.
And this function is just going to return that number but converted to a display value for now, we'll just return the number given to it, and we're going to call this function down here.
So let's say this doc get display number, we're going to pass it.
The current operate here, and we're going to do the exact same thing.
What?
We're going to do it for this stop previous operate.
And now any changes we make in dysfunction are going to be reflected in both the previous and the current operate values.
And this function is going to be a little bit complicated.
We wanted first to make a straightforward version of it, and then I'll show you some of the problems with that.
The first thing that we're going to do because you want to set this number to an actual float so we can say here was great, a variable called float number, which would have set that equal two parts float of number.
And this is because our number is actually string and we want to convert it to a number first.
Then we can say that if the float number is not a number, if that's the case, we can just return empty strength.
Since we don't actually know how to form at this number, since it's not a number.
Then if we do have a number, we want to say Return the number two locale string number that too low cow string and inside of here we passed a well cow, which is essentially a language in our case, would has passed English.
And if we say that Gobert archive greater here and type out a long number who notice it's not formatting, and that's because we need to make sure we use our float number down here instead of our normal number.
Now we said that type this out, you'll see, is our number just longer the automatic place in Kamas force and you may think that that's perfect.
But if we clear this, let's say that we wanted to type a decimal place.
I can click this as many times as I want, but it's never going to show up here until I select a different number.
And that's because when we try to parse that decimal place in tow, afloat, it can't be pressed into afloat because it's just a decimal place.
This also has problems for if we want to add a bunch of zeros after the decimal place.
As I click it, you see, nothing is actually happening.
So now to get around that problem we're going to do is we're going to actually split the number we get given in to both the energy part, which is before the desk in place, and the decimal part which comes after the decimal place.
So in order to do that, we're going first guitar string number.
So we're gonna say string number is going to be equal to number two strength and we want to string here because we want to be able to split that string on the decimal character inside of it.
And we may be getting a number or we may be getting a string here.
We're not entirely sure.
Next we want to get the indigent numbers so we'll say, entered your digits so that we know that this is an actual foot and we're going to set this sequel to Parse Float and we want to take our string number.
We want to split it on the actual period character.
So this is going to take our string, turn it into a red.
The first number India rate is going to be the part before the period and the second number is the part after the period.
And what we want to do is we want to get that first part because we want the integer values.
Before that, you can do a very similar thing.
We're going to be for a decimal digits, but we don't actually want to parse this into a float yet because we don't need it to be a number.
Also, we want to get the second portion of that already, which is the numbers after the decimal place.
Now let's remove some of his coat down here, since we no longer need it and we want to get the introduce boy separately.
So we're gonna say in a jury display, and we're going to let us be blank for now, and we're gonna check to see if our energy digits is going to be not a number.
So it is not number.
And essentially this.
What happened?
Any time someone inputs nothing on the screen or in puts a just a decimal place.
And if that's the case, we want her editor display to just be equal to an empty string.
But if, for example, they did enter an injury or value, that's where we want to use that locale string.
So we're gonna set that energy, display people to our engineer digits dot too low cow string, and we want to use English.
And another thing that we want to make sure we do is that we don't have any desperate places after this.
So we want to say our maximum fraction digits is going to be set equal to zero, which means there could never be any desperate places after this value when it gets converted to a string with a bunch of commerce, which is perfect for our use case.
Now that we have the energy to display being said, Let's go down here.
We want to check to see if we have any decimal digits.
So far, destiny of the just is not equal to know what that means.
That the user did enter period and has some members after it.
And if that is the case, we want to return to them the energy display.
So here we have entered your display, and we want to follow that up with a period and all their desk voltages, Summers points that decimal digits here.
And if they do not have any decimal digits, we just want to return to them.
The integer display.
Now, if we stay back and go over to our code here, we type in for example, 123 We put a period.
You'll see that that period actually shows up right here, which is perfect.
And if we put it over anything afterwards, that's working just fine.
Also, if we start with a period, you'll see the period shows up and everything after it will show up just perfectly fine.
And even our calculations still work out just like this, as you can see.
You will notice, though, that our previous operate value didn't clear itself.
So if we go down to our update display, you'll see that we're never actually clearing this value.
If the operation does not exist.
So it is putting a simple else here will say, If this stop previous operations in your text element here, we're going to set this equal to 50 string.
And now if we say that and we do a calculation just a simple one equal, it'll empty out that previous operate value for us and leave us only with our current operate value, which is perfect.
And with that, we have a completely functioning modern JavaScript calculator working in the browser.
If you enjoy this video, please make sure to check out my other projects linked over here and subscribe to the channel for more videos just like this.
Thank you very much for watching and have a good day.