JavaScript Calculator Project Setup

[00:00:00]
>> Here is your project. You are gonna make a calculator. And I'm gonna make you do all the CSS too, cause this is some fun CSS. I think it is. I want you to think about a calculator. I imagine all of us have used a calculator before. And I love this thought experiment because it forces you to break down.

[00:00:24]
It's like wait, how does a calculator actually work, right? You're into it. How to work with a calculator just by having used one probably since you were a child. But we actually have to like sit down and think about like the logical process, like wait, if I hit 25 plus, it stores 25 somewhere.

[00:00:42]
Where does it store it? I don't know, it's black magic, right? Do the magic gremlins of the calculator store them? I don't know. Or if I hit Clear, that does something as well, right? But I want you to write a calculator. So like 25 plus 3 equals 28, right?

[00:01:06]
Or 80, clear, 80 divided by 4 equals 20. So this is mostly based on the iOS calculator. It looks like one of you have iOS. So this is my implementation of it. Notice I had like fun little hover states that if you hover over it lightens it a little bit so it looks clickable, right?

[00:01:33]
Same thing with the orange ones. If you push it, it gets darker so that it looks like a press down button, all sorts of fun stuff like that. This is a super incomplete, very naive implementation of a calculator. And that's what we're going for. So make it look somewhat like this.

[00:01:51]
I ended up using grid. Should function like a normal calculator. Don't implement the percent or period, just assume everything is an integer. Again, I don't want you to go off the rails on this. C means clear. So if I have 58 and I just hit C, it goes back to 0.

[00:02:14]
Doing the back arrow will be extra credit. So if I do 25, and it's like, I actually meant to do 26, I can hit back arrow 6, right? Don't worry if the number is too long for the screen, I don't care, right? So if someone does 26 times 666699888, right, equals, times, yeah, whatever you want.

[00:02:42]
So, yeah, don't worry too much about overflow on the screen. And then calculators tend to have funny behaviors when you hit 0, like if I hit 25 times 3 equals. If this was a calculator and I hit 7, you would expect it to clear it and it'd just be 7, right?

[00:03:08]
I think mine just adds it. So I don't care what you do after someone hits equals, that's up to you. So you can make it work how you would expect a calculate to work. Or you can just follow my way, which is just to keep adding things. That's super fine for me.

[00:03:26]
And that is it for the product requirements. So I gave you a list of things, I gave you a design. At this point I would be expected to like you as the developer that I hired to work on my special calculator project to go out and be able to implement this.

[00:03:44]
Some tips and tricks. This is a big problem, right? A calculator is a non-trivial problem to work on. It's easier if you take this and break it down into smaller problems and smaller problems, because big problems are hard to solve, small problems are easier to solve. So try and make big problems small problems.

[00:04:01]
The way you do that is make functions. Make functions that call other other functions, that call other functions and have very small, very succinct functions. Don't have big functions, have little functions. Personally, I wrote all the HTML and CSS first. I found that easier, you don't have to do it that way.

[00:04:20]
Once I did that then I did all the JavaScript. For the font of the results screen, so like this part right here I used model space. I found that to be a good looking font for that. Feel free to do whatever you want. There's so many correct ways to write this.

[00:04:36]
I wrote it one way. There are other ways to do it. Feel free to do it your way, you do not have to do it my way. It's a good idea to make these buttons, because now if I hit Tab, you can see the blue outline there. So this is actually pretty accessible.

[00:04:52]
So if I hit 8, 9 times 9, and then I go down here and hit, all the way down equals, it works. I didn't have to do anything extra to do that, but going through things via tab is a big thing if someone can't use a mouse, right?

[00:05:14]
So that's a good idea to use buttons, you just get that for free. I didn't have to do anything extra, buttons will just do that. I talked about how to get the spacing here nicely. You can do this with flex, you can do it with grid as well.

[00:05:36]
Both of those will work. Sometimes I do the math to get things right. Sometimes I just guess and check. That's up to you. And you can add a class and you get these orange buttons. Or you can put them in rows and add last child or like nth child.

[00:05:52]
All valid ways to get the orange buttons on the side. And again, no wrong way to do this. It took me about 80 lines of JavaScript. So if you're writing 500, you've probably asked yourself questions about how you can make things simpler. I use console.log() everywhere when I'm writing code.

[00:06:15]
It's just an easy way of debugging. Many small functions is preferable to one large function. In general, what you should do is you should have some sort of event listener way for the user to do something. And then if they say, okay, I see that they pressed plus delegate to a plus function, or delegate to a number function, right?

[00:06:39]
It's much more preferable to have smaller functions. And you can have one event listener for everything, or you can just go ahead and add an event listener for every individual button. That is very much up to you. Yeah, one more thing that I wanna call, because this will almost certainly be a problem for you, is types.

[00:06:58]
So we've talked a little bit about like the difference between string 4 and number 4, right? So if I bring this up and I say, console, 4 is double equal to 4, right? But 4 is not triple equals to 4, right? That's because this is a number 4 and this is a string 4.

[00:07:17]
So these are double equals true, but they're not triple equals true because they're not the same type. So if I have this div right here, sorry, is this a div, or it might be a paragraph? This is a div, okay? So I have a div here that just contains the number 10.

[00:07:41]
And if I say document.querySelector, and I grab out of it the inner text of it. What is the inner text of this? Is this going to be number 10 or string 10? Inner text is a strong hint here. It's string, right? So the DOM is always gonna give you back strings.

[00:08:02]
It never gives you back numbers, right? So if you're trying to say, if number is triple equals to this, it's never gonna be true because it's not the same type. So this is what I was showing you here, console.log. So I have number 10 here, right? Num, type of num is going to be 10, number.

[00:08:20]
Typeof just shows you what type something is, right? Okay, and then if I come back here and say typeof( inner text). Despite the fact that I literally set it right here, right? I set inner texts to be num. And then I ask for it back, it already converts it to a string.

[00:08:40]
So you can see here it is a string. So there's a bunch of, yeah, and a funny example of doing this. If I say 5 + 5, If they're strings, it thinks like, the way I add those together, that's string concatenation, so 5 + 5 is 55 for strings.

[00:09:07]
Not 5+5 like that, right? So there's a couple of easy ways to do that. If I have 5 like this and I want it to be a number, the easiest way, if I just add a plus in the front of it, this simplicity converts anything inside of this to a number.

[00:09:30]
It's called the unary plus. Not that you really need to care about that, but that's what that is called. Pretty sure you can also say, To, what is the function, value of? No, that's not the one. I think new number does work though. Or, See, I have my own problems trying to remember what this is.

[00:10:04]
ParseInt, that's really the one I'm looking for. So, you can do that as well. You can take a string and you can pass it on to Number.parseInt() it will turn it into an integer for you, or a number. So a couple of ways of doing that. You can either do the plus this way, it's a little clever.

[00:10:26]
But if someone's reading your code they may not be familiar with that trick in JavaScript, whereas like Number.parseInt() is very explicit. You are passing an int and getting back a number. Okay, you can also use the typeof operator if you need to. Yeah, typeof is a weird one.

[00:10:52]
But if you're just worrying about numbers like typeof(5), if you're just using like that, it's totally fine to use typeof as well, okay? And then you should end up with something like this. Okay, there's my HTML, there's my CSS, there's my JavaScript. I'm gonna encourage you to try and do this on your own.

[00:11:18]
I'm going to imagine this will take you longer than an hour. Certainly it took me longer than an hour to do this. It might take you several hours, it might take you a couple of days and coming back to this. All of those are totally acceptable. So this is not a simple thing.

[00:11:31]
But I have given you all the tools that you need to be able to do this. So, good luck.