JavaScript Project: Math Operators

[00:00:01]
>> Let's do the math operators next. They're gonna be kind of linked side by side anyway, so that's totally fine. So we're gonna do a function here, and let's just call it handleMath. Okay, it's gonna take in some sort of value, and we'll put this down here as handleMath, yep.

[00:00:32]
handleMath, and it's gonna take in the symbol that we got here. Okay? So if the buffer is straight up zero, and you hit plus or minus or times or divide, all of those things end up being zero anyway. So you actually just don't end up doing anything. So let's handle that first.

[00:01:03]
So if buffer === 0, we're just gonna do nothing. So do nothing and return. Okay, that's the first case we wanna worry about. Other than that, we have to do some sort of, let's say I do 5 plus 5 plus 5. If I hit, let's say, 5 plus 5, and then I hit plus again, I have to do the addition of the first two things, right?

[00:01:37]
So I'm gonna do that. I'm gonna say const intBuffer is assigned parseInt of the buffer. And I'm gonna say if, and I need some sort of running total. So I'm gonna say runningTotal is gonna be assigned 0, or if it is, then runningTotal is assigned the intBuffer, right?

[00:02:10]
Otherwise, I have to go do math, right? So I'm gonna make some function here called flushOperation of the intBuffer. Okay, so obviously, I'm gonna need some sort of running total. So I'm gonna say let runningTotal, and we're gonna start that at 0. Because if I do 5 plus 5 plus 10 plus 30, I have to keep some sort of background value of something off screen that contains some sort of running total, okay?

[00:02:41]
So we'll start that at 0. Yep. We're also gonna need some sort of concept of previous operator. So if I do 5 plus, and then I start typing math numbers, I have to keep track of the fact that the last thing that I tried to do was plus.

[00:03:03]
So I'm gonna have some sort of previous operator or math symbol or whatever you wanna call it. I'm just gonna call it an operator. And that's just not gonna have anything associated with it at first. Okay, and then down here under handleMath, I have to say previousOperator is assigned whatever the value was, right?

[00:03:32]
So whatever gets passed in here, so I'm storing plus or times or divide or something like that. And then if I hit 56 plus, what should the screen go to? The screen should go to zero cuz we're about to put in a new number, right? So I'm gonna say buffer is assigned 0.

[00:04:00]
Okay, that's pretty much it for this. I just have to go code this flushOperation function. And all that's gonna do is if it's supposed to do addition, it'll do addition. If it does division, it'll do division. It should be pretty straightforward. So I'm gonna say function flushOperation. It's gonna take in some sort of intBuffer, right?

[00:04:24]
So it's gonna take in whatever I pass in here. And then here, I'm gonna say if, and I'm just gonna do a bunch of if statements here. You could do a switch here as well, that'd be totally fine. If it's equal to plus, then do plus. So runningTotal += intBuffer.

[00:04:48]
Okay, else if previousOperator === -, then do minus, runningTotal -= intBuffer. And I can probably just copy and paste this a few times. Okay, if it's times, then do times. And if it's division, Except this isn't gonna be that. That's actually gonna be an x, right? So I actually have to go grab the correct thing here.

[00:05:34]
So x, then we'll do, cuz this is the sign for multiplication in JavaScript, by the same token here, we'll do division. If it's division, then we'll do slash equals, because again, slash equals is division in JavaScript. So that works. You also totally could just make this an else if you want to, because there's only four possible values here.

[00:06:06]
Totally up to you. I'm gonna say probably it's better to be explicit where possible, cuz what happens if something weird gets in there? You don't wanna just do division by default. So that's kind of up to you. It doesn't really matter. Just to be extra clear here, just remember, this is the same thing as runningTotal / intBuffer, but you can also just do slash equals and that does totally work.

[00:06:40]
Okay. That all sounds good, pretty happy with that. The nice thing about this flush operator function that we built is now we have the ability to do our math, so we can actually reuse this with our equals. But let's go ahead and make sure that this works the way that we anticipate it cuz I wanna make sure that the runningTotal is getting calculated correctly.

[00:07:12]
So I'm gonna say console.log runningTotal here. So if I say 5 plus 5 plus 6 plus 12 plus 25 minus 5 minus, 9, minus 7, right, it is working the way I anticipate it, times 2 divided by 2 plus. Yeah, so everything's working the way I anticipate it, cool.

[00:07:53]
Maybe we'll try that one more time just to make sure. 5 times 2 plus, okay, cool. It's not flushing the operator until I'm pressing the button, right? So I'm gonna say 5 divided by 5 plus, which is good, okay, all good. So runningTotal, looking good, don't need to log that out anymore.

[00:08:17]
Let's go do the equal signs, and I think we're pretty close to done at that point. So equals here. So first thing to check for, if I just hit equals right now, even if I hit 5 equals, what would I expect to happen? Nothing, because equals at this point doesn't mean anything.

[00:08:45]
You haven't done any sort of operation. So if the previousOperator is null or something like that or undefined, you can put it however you want. Let's just make it null cuz that might be an interesting thing for you to experience. Null is another kind of data point we have not a number we've seen.

[00:09:11]
You've probably seen undefined. So null is basically the absence of anything. So it's different from zero. If you have zero of something, you have zero quantity of something. If you have null, you have nothing. You have no concept of anything. So we have no previous operator. So we'll actually make this null to start out with because there's nothing there.

[00:09:31]
You don't have to use null here. I'm just showing you a use case where null could be useful. So if previousOperator is null, right, you need two numbers to do math. Then we'll just return right away. Otherwise, what we wanna do is we just wanna flush the operation right away, right?

[00:09:51]
We wanna say flushOperation with the parseInt of the buffer. Okay? So now the buffer, We wanna set the buffer, we wanna set the screen, right? So if I say 5 plus 5 equals, I wanna see 10 here. Where is 10 coming from? 10 is gonna be the running total, right, because that's where I'm keeping track of all the math, right, the running total of everything.

[00:10:31]
So I want to see, The running total here in the buffer. So what I'm going to do in the, where was I, in the handle symbol here. So what I'm gonna do now is I'm gonna say buffer is assigned the runningTotal. And then runningTotal is going to be assigned a 0, right?

[00:11:12]
Okay, I do have a little bit of a weird problem here. The buffer, I always want that to be a string. If you remember up here, I'm just kinda keeping it consistently a string. So let me show you how to do that. If I wanna make a number of string, I'm gonna show you a little cheat to do it here.

[00:11:31]
You can just say empty string plus runningTotal here. Whatever the first thing is, it's going to convert everything else behind it into that. So I have this empty string which has nothing in it, and then I'm gonna add runningTotal, it'll make that a string. So buffer will maintain being a string, which is a positive thing.

[00:11:52]
Okay, runningTotal is going to be assigned 0 because at this point, we've done all our math. We're happy with it. We don't have to do anything else. Okay, one last thing, if you hit equals, so if I say 5 plus 5 equals, the previous operator at this point is going to be null again, right?

[00:12:12]
So I'm gonna say previousOperator = null cuz we've now flushed out the operation. We don't wanna keep track of any sort of previous operator. Okay, so make sure that works. 5 plus 5, and I expect now this to be equal to 10. Plus 9 plus 23 equals, divide by 6 equals 7.

[00:12:49]
All the stuff is working. Times by 12 equals, times by 5 equals, all right. Cool, so that is the calculator. Pretty happy with it, how everything came out. There's probably bugs in here somewhere, but bugs are bugs and they show up in places. Debugging is just as big a skill as writing code.

[00:13:24]
It's this whole separate thing. So that's always a good thing to get used to as well. You can see I used console.log everywhere. That's just a habit of mine. There's other techniques of debugging, but yeah, happy about this. All right, so that's the calculator. And if you want, you can look at my version of the calculator here, going through the HTML, the JavaScript, and the CSS.

[00:13:53]
It's basically what you and I just coded together. And yeah, good job. That's a pretty hard project.