Adding JavaScript to the Calculator

[00:00:02]
>> Brian Holt: So this probably looks familiar to a bunch of you, right? I think you've built this with Jen, is that correct? Okay, now we're gonna make it work. So if you click on this, mine actually works here. So if you click 25 + 30 = 55, right? Or you can clear it and say, 89, delete that, divide by 2, = 4.

[00:00:31]
>> Brian Holt: So there is a bunch of ways that you can accomplish this, right? I showed you, we can go bind individual event listeners on each one of these, we can go and do one event listener at the top level. Many ways to build these kind of things, and not one of them is more correct than the other.

[00:00:52]
>> Brian Holt: So if you're watching this and have not done the HTML and CSS, there's some tips on here on how to do the CSS. But if you're using what you've built previously, feel free to just use what you built with Jen.
>> Brian Holt: So here are kind of some guidelines of how it should work.

[00:01:12]
It should look mostly like this. It should function like a normal calculator. We're not gonna do anything with decimals. We're just gonna assume everything's an integer today. Don't bother with percentages. C means clear, so if someone clicks clear, then they should go back to a neutral state. Deleting is kind of an extra credit thing, so 895 and then you delete one.

[00:01:39]
>> Brian Holt: And calculators tend to have some weird logic around what happens if you hit = multiple times, I don't care about that. You can just ignore that part as well.
>> Brian Holt: Okay, there's a bunch of HTML and CSS tips up there, but it took me about 80 lines of code to write this.

[00:01:58]
We are gonna write this together, and then I'm gonna give you a different project for the end of the day. But if you're writing over 200 or 250 lines for this, you're probably overthinking it a little bit, which is fine. I use console.log everywhere when I'm writing code.

[00:02:16]
That's just a persona tick of mine, but you're welcome to debug in whatever way you want to.
>> Brian Holt: This is kind of an important concept in general with programming, many small functions is very preferable to one large function. So with functions, in general, you want them to do one thing and one thing well.

[00:02:33]
And if they start doing five or ten things, you just end up with a mess, right? So in general, you should prefer having many small functions. I used eight functions to solve the calculator.
>> Brian Holt: You'll have to keep track of several variables.
>> Brian Holt: And how you choose to do event listeners is up to you.

[00:02:54]
I did one event listener on the whole thing.
>> Brian Holt: We ran into this previously with types, but just to go over it one more time. If you querying numbers out of the DOM, they come back as strings, right? So just to kind of drive that home, so I have 10 here, right?

[00:03:10]
And if I say, console.log(num), right here.
>> Brian Holt: So console.log(num, type of num), you get 10, a number, right? Because this number right here is a number. And that's what the type of operator does there, it lets you know what it is.
>> Brian Holt: And then if I say, div.innerText = num, so now this is the same num and I've just assigned it to be the innerText of this div up here, which is this div, okay?

[00:03:41]
And if I just ask for that number back that I just gave it, it gives it back to me as a string, right? So now if I say, div.interText, type of div.InnerText, notice this comes back in quotes, because it's a string and its type is string. So that's something to be careful of.

[00:04:00]
If you're trying to add numbers together, if you add 5 and 5 and get 55, it's cuz they're both strings, right? It's 10, right? We all know that, right? We math okay? [LAUGH]
>> Group: [LAUGH]
>> Brian Holt: Okay, we math okay.
>> Brian Holt: You can also use parseInt, that's another easy way to get that coerced into a.