Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "JavaScript, HTML, and CSS Exercise" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students code a calculator with HTML, CSS, JavaScript, and the DOM.

Get Free Access Now

Transcript from the "JavaScript, HTML, and CSS Exercise" Lesson

[00:00:00]
>> Brian Holt: We are in Chrome and we're gonna build an HTML, CSS, and JavaScript calculator, so you're gonna have to use EventListeners. You're gonna have to use HTML. You're gonna have to use CSS, JavaScript. For me, personally, the way that I did this is I built the HTML, CSS first to make it look like the calculator.

[00:00:17] And then, I went back into the JavaScript. It's probably generally gonna be a pretty successful strategy. I would suggest that. Notice, they have nice hover states. You probably can't really see that on the projector, but it has nice little hover states. And then, active states, when you press it, the button gets a little bit darker.

[00:00:36] And if I do 25 plus 2 equals 27, minus 5 equals that times 6 equals that, divided by 3 equals that, so on and so forth. There's a ton of edge cases here for the calculator, if someone just types equal bunch of times don't bother worrying about that.

[00:01:04] Or if they hit backspace when they're not supposed to, or clear, whatever, you don't have to worry about that. This is the backspace by the way. I also, I told you that JavaScript is not good about numbers. So just assume everything is an integer, everything is a whole number, don't worry about decimals.

[00:01:25] You can if you want to, you're just gonna have a bad time. Because I can divide by 2 and it'll do 2.5 here, but then I think what my calculator does it a plus 2 is it rounds down. So I wouldn't mind use just use math that floor and just assume everything is an integer.

[00:01:46] The C stands for clear that's just clear the calculator and start again. 25 times minus 3 equals 0 so on and so forth. I think you understand how a calculator works hopefully. So our calculator should look more less like this. The calculator should function like a normal calculator.

[00:02:12] And don't implement any of the other things so this is a little bit of the deviation from a normal IOS calculator I didn't do percentages I didn't do the period or anything like that. C means clear. When he clicks it, he should clear everything and go back to where it was previously.

[00:02:32] Doing the back gets us extra credit so maybe do that last.
>> Brian Holt: Don't worry if the number is too long for the screen. Just overflow. That's fine. Or however you want to handle it.
>> Brian Holt: I don't, when someone hits equal, I don't really care what you do afterwards.

[00:02:55] You can clear it. You can do it whatever you want, do whatever easiest for you, that's not what I'm testing you on. So let's go through just this some hints and some tips. Break this into smaller problems, create the additional CSS. First, I just used monospaced for this font up here, and I think the rest of it is arial or something like that.

[00:03:21] Doesn't really matter feel free to choose. There are so many ways to do this, so, so, so many ways. Do the way that makes sense to you.
>> Brian Holt: I use Flexbox to do the rows, you could do this all in one div using Flex wrap. That's totally up to you.

[00:03:43]
>> Brian Holt: The secret to getting equal gutters. So these little black lines between each other, you could do this with borders. I did it with, they're kind of gutters, so it's a black background and they're just a little bit spaced apart. [COUGH] and I give them a half percent space between them and that's how I was able to get that nice little even spacing between them.

[00:04:03]
>> Brian Holt: That's a good way to do it and then you can use space between to space them out.
>> Brian Holt: Just kind of a pro tip in general with CSS, it's hard to get equal horizontal and vertical spacing. And the easiest way to do that is, if you do margin-left and margin-right at 0.5% or something like that.

[00:04:24] Margin-bottom and margin-top are calculated in terms not of vertical spacing, but of horizontal spacing. Which is counter intuitive but also very helpful right because I can say margin bottom 0.5%. That's calculated in terms of horizontal space, so you can make them equal by using margins and percentages. I used last child to get these buttons to give them different classes too and I will be fine.

[00:04:59] Sometimes I just kind of eyeball it a little bit as well, or rather very often. Do I just kind of look at things and say, does that look evenly spaced close enough, right. JavaScript tips. There's no wrong ways to do this If you're writing over 200 lines of code, you're probably writing too much code.

[00:05:19] I think I did it in about 80 lines of code including all the extra white space.
>> Brian Holt: I use console.log a lot when I'm writing code, so feel free to just throw a console.log and see what's happening.
>> Brian Holt: You'll need to keep track of a lot of variables.

[00:05:35] Just kind of do that. Be aware that you need to do that. I like to break functions, or problems down into small functions. I wanna have one function that does one thing really well. That's kind of like just a good tip in general for programming. So in this particular example I wrote eight different functions and that's kind of how I handled it.

[00:05:55] And you can also add an event list node to each button individually. As you may imagine, I just wrote one that lists the top level and then does delegation from there. And we talked about type and coercion, stuff like that. Anything that goes into the DOM is inherently a string, right.

[00:06:17] So this 85 right here is a string. Everything that's on the DOM is a string, there's no numbers on the DOM. Everything gets turned into a string. So if I'm trying to add numbers to this, I have to turn it into a number first before I turn it back into a string.

[00:06:32] Because if I do 85 plus 8 when they're strings, I get 858. So make sure you're aware of that. Down here I have a little demo to show you how to do that.
>> Brian Holt: So I have const number equals 10, and then I have number target which is just gonna be some div.

[00:06:52] Actually, it's this div if we're being honest. And then I do console.log num, type of num, so a num, which is this one, we do type of type of gives you back what the type of that thing is, so if I do type of num it gives me number, right?

[00:07:10] Because num ten is a number. Then here I take that numb and I put it into a DOM and then I ask what is the type of innerText you probably guess what the name like innerText? It's gonna get me that string. So you have to sure that things end up being both numbers.

[00:07:30] The way that you do that is with a function called parseInt. You're saying here is a string, I'm giving you a string, I want you to try and give me back a number of that. So if I came in here and said, notice that this has quotes around it right now.

[00:07:45]
>> Brian Holt: Let's make this a little bigger. If I said parseInt
>> Brian Holt: Notice now it's a number, when I say here, parseInt.
>> Brian Holt: It gives me back number as well, right? So that's what parseInt does, it's like I have a string here, please give me back the number representation of that.

[00:08:13]
>> Brian Holt: I hesitantly show you typeof. Typeof is a strange beast, so be careful how much you use typeof. It's very useful for telling numbers and strings apart. So if you're using just numbers and just strings, use typeof to your heart content. If your getting into things like other types, then type level will give you some weird stuff back, so be aware of that okay, so take a shot at this exercise.