Build A Calculator With JavaScript Tutorial

hello everybody welcome back to web dev simplified in today's video we're going to take a look at making this simple calculator using plain vanilla JavaScript and modern es6 practices let'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 we can multiply numbers any of that stuff works the Delete key will just remove one character from our list here all clear we'll get rid of everything and of course we have the ability to use decimal numbers as well for our addition multiplication of subtraction and so on we also have the ability to chain operations so we can say 1 times 36 and just click times again and it will automatically put it up here we can do another 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 files first we want an index dot HTML which is going to be all of our HTML will create a style CSS for all of our Styles in a script jeaious which is going to contain all of our javascript next we want to go into our index.html file here use exclamation point and hit enter to get our boilerplate HTML code here we can just put calculator as the title and we want to import our script tag and our style sheet so to do that we'll just edit link here first dial sheet and we just say our href is going to be styles dot CSS and we need to tell the browser that this is a style sheet here perfect and then we can do our same thing for our script tag the source here is going to be equal to the script j s and we want to make sure we defer that so it loads after our entire page is parsed now that that's out of the way we can save this here and we can open this up using live server that way we can have our page open right here with nothing 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 neat so what we want to do is we want to have a single Dib which is going to wrap everything and we're just going to give it a class here which is going to say calculator grid make sure that's lowercase and inside of here we're going to put our different elements we're going to have the screen as well as all of our different buttons inside of our 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 is our output and inside of here we're going to have to do this because as you see when we add something multiplied or divided it goes up here in this smaller div and the other numbers show up here in this bottom div so we're going to have a first div which is just going to be here with a class that's just going to have a class of previous operand and the reason we're calling it this is because this is whatever is up here whatever we typed in previously and we're going to have a second div we're just going to look just like this but it's going to be our current operand so whatever we are currently typing down here and then after this output div we have all of our different buttons that we want to create so for example we have a button here and we want this button to have the text ac for all clear and we also want to add a class to this button because as you can see this button is twice as large as all the other buttons so we're going to add a class here which is going to say span - and this instead of our CSS we'll make sure it takes up the space of two buttons now let's copy that down do the same thing for delete and in this case we don't need this fan anymore copy it down again and we can do delete here and the easiest way to do do we is just copy the symbol that we have for my application you can also Google to copy the symbol and just paste it in here and now we don't have to do any special code to go on to the next row because we're using grid so again we can just copy this down change it to one two three and so on we're going to have multiplication 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 the way down to the equals button again you want to make sure you add that class here which is just going to say span to so this equals button also takes the 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 our application if we go into our application over here you can see that we have all of our different buttons being shown up but clearly there's no Styles being applied to them so let's jump into our styles that CSS and start styling our calculator to look just like this the first thing that I like to do is select all of our elements including our before elements and our after elements just like this I want to change the box side into a border box so that way it's easier to size our elements also I want to set our font family here so that it's set on all of our different element in this case I'm going to use a font called Gotham rounded which you may not have installed on your system so you can choose any font that you like the look of and we want to apply a default font so fall back onto so on our case will default to sans-serif is Gotham rounded is not found next we want to set the font weight for our entire application and in our case we're just going to use a font weight of normal now that we have that done and out of the way we go over here we can see already our font has changed slightly to be the scalp and rounded font next thing we want to 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 we use the background keyword and we want to apply a linear gradient we want to apply this gradient to the right so that way our first color is going to be the color 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 zero zero a a FF as our left side color and our right side color is just going to be a green color which is zero zero ff6 C now if we save that and go back to our page over here you see that we have our gradient going all the way across which is perfect the next thing we want to do is style this grid that we have right here so we can fish go down here and select that calculator grid class that we defined earlier which is wrapping all of our different buttons and elements you'd you want to make sure that our display here is set to 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 and if we save that and look back you can see that everything is centered but it's not centered vertically and that's because our calculator grid doesn't take up the full height so we want to set a height on here a minimum height which is just going to be 100 view H which is just essentially saying it's going to fill 100% of the height 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 in grid template rows so first we can define our columns in our case our columns are going to repeat we're going to have 4 columns and our columns are all going to be 100 w-why'd next we want to do the same thing but for our template rows so we're going to have our rows here and our first row this output is actually can grow as large as it needs if we input a very large number in here for example you can see that this grows to fit that large number so we want to have first a value which is going to be a min Max value which says at minimum we want this to be 120 pixels tall but at a maximum we want it to be 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 our view 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 we want to do is actually select them so we can just do that by selecting all the buttons inside of the grid and all we want to do is change your cursor to be the pointer cursor so that when we hover over them we get a nice pointer 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 if we use to re M we want to give it a little bit of a border in this case we're just going to use a 1 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 that 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 elements in our case we're just going to apply a slightly opaque background of completely white so 255 255 255 but it's only going to be 75% opaque I hopefully save that and go back you see our buttons are already starting to look like the buttons over here last thing we need to do to these buttons is actually make us so that would hover over them they change color because as you can see over here these buttons change to be almost completely white when you hover so in order to do that we'll again copy the 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 opacity here to be 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 a line items to a line content we want to align the entire content of this grid in the center not the items themselves now if you say that you say that our buttons are filling out the space that they need to but you'll notice that this all-clear button is not taking up to with spots and this equals button is also not taking up two widths so in order to fix that we can just use that class which is fan 2 and all we need to do is so that we want our grid column here to span two columns and if we say that you see automatically all clear and equal are now spanning two columns but our output which is this singular section right here is not properly styled 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 going to set it 123 plus and down here we'll have 456 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 we want to do to style our actual output element as a whole this as we remember is this blackish looking section right here so in order to make it span the entire width we have a really nice trick which is called grid column again but in this case we want to say we want to go from column number 1 all the way to column number negative 1 which is essentially just the last column and if we save 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 can change our background color 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 to align these elements inside of our container and the easiest way to do that is going to be using flex so we'll change our display here to flex we'll align our items on Flex end because we want these to be on the right side of our container over here and we also want them to be spaced out as far apart from each other so we're just going to use a justified content and we want to say space between this is going to put as much space between our elements as possible now we can save 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 do that we can just say Flex Direction column so that they line up vertically instead of horizontally also you notice everything is pushed up right to the edges of our kind so to change that we'll just add a little bit of padding per 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 going to change this space between to say space around content because it'll push our limits 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 wrap as they get too long so in order to make that happen we need to use what's called word wrap 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 at the end of a word or during a space and we also want to put word break here is that we want to be able to break all words now the 456 became too long for example it would just wrap to the next line as it does over here last thing we need to do is style are two different text elements that we have so in order to select those we can first say inside of our output element we want to get the previous operand and we want to change the color of this to be a mostly white color so we'll say RGB a 255 255 255 and again 75% opacity so it comes across as a little bit of a gray color and we want the font size here to be 1.5 RVM you say that you see that gives us a nice slight gray color which is a little bit smaller than what this text will be when we're done so we can essentially copy this paste it down and instead of previous we have our current operand our color here is going to be purely white instead of partially white and our font size is going to be 2.5 REM now if you say that you see the styles for our entire calculator are essentially done and they work almost exactly the same as over here now that all that's done we can finally get to the interesting part which is coding up the Java Script which will allow our calculator actually work when we click the buttons to make this easier let's remove this placeholder text that we added when we did the style sheets and let's open up our JavaScript 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 operands 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 our HTML that'll be easy to select by and since I don't want to mix our style and classes with our JavaScript let's use data attributes instead of classes so we can say data operation and essentially we can select this data attribute in our JavaScript to say we want to select all the data operation buttons so it's copied us down to all of our different operations plus and minus there we go we can 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 and 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 JavaScript and which parts are 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 our equals button so we'll just say data equals we're going to have one for delete data delete and lastly are all clear so data all clear and we also need to add these to our previous operand and current operand and again I don't want to use these classes since they're already used by our CSS so we'll just put a data previous operand and again a data current operand down on this one and that should be all the changes we need to make toward HTML to be able to select these elements in our JavaScript now instead of here let's first get some constant variables which are going to be all of our different buttons so we have our number of buttons and we can just query that by saying document query selector all which is going to get us all elements that match a certain string and in our case we select a data attribute which must be inside of brackets and we say we want to select data number this is going to get all of our number LMS we could do the same exact thing but for our 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 can dive back here and we can say we want to get our equals button this is just going to be a single button so instead of doing document dot query selector all we're going to use just query selector which will get a single element for us instead of multiple again we can say 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 we're going to do it for all-clear button and of course we need to get our previous operand and this is not a button this is actually a text element and we want to do the same thing but for our current operand and we need to go over here this is data equals data delete all clear and this is going to be the previous operand and lastly the current operand now that we have everything selected let's actually think about how we're going to create the JavaScript that'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 typed here what number is currently typed here what operation is it and I think the easiest way to do that is to use a class so we're going to create a calculator class I like to do these at the top of the file if possible so let's go in here and create a class which is 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 our constructor is essentially just going to take our previous operand text element and our current operand text element and this is because we need to know where to place our display text for our calculator so we can just say previous operand text element and the current and inside of here we can set some variables for this class so they can just set these just like this and we could do the exact same thing for the 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 our calculator class can come perform we have the clearing function the delete function the adding number number also we have the equals function and the adding of an operation so let's define some of these functions the first one 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 a pen to 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 this is what's going to happen anytime a user clicks on one of these operations over here and this function needs to take the particular operation that the user selected and same thing occurred with a number of function we need to actually pass the number the user selected the last two functions that we need to have those we need to have a compute 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 to update our display so we'll just call this update display and this is going to update the values inside of our output and with these operations all defined let's think about the different properties our calculator needs to store we need to know the previous operand the user entered the current operand that they're working on and the operation that they've selected if any so inside the clear function all we need to do is remove all of these values the first thing we can do to just say this the current operand which is just going to be what is defined by this number right here we just want to default this to an empty string if they cleared we want to do the same thing for the previous operand again defaulted to an empty string and lastly we want to change the operation to be undefined since they don't have any operation selected if we clear things and as soon as we create our calculator we want to call this function this dot 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 our calculator can do defined by our functions and all the different variables that it can hold let'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 create a calculator here we're trying to set this equal to a new calculator which is how you define classes you say new followed by the class name and then we pass everything from our constructor into it in our case we need to pass it the previous operand text and the current operand text element now that we've passed 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 loop over all these different buttons and for each one of these buttons we want to add an event listener so we can say button add event listener and this event and listener is going to be whenever we click on the button we want to do something and our in our case all we want to do is we want to take our calculator and we want to add the number so we'll say a pen number of whatever is inside that button so we'll say button enter text and this is just going to be either 1 2 3 4 etc all the way down to the decimal point and the 0 and once that's done we need to call calculator that update display and this way our display values up here will be constantly updated every time we click on a button down here an easy way to test that everything we've written so far is working if we scroll up we can change our update display here to say this dot current operon text on one dot inner text so this will allow us to set the text of this value up here in the white we can just set this equal to our this dot current operand just like that and inside of our pen number instead of actually appending the number we could just change the current operand to equal that number now if we go over to our calculator here and we click on a number you'll see it shows up over here and no matter what number we click on it'll show up up there but if we click on an operation for example or any of these other buttons that are numbers it won't do anything so now we know that our pending number function is properly hooked up with all of our buttons and our display is probably being updated every time we click on a button and since we know that a pen number is working we might as well actually write the append number function so essentially all we need to do is we want to update this current operand value and append the number that we get passed to the end of it so we can just say this dot current operand we want to convert it to a string just in case it's a number this way we can easily append something to the end by using + and we can 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 JavaScript will try to add these as actual numbers it will try to do one plus one equals two instead of one plus one equals eleven because we want our numbers to be appended and not added now if we say that let me 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 to add one single period to this output section so to check for that we can just say if the number is equal to the cymbal and we want to also check that we don't already have a period so we can say that if this string of numbers here includes a period just like this so if we type the period key and we already have a period key we just want to return which essentially will stop our function from executing any further and we won't actually append to that number now if we save that and we go over here and we try to add multiple periods I'm clicking this and all it does is add a single period and no matter when we try to click that period key it'll only allow us to add one and this is the append number function completely done with that 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 to instead of a pendant number we want to choose an operation and again we're just going to pass the text of that operation that we're choosing and update the display here now up in our choose operation function we need to do a little bit of fancier math if we look over here clear out all of this let's say we did 22 and as soon as we click an operation you see that this gets brought into our previous operand value and it clears out our current operand to be able to typed in a new number so let's actually implement that inside of our choose operation function the first thing we need to do is set the operation obviously so we'll say this top operation is equal to the operation we passed in that way our calculator knows what operation it needs to use when it computes the value then we want to set the previous operand equal to the current operand we essentially are saying we're done typing the current number so we recycle that over to this previous operand and we want to clear out the new current operand so let's say that the current operand is just going to be equal to an empty string we're essentially just clearing out that value so now if we save that go back to our calculator here type some numbers and we click plus it'll completely clear our current operand put it into the previous operand and it allow us to type in a new value here and the reason it's not being displayed is because in our update display we're not actually setting that so let's copy this down and we'll say that the previous operand text element is going to be equal here to the previous operand now if we save that something that can click plus you see that that number gets moved up to the top section which is great we aren't appending the 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 essentially just want to say that if the current operation so the current operand is empty so it's empty string just like that we just want to return which again will not let us execute any further into our code 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 click in operation it'll actually do the computation and it'll put all of our operand values where they need to be so we need to have another check in here this one is essentially saying that if the previous operand 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 a few functions this doc compute and then do everything else as before and this compute function will update all the variables as we need so for example let's clear this out this is our old example if we say 55 plus 55 and if we click equals it'll say 110 and again if we say 55 plus 55 but we want to divide from that for example you see it does the computation for 110 and automatically prepends our operation here and this is exactly what this little section of code is going to do as soon as we implement this dot compute function and with these two functions completed we have all the inner workings of how to set all the values inside 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 to do this we're going to take that equals button that we have and we want to add an event listener 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 compute function on our calculator to try to get the computed value and again it's going to update to display of our later so now we click equals it'll actually call the compute 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 just going to call computation and this is going to be the result of our compute function next we need to create two more variables we'll have a previous variable and this is just going to be the actual number version of our previous operate operand right here so we're just converting this string to a number and we're going to do the exact same thing with current so here we're going to get our current operand and then what we want to do is we want to check because if for example the user doesn't actually enter anything and they click equal we don't want the code to actually run so we're going to check if it is not a number for previous so if we don't have a previous value or if for example we don't have a current value then we just want to 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 statement 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 if statements on this dot operation and inside of the switch you define your if 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 stop operation we want to execute the code inside of this case we follow this bias colon here and all the code inside of this case will be executed when this top operation equals a plus so all we want to do is we 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 but 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 paste this down a few times here make sure we uninvent everything and we're going to have subtraction which is going to be our previous value - our current value we're going to have multiplication same thing previous time just 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 paste it in here and we want this to be previous divided by the current value and along with if statements we also have the ability to define an else statement which is defined as a default here and this default is anytime none of these values get executed whatever is in the default is going to get executed in our case we just want to return because if none of these symbols match our operation and that means we have an invalid operation somehow so we don't want to do any computation now finally with our computation done outside of the switch statement we can come in here we can set our current operand which is just going to be equal to the result of our computation we can set our operation here equal to undefined and we can set our previous operand equal to an empty string just like this and now inside of our calculator here we're actually able to perform calculations so we can say 1 plus 1 equals and we're going to get 2 right here and for example if we clear this out well actually we can't clear things up and that's because we haven't implemented the clear function yet so let's do that real quick now we can just copy this equals code instead of being equals button this is just the all clear button and instead of calling Compu here Luana called clear now if for example we have 1 plus 1 and they click all clear everything will clear up which is perfect now what I was trying to demonstrate is we can click 1 plus 1 and then click plus again and you'll see it computes 2 and if we clicked 1 and equals we get 3 and that's thanks to the code that we wrote up here will be checked if the previous operand already existed and we did the computation before actually doing our operand choosing the last button to implement here is our delete button and this is going to be really straightforward to implement first thing we're going to do is we want to change our current operand and we want to set it equal to our current operand here the current operand and all we want to 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 method is for we want to go from index number 0 all the way to 1 from the end so essentially this is going to take all 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 operon variable essentially chopping off the last one and if we go down to the very bottom here and hook that variable up so we can take quite a leaf button if I spell it properly and instead of clear if we just want to call delete now if we type in a long string here 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 add a base value our calculator is entirely functional but the actual display of our calculator is not that nice we're not having it the commas that we'd like to see our operands 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 equal to null then in here we want to display our previous operand text element and we want to make this actually of concatenation of both our previous operand 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 that 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 delimits these values with commas so let's work on implementing that now and we can do that with a helper function we'll call it get display number and we'll pass it in a 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 get display number we're going to pass it the current operand here and we're going to do the exact same thing what we're going to do it for this dot previous operand and now any changes we make in this function are going to be reflected in both the previous and the current operand values and this function is going to be a little bit complicated we're going to first to make a straightforward version of it and then I'll show you some of the problems with that the first thing we want to do is we want to set this number to an actual float so and say here was create a variable called float number we're going to set that equal to parsefloat of number and this is because our number is actually a 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 an empty string since we don't actually know how to format this number since it's not a number then if we do have a number we want to say return the number to locale string so number dot - locale string and inside of here we pass a locale which is essentially a language in our case we'll just pass English and if we save that go over to our calculator here and type out a long number you'll 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 if we say that and type this out you'll see is our number dish longer it'll automatically place in commas 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 if never going to show up up here until I select a different number and that's because when we try to parse that decimal place into a float it can't be parsed into a float 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's 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 integer part which is before the decimal place and the decimal part which comes out to the decimal place so in order to do that we're going to first get our string number so we're going to set a string number is going to be equal to number two string and we want a 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 integer numbers so we'll say integer digits so that we know that this is an actual float and we're going to set this equal 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 an array the first number in the array 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 we can do a very similar thing which is going to be for our 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 array which is the numbers after the decimal place now let's remove some of this code down here since we no longer need it and we want to get the introducer display separately so we're going to say in a direct display and we're going to let this be blank for now and we're going to check to see if our integer digits is going to be not a number so if is not a number and essentially this will happen anytime someone inputs nothing on the screen or inputs just a decimal place and if that's the case we want our inner display to just be equal to an empty string but if for example they did enter an integer value that's where we want to use that locale string so we're going to set that integer display equal to our editor digits dot - locale 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 decimal places after this so we want to say our maximum fraction digits is going to be set equal to zero which means there can never be any decimal places after this value when it gets converted to a string with a bunch of commas which is perfect for our use case now that we have the integer display being set let's go down here and we want to check to see if we have any decimal digits so if our decimal digits is not equal to null but that means that the user did enter a period and has some numbers after it and if that is the case we want to return to them the integer display so in here we have integer display and we want to follow that up with a period and all of our decimal digits so we're just going to set 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 bet and go over to our code here we type in for example 1 2 3 we put a period you'll see that that period actually shows up right here which is perfect and if we put an O or anything afterwards that's working just fine so 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 operand 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 we'll just put in a simple else here and we'll say if this dot previous operation died in a text element here we're going to set this equal to an empty string and now if we save that and we do a calculation just a simple one-click equal it'll empty out that previous operand value for us and leave us only with our current operand value which is perfect and with that we have a completely functioning modern JavaScript calculator working in the browser if you enjoyed 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

Channel: Web Dev Simplified

Views: 612,211

Rating: 4.93958 out of 5

Keywords: webdevsimplified, how to build a calculator, how to build a calculator in javascript, javascript calculator, javascript calculator tutorial, javascript calculator project, build a calculator in javascript, code a calculator, html calculator, html calculator tutorial, js calculator, js calculator tutorial, js calculator code, js calculator project, calculator js, calculator html, calculator css, calculator code, program a calculator, js calc, javascript

Id: j59qQ7YWLxw

Length: 38min 49sec (2329 seconds)

Published: Tue Apr 16 2019

Reddit Comments

[u/fird-_-]

learning through little projects is the best way to learn! thanks for this