Check out a free preview of the full Calculator Project: HTML & CSS course:
The "Adding Math Buttons" Lesson is part of the full, Calculator Project: HTML & CSS course featured in this preview video. Here's what you'd learn in this lesson's course:

Jen adds the math buttons into the calculator.

Get Unlimited Access Now

Transcript from the "Adding Math Buttons" Lesson

>> Jen Kramer: We've got the easy rows done, right? Those are the ones with four things in them. So let's go and take a look at this one here, the one with three things in it. So clearly, what is the difference between that row, this C, backspace, division versus the 7, 8, 9 times row?

What is the difference between them?
>> Speaker 2: One of your buttons spans two columns.
>> Jen Kramer: One of the buttons has to span two columns, correct? But are they all still buttons?
>> Speaker 3: Yes.
>> Jen Kramer: They're all still buttons, okay? So what we should do then for that first row, we're just gonna have three buttons instead of having four, correct?

We'll go ahead and copy that.
>> Jen Kramer: We can paste those buttons in place.
>> Jen Kramer: Change what they are, so one button is gonna say C. One button's gonna say divide, right? Look up our divide code, so it's just divide. So &divide, okay. And this middle button, you're going to need the other web page that I mentioned here in the notes.

So the one about arrows, same website, but it's the one about the arrows.
>> Jen Kramer: Look at that, there's an arrow right there, that one looks pretty good. And so you can go ahead and copy the code for that, which is &larr, L-A-R-R, and put that code in place.

>> Jen Kramer: Okay, so the C, though, that button is twice the size of the others, correct? That one's spanning two columns. And so we're going to need a way, probably another class, right, to differentiate that button and the way it looks from the other buttons, true? That's a reasonable thing to do.

So what I'm going to do here for this next button, here in calc button, let's go ahead and give this a second class of double. I've seen some people online doing this. You can have a lot of classes applied to the same thing in your document. You don't have to have a single class per HTML element.

If you want to use multiple classes, you're going to have a single class attribute. So in other words, you don't say class=, class=, class=. That will not work. Say class=, and then you're gonna put both class names here inside, all right? So in this case, it's gonna say calc button.

And I've added this class of double because I want it to go over two columns. So it's a double width button, that's how I came up with that name.
>> Speaker 2: So even though it's one string, the space means that it's considered two things.
>> Jen Kramer: It's considered two things with the space in between.

Yeah, no commas. It's a space this time. And I am sorry, [LAUGH] welcome to the wonderful world of computer science