Transcript from the "Review and Q&A" Lesson
[00:00:00]
>> Brian Holt: Down here, we have init, right, we call the init function. And the all the in function does is query the selector for the calc-buttons, which is everything in here. And adds an event listener at the top level, right? Every time that click happens on one of these buttons, it sends off an event.
[00:00:16]
And we're passing the event.target, which is gonna be whatever button we pressed. And it's gonna pass to the innerText, so 3 or C or back arrow, all that kinda stuff, into our buttonClick function. Okay, with me so far? Let's go to our buttonClick function. We just ask, is this a number?
[00:00:36]
Or rather we're asking is this not a number? Which I recognize is, and you can also totally do, is this not not a number?
>> Group: [LAUGH]
>> Brian Holt: You can really put as many as you want, is this not not not a number? Just totally pointless, ignore me. I'm just making shit up now.
[00:00:54]
Okay, so if this is not a number, then handleSymbol, right, because it's not a number. If it is a number, then handleNumber, okay? So let's do the numbers first because that's easier. If you go down to handleNumber, wherever that may lie.
>> Brian Holt: handleMath, flushOperations, handleNumber, there it is.
[00:01:18]
If it's a 0, we just assign it to be whatever that buffer is, the buffer essentially to be that number. Otherwise you just tack it onto the end, okay? Otherwise up here we go to handleSymbol. If it's a C, that means clear, we're gonna do a switch based on that symbol.
[00:01:37]
If it's an equal, then we do the math, we show that to the user, and then we break up here. Otherwise, we're gonna math, right? So we go into handleMath. If the buffer is 0, then we do nothing. Otherwise we're gonna check to see if it's 0. If that's it, then we're gonna send it to the running total.
[00:01:59]
Otherwise, we're gonna go to flushOperations. Which is going to do either the math, the subtract, or times. A big key here, even if you're doing like × in your dock, this is going to be. By the time it gets to this point in the function, it's gonna be this little multiply sign, okay?
[00:02:19]
So either way, you still have to have this be the multiply sign.
>> Brian Holt: Okay, and then we're either doing addition, subtraction, multiplication, or division based on what the user pressed, okay? Back up here, in previousOperator, we gonna keep the previous symbol that they just gave us. We're gonna assign the buffer to 0 and we're gonna keep going.
[00:02:40]
>> Brian Holt: Good, does that whole flow kinda make some sense? Sometimes it's kinda useful to mentally walk through your program. So we're getting there, this is pretty close to done. 25 times 9 equals, that's what we would expect. And if we said 24 plus 3 plus 2, all that kind of stuff, that still all works.
[00:03:14]
>> Brian Holt: Okay, I mean, this is not gonna be a perfect calculator, right? For example, if I hit 25 + 3 and I hit =, and I put another number in there, that's not typically how a calculator work. It would clear it out, but there's a bunch more logic that would have to go into doing that.
[00:03:29]
And for now, I'm happy to just say the user should click Clear once they're done.
>> Brian Holt: You never realize how much logic went into a calculator until you have to build a damn calculator. At least that was how it was for me. It handles a bunch of state that you're not even really thinking about.
[00:03:50]
We have one more thing to accomplish here, and that is the back arrow.
>> Brian Holt: So that is under handleSymbols. We're gonna put it above the math ones. It doesn't actually matter what order these comes in
>> Brian Holt: So I'm gonna find back arrow in here, back arrow.
>> Brian Holt: Question is, there is so many arrows, I think it's leftward arrows.
[00:04:22]
Hence the lar, right, leftward arrow
>> Brian Holt: Again, I'm pretty sure you can copy and paste that out of the DOM. Or you can just search for leftward arrow and copy and paste that off of there as well. Okay, so a leftward arrow, we expect, let's see how I did it over here in Building an HTML Calculator.
[00:04:49]
If someone clicks 25,
>> Brian Holt: Here we go, 25, and then I click back arrow, you'd expect it to delete the 5, right? Right, it goes back to 2 or back to 0.
>> Brian Holt: So how will we do that?
>> Brian Holt: Well, if buffer.length === 1,
>> Brian Holt: Then so if someone has 2 in there, and they click the back arrow, you expect it to become 0.
[00:05:31]
So you're just gonna say buffer = '0', else,
>> Brian Holt: buffer is going to be whatever it was minus 1. So equals buffer.substring,
>> Brian Holt: 0 to 1 shorter than it was, buffer.length- 1.
>> Brian Holt: So if you remember, substring takes a longer string and returns to a smaller string. So we're basically we're saying is start at the beginning.
[00:06:12]
So if I have 250, and then go all the way to the end, except 1, right? So it says, that's what this is buffer.length is gonna say, stop 1 short of going all the way to the end. Make sure we have a break.
>> Brian Holt: Okay that is working.
[00:06:42]
>> Brian Holt: Okay, cool.
>> Brian Holt: This makes sense?
>> Brian Holt: What happens if buffer is of length 0?
>> Brian Holt: It can't be, right? It's always gonna be of length 1, because the shortest that I ever let it get is length 1, right? Cuz it's always gonna be 0. So if buffer.length, or if buffer is 0, that means its length is gonna be 1.
[00:07:08]
And that way it just reassigned itself to be 0. So we don't have to worry about that particular case. So these are the only two cases that we can have. Hopefully this was hard, right? But you at least grasped the concepts that were going on here. So if I had asked you to do this by yourself today, you would have the tools.
[00:07:29]
I don't think you've learned too much that's brand new from this. But you could have done it if I given you enough time. If I had said, hey, you have two weeks to build this, you could've gotten there, right? Hopefully you can at least feel that way about it.
[00:07:46]
>> Brian Holt: Okay, questions before we move on from calculator? This is as much as we're gonna do on this. You're welcome to go on and code jam on this later and add more features and maybe add decimals and stuff like that. Good luck, but [LAUGH] decimals and JavaScript don't go together super well.
[00:08:05]
>> Brian Holt: But yeah, this is another piece that you can kinda throw into your portfolio. It's like, check out this cool calculator that I built.
>> Brian Holt: Any questions before we move on to the project for the day?
>> Brian Holt: Please.
>> Speaker 3: How do you get into thinking about it where you have to divide things up into smaller things?
[00:08:27]
Because when I was following along, it seems like it's easy. But if you give me on my own, it'd be like this big thing is crazy. Are there some resource that teach you how to solve problems?
>> Brian Holt: I don't know if I have a resource. I think it just comes from practice of knowing like where good divisions are to draw.
[00:08:51]
Kind of a good litmus test for that, I suppose would be, if it's really hard to name your function, it's probably doing too many things, right? So like this buttonClick thing. If I was trying to put all the symbol logic in here, and all the number of logic in here, that's gonna get enormous, right?
[00:09:13]
If your functions start getting longer than like 60 lines of code, that's gonna be tough to maintain.
>> Speaker 4: Yeah, definitely [INAUDIBLE] cool thing, right?
>> Brian Holt: For sure.
>> Speaker 4: Watching Brian code this is a fantastic point of reference. The hard part of coding is solving these problems yourself. So when you're approaching a new problem, and using code to solve it, you'll get better at it.
[00:09:34]
And like Brian said, practice on solving your own [INAUDIBLE].
>> Brian Holt: Eventually, like for me, cuz I'm an idiot and I can't learn from other people, I have to learn from making lots and lots of mistakes. That's the best thing can do is learn from other people's mistakes. So you don't have to make them.
[00:09:54]
These functions just get astronomically large. They just become, if I'm trying to follow how my program works, from start to end, like we just did. If it gets to be impossible, then you probably have functions that are too long, that are doing too many things. But the general idea in the back of your head that you should be thinking about is a function should do one thing well.
[00:10:16]
>> Brian Holt: Does that vaguely answer your question?
>> Speaker 3: Yeah.
>> Brian Holt: Cool.