Transcript from the "Button Layout" Lesson
[00:00:00]
>> Jen Kramer: So, next thing let's do, let's work on the layout of these buttons.
>> Jen Kramer: So, clearly these buttons right now, are they block are they in line?
>> Misha: In line.
>> Jen Kramer: In line, how do you know that Misha?
>> Misha: Because, there is wide it as their content.
>> Jen Kramer: They're-
[00:00:18]
>> Misha: And they're right next to each other.
>> Jen Kramer: Exactly, there is wider as their content and they're right next to each other. Okay, so buttons are an inline element. And clearly, somehow we need to get these buttons looking in this lovely grid and all lined up and pretty looking.
[00:00:36]
Instead of just sort of wherever they happen to be, which is what they are right now, correct? Given what you know, all the things that we've done over this last week, what would be a good method of laying out these buttons?
>> Jen Kramer: What would be a good method of laying out these buttons?
[00:00:59]
>> Speaker 3: Display a Flex?
>> Jen Kramer: Flex box, yeah, flex box. So let's use flex box to lay out these buttons, okay? So if we take a look at our code.
>> Jen Kramer: Where are we going to place our display flex? We need to find a parent to put this on, right?
[00:01:20]
What is our parent going to be and what is our child going to be for Flex box? Emma?
>> Emma: The parent would be the calc button row, and the children would be the button.
>> Jen Kramer: Correct, so the row is gonna be the parent. That's gonna be the flex container, it's also the parent.
[00:01:42]
That is going to be the thing where we're gonna set our up those properties and then the buttons are the children. So let's go ahead and add them to our calc button row style. We already have one going, what do I need to put here?
>> Misha: Display?
>> Jen Kramer: Display Flex, yeah, what else?
[00:02:03]
Anything else?
>> Speaker 3: Flex flow.
>> Jen Kramer: Flex flow?
>> Jen Kramer: Row nowrap.
>> Jen Kramer: It's not no-wrap, it's just nowrap, all one word, okay.
>> Jen Kramer: Okay, and we can also do a what? Justify content space between, right?
>> Emma: We don't want space between.
>> Jen Kramer: We didn't do space between, we did go over it, right?
[00:02:43]
>> Emma: We went over it but, do we want that in the calculator, cuz the buttons are right next to each other?
>> Jen Kramer: Well we do have, I'm gonna do that a bunch of times. We do have these little black lines here, don't we? Those could be borders or they could be the space in our flex box.
[00:03:02]
Because we just set the background to be black. So that could be the space filling in with the black behind it.
>> Emma: Okay.
>> Jen Kramer: Yeah, there's a couple of ways of doing that. Okay, so let's go on ahead and save that,
>> Jen Kramer: Here we go, what do you think?
[00:03:33]
>> Jen Kramer: Okay, all right, it's not beautiful but what? We definitely have a nice column going on over here, yeah? Definitely have a good column going on here. The zero is clearly taking up a lot of room. The one thing that's weird is that first row, correct?
>> Jen Kramer: Okay.
[00:03:56]
>> Jen Kramer: We're closer, we're definitely closer. So let's go ahead and code up the calc button.
>> Jen Kramer: So now that we have a row all set up, let's go ahead and code those buttons.
>> Jen Kramer: Calc button.
>> Jen Kramer: So a couple things we're gonna do here,
>> Jen Kramer: I want you to go ahead and try setting up a background color and a text color for this button.
[00:04:29]
>> Jen Kramer: Based on what you know. So you'll need to look at that text file and see if you can figure out what should the background color be and what should the text color be. Based on our specification and based on what you've been given in terms of that text file, it gives you the instructions.
[00:04:44]
See if you can code those two things. Background color, and the color of the text.