JavaScript Project: UI Behavior

[00:00:00]
>> Okay, I'm gonna need a couple of functions to work with this, right, cuz I have all the different math symbols, these all work similarly, right? I have a backspace function, which is gonna do something different. I have a C symbol that's gonna do something different. And I have an = symbol that's gonna do something different.

[00:00:17]
So I kinda have one, two, three, four kind of different use cases that I have to handle. Let's just start with the easy one. I think the easiest one here is probably, I don't know, there the = one's are the hard one. So we're gonna do = last.

[00:00:37]
Which one did I do here? Let's do the clear, I think clear is pretty easy, comparatively speaking. So what does C do? If I have numbers here, if I press C, it'll clear it out, right? That's what C is supposed to do, so I expect it to go back to 0.

[00:01:01]
So let's do that. So here for handleSymbol, we could do this with if statements. So if, (symbol === C), I'm gonna show you a different way of doing this, called a switch, which is basically the same thing as multiple if statements. So I'm gonna say switch, like this.

[00:01:30]
I'm gonna put what I'm switching on, which is the symbol. Okay, put that between curly braces, and then you give it a bunch of cases, right? So I'm gonna say case of C, and then you put a colon here. I'm gonna say buffer = '0', right? Cuz I clear that out.

[00:01:55]
And then I'm gonna break. So this is the same thing as saying, if, (symbol === C), Then do this, right? So that's what it's asking here, is symbol equal to C? And now I can have a bunch of cases here. So let's just go do all the cases.

[00:02:21]
We'll do '='. We'll put our stub here, console.log('equals'). case, and then we'll have to put break there as well. So you can think of break as the closing curly brace here, right? It's basically saying that I'm done with my switch statement. So at the end of your case, you always have to put a break.

[00:02:50]
Okay, we'll have a back arrow. I'm just gonna copy and paste that from here. Inspect, to make sure I get the same symbol. There we go, back arrow, let's say console.log('back arrow'), break. We'll do case, and then we'll do all of the math symbols. And we'll handle that all in a math function of some variety.

[00:03:23]
So, what you can do is, what's cool about this is that I can just put multiple cases in a row. Case, and then I'll grab the correct multiplication symbol as well, cuz I don't want to mess that up. We'll got the divide one in there as well. And then case, this one, I want to get the multiplication one.

[00:03:52]
Okay. And then now I can make some functions, like this is a console.log('math symbol'), or something like that. And then break. And that should be good. Okay. So if I refresh now, I need to look at my console here. So, if I do 58, and I hit C, what do I expect to happen?

[00:04:35]
Expect it to go back to 0, right? Which it does. Again, let's just follow through to make sure people got it. Okay, I have my event listener, that event happens, it calls buttonClick with the innerText. That goes to buttonClick. If it's a number, it goes to handleNumber. If it's a symbol, it goes to handleSymbol, cool.

[00:05:00]
Okay, so we went to handleSymbol, I set the buffer = '0', okay? And then it goes back here to buttonClick, remember, and at the very end of it it calls rerender. That's why all I have to do here is set the buffer = '0', and then this rerender will handle setting it to 0 on the screen as well.

[00:05:19]
Cool, that's it. We just did C. So what I had here is I had, that's ironic that that kept working the way that it did. I have this if statement up here, and once you delete that, most of you probably shouldn't have that in there. So, now if I go back in here, math symbol, those all work, equal signs, back arrow.

[00:05:47]
All that works, okay? So I can drop my console.log here, which I did. It's gone. Hey, don't need that one anymore. Okay, console.log('equals'), we're gonna do the back arrow next. Now you can make a function here that goes out and handles a back arrow or something like that, but it's a pretty short thing.

[00:06:12]
So I'm just gonna do it directly here in the switch. So I'm gonna say if buffer === '1', well, let's talk maybe through the logic first. If I hit back arrow, now, on 99, what do I expect to happen? It's gonna be 9, right? So I'm gonna lop one off, or let's make it even more clear, 98, right?

[00:06:37]
If I hit back arrow, I'm going to cut off the 8, and then we'll be left with 9, right? I'm gonna delete the last thing that was there, okay? If I have 9 and I hit back arrow, what do I expect? It should be 0, right? And if it's 0, what do I expect it to be?

[00:06:58]
0, right? It's unchanged if it's 0. Okay, so starting from the top there, if buffer.length === '1', then buffer is assigned '0', string 0, right? Now what happens if buffer was '0' to begin with? Right, which is of length 1. This still works, I don't have to make a special case for '0', because this will still work the way that I anticipate, that's totally fine.

[00:07:39]
else, buffer is assigned buffer.substring(0, buffer.length- 1). Basically we're gonna take the string and we're gonna lop off the last number. So if I have 954, it's gonna take 95 and it's gonna cut off the 4. Okay, that's it. Again, remembering that our rerender already happens. So If I do 98 and I hit back, what do I expect to happen?

[00:08:25]
It's gonna go to 9, cool. If I hit back again, it's gonna go to 0. And if I hit back again, it's gonna stay at 0, Right?