Transcript from the "Hover State & Flex-Basis" Lesson
[00:00:00]
>> Jen Kramer: So, we're almost done. We're almost done. Just a tiny little bit left to go. So, we've done so much work on these buttons. Let's go on ahead and set up a hover state for this. Sound good, since we're here? So, what will my selector look like?
>> [INAUDIBLE]
[00:00:22]
>> Jen Kramer: Colon hover correct. Calc button, colon hover and I think the background color is gonna get a little bit lighter. Bbcbe, that's from your list, and I missed a b, bbbcbe. So, now we'll have a nice hover state on those buttons.
>> Jen Kramer: So pretty, wow, this color should actually be ebebeb.
[00:01:02]
And then, there's an active state.
>> Jen Kramer: Active, and that active state was bbbcbe, thank you. Now active state, anyone know what active state is? I haven't really spent a lot of time talking about the active state of a link. Active is the moment after you click something, but before the page has loaded or before something happens next, okay, so in the dial up days this was a really important state.
[00:01:35]
Now that many of us live on broadband we also never see the active state anymore. But, it's got coded so we'll go ahead and add it. It may never be seen but we'll go ahead and add it. Okay, so what have we got left to do on this calculator?
[00:01:54]
There's really like two big things left to do. Here's what ours looks like. Here's what the spec looks like What do we need to do?
>> Speaker 2: We need to make that zero span that triple space.
>> Jen Kramer: Yeah, we need to do a triple. We needed to code something up here to make the zero stretch and what else?
[00:02:13]
>> Speaker 2: On the top, we need to find a way to make that C do double space and have the other ones together on the right.
>> Jen Kramer: Correct, we need to make the C go double, right? So basically, we need to code that double and then that triple that we put it on our HTML, right?
[00:02:27]
Anyone have any suggestions for how we should do that? What property are we manipulating?
>> Speaker 3: Flex?
>> Jen Kramer: Is it flex? Not flex.
>> Jen Kramer: Flex.
>> Speaker 3: Flex spaces?
>> Jen Kramer: Spaces, correct the flex basis property is what we're concerned with. So, we're going to have a class for double.
>> Jen Kramer: And we're going to have a class for triple, right.
[00:02:58]
>> Jen Kramer: So, anyone wanna take a guess at what the number might be for double or for triple?
>> Speaker 3: 50.
>> Jen Kramer: 50?
>> Speaker 3: Or perhaps 49.5.
>> Jen Kramer: Something like 49.5? Yeah, he's actually got exactly 49.7, so, flex hyphen basis. 49.7. The way he's coded this, again, because he didn't use the borders, he's doing some higher math here in order to make these buttons stretch and fit, and the lines look good and all the rest of it.
[00:03:31]
He probably started with something like, well if you double the flex basis there, 24.5 times 2. You get 49 that was probably a little bit too small made the borders a little bit too fat. So, he tried a couple of different numbers, and 49.7 looked good. So that's probably how he got that number.
[00:03:51]
And then, for triple what are we gonna put in here? Some some number that's close to that.
>> Speaker 3: 74.7
>> Jen Kramer: 74.7 that's a great guess Cassie he's got 74.8 [LAUGH] well done. Okay, go ahead and save that. So, some kind of number like that. And,if you refresh wow.
[00:04:20]
So, that look like a really hard layout to start with. But in fact, when you break it down, the way I showed you, thinking about how many rows how many columns, what do we need to do? What is each element going to do? Sometimes believe it or not, it sounds really dumb.
[00:04:34]
But, when you say these things out loud I need to have a button that stretches across three columns. I need to have a button that stretches across two columns. Sometimes things will click in your head when you actually think about the question in that way.