Adding Buttons

[00:00:00]
>> Jen Kramer: All right, so let's go on ahead and get started. Let's look at what I have given you to start with here. Some of this is important to the programming side of it, so I've given you a little bit here to start with. So we have a section with a class of screen.

[00:00:16]
And we have a section with a class of calc-buttons, all right? And there are lots of ways to code this with HTML and CSS. You might be thinking, why do we have a separate area for a screen? Why do we have a separate area for the buttons? The answer is, sometimes it matters in JavaScript, okay?

[00:00:35]
And Brian actually gave me this formula here for us to code, and so I am going to bow to his future lesson. And we're going to keep these divided up into two areas, a screen area and a button area, okay? So after that, then we have to go forward and code the rest of it on our own.

[00:00:55]
Over here on the side we have our wrapper. And so this is gonna set up our calculator here on our webpage, okay? So as always, let's start with thinking about the HTML, because if we can't actually see it to start with, we can't code it later, right?
>> Jen Kramer: Okay, so according to our instructions, I'm suggesting that we start with how many rows and columns we need.

[00:01:29]
So given the fact that this area up here, that's going to be the screen area there in the in the calculator, right? We're really worried about this bottom part. So how many rows and how many columns do we have here?
>> Speaker 2: Five rows.
>> Jen Kramer: Five rows.
>> Speaker 2: Four columns.

[00:01:51]
>> Jen Kramer: Four columns, correct?
>> Speaker 2: Isn't it six rows? With the-
>> Jen Kramer: Well, we're not gonna count the screen.
>> Speaker 2: We're-
>> Jen Kramer: We're not gonna count the screen, that's gonna be its own thing.
>> Speaker 2: Okay, I got you.
>> Jen Kramer: That's cool, that's gonna be its own thing. But everything else, that we are going to need to rough that out, correct?

[00:02:12]
Okay, so here's what I would recommend. Well, first of all, let me just ask you, what would you recommend? How do you think you would start this? Knowing that we have five rows, and four columns in each row, how do you think you would start this?
>> Jen Kramer: Just to sort of start some HTML, yeah?

[00:02:31]
>> Speaker 3: Can we create a grid of some sort?
>> Jen Kramer: Let's create a grid of some sort, right? Let's go ahead and code some tags that are gonna be rows, and let's throw in some other tags that are gonna be columns, sound good? Sound reasonable? Okay, so let's go on ahead and do that.

[00:02:51]
>> Jen Kramer: So up here for the screen, we can just simply say 0. Yeah, I mean, that's what's showing right now. All right, [SOUND] that's done. Let's move on to the rest of it. Okay, so down here for calc-buttons,
>> Jen Kramer: Let's make that a little bit bigger. So we're gonna have five rows, correct?

[00:03:16]
So what if we start with a div tag? We're really not trying to communicate any meaning to this, these rows are just here because we need to have numbers on the row, right? So div tag is a good choice. And let's give it a class=calc-button-row.
>> Jen Kramer: Okay, so there's our row, whoo-hoo!

[00:03:51]
Now how many of these do we need? Five of them? Right, five of them. Pull up the picture and take a look again. So one,
>> Jen Kramer: Two,
>> Jen Kramer: Three,
>> Jen Kramer: It's gonna be a mess, one, two, three, four, and one more, five
>> Speaker 3: Why would we call them all the same thing if some of them have different formats?

[00:04:37]
Like some only have three buttons, some have two buttons.
>> Jen Kramer: Great question. Why are we calling them all the same thing If some of these have only three buttons, and some of them have four buttons, and some have two buttons. That's kinda crazy, isn't it? Hmm, okay, that's because when we actually specify the rows themselves, those are literally the rows, right?

[00:05:01]
Inside of it we're going to have to have some kind of unit that's gonna represent how many things we have in each row, right? Correct?
>> Speaker 3: Correct, okay.
>> Speaker 4: Jen, can I ask, real quick?
>> Jen Kramer: Yeah.
>> Speaker 4: How did you highlight and move everything to the same-
>> Jen Kramer: How did I do that?

[00:05:17]
Highlight, click and drag the highlight. And I have a Mac, so I'm using the Apple key on Windows, I think it's just the Ctrl key. And then the the bracket keys, sort of to the right of the letter P, the square bracket keys, that will move everything together as a unit.

[00:05:38]
>> Jen Kramer: Okay, so let's skip the very first row right now, that one's gonna be tricky. We got some sort of weird Spanish thing going on. Let's work on the second row for the moment, cuz the second row is pretty typical, right? There's four things in that row, right?

[00:05:54]
Four things in that row. And it's three numbers and a multiplication sign, correct? Okay, so tell me how those things are gonna function. How are those things gonna function? Yeah.
>> Speaker 3: They're all buttons.
>> Jen Kramer: They're buttons. Do we know how to code a button?
>> Speaker 3: Yeah.
>> Jen Kramer: Sweet, let's go ahead and code some buttons.

[00:06:15]
So in that row, we're gonna need to have four buttons, correct?
>> Jen Kramer: So I'm gonna put in a button, and I'm actually gonna give these classes again. We have a lot of classes in this particular example. This is not the way I normally write CSS, but again, this may be very helpful to the JavaScript example that Brian is gonna show you.

[00:06:39]
In JavaScript, it's really easy to select things by class or select things by ID. So I didn't rewrite his code to take all the classes out. I've left them all in because he may be doing some selecting stuff with that. So we're gonna go ahead and set these classes up as calc-button, cuz that's what they are, right?

[00:07:01]
>> Jen Kramer: Now does anybody remember what goes in between the button tags here?
>> Speaker 2: What you want on your button.
>> Jen Kramer: What you want on your button. So what do I want on the first button?
>> Jen Kramer: What do I want on the first button?
>> Speaker 2: Seven.
>> Jen Kramer: Seven, okay?

[00:07:18]
So we're gonna go ahead and put a 7 on the first button. Great, guess what we're gonna do for button number eight?
>> Speaker 2: Same thing [INAUDIBLE]
>> Jen Kramer: How about the same thing, except it's gonna be an 8. Guess what we're gonna do for button number nine?
>> Speaker 2: Same thing.

[00:07:35]
>> Jen Kramer: Wow, you guys are so smart! Same thing, except we're gonna make the button say 9 this time.
>> Jen Kramer: Okay, and now for the last button, here. What is that button gonna be?
>> Speaker 2: Times.
>> Jen Kramer: This weirdo multiplication symbol, right? We could probably fake it with letter X, but there is in fact a multiplication symbol.

[00:08:00]
And if you refer back to the little text file that I gave you with this, up at the top of the page, I mentioned that there are codes for some of these funky symbols that are out there online. And I gave you a place where we could look those up.

[00:08:13]
So if you just go on ahead and copy that URL.
>> Jen Kramer: Let's go on ahead and look at that in a webpage.
>> Jen Kramer: And you'll l see here, this is a nice little reference that has lots of great symbols here for us. If you're putting up math on the web, this is gonna be super useful to you, because there's all kinds of crazy math symbols out there, right?

[00:08:46]
But fortunately, they put the ones that are most used right here at the beginning. So you'll see that there is a multiplication sign here, and there's a couple of different ways to write that.
>> Jen Kramer: So you can either use the HTML code. Which is this &#215 semicolon, or you can use the quote, HTML entity, which is & times semicolon, either one of those will work.

[00:09:12]
I'm gonna go ahead and use the actual times down here on the bottom because it's much easier to look at that code and know what that means than &#215. So you just need to copy that.
>> Jen Kramer: And then you can drop that in, for your button.
>> Jen Kramer: Make sense?

[00:09:38]
Okay, let's go on ahead and save that. And let's just look at that real quick in our browser. And see what we've got so far.
>> Jen Kramer: Do you see it? It's kinda small.
>> Jen Kramer: Looks like that. [LAUGH]