CSS In-Depth, v2 Counters Review
This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Counters Review" Lesson
>> Estelle: So, remember the counters? Here's a counter again. Can anyone tell me what this does?
>> Estelle: Okay, so-
>> Speaker 2: When you reload the page, it resets the counter?
>> Estelle: Exactly, yeah. Whenever it hits a body, and there's only one body, it resets the counter. Generally, I wouldn't even need that because it basically also creates the counter.
[00:00:28] The next one, what does this do? What does that match?
>> Speaker 3: Invalid input.
>> Estelle: Exactly, anything that's invalid, which is generally an input. And what does it do when it hits that invalid input?
>> Speaker 3: Increases the counter.
>> Estelle: It increases the counter with the name invalidCount. I could have any number of counters on this page.
[00:00:55] Just give each counter a unique name and then you can go with it.
>> Estelle: And then here I printed to the page. So I print the invalidCount counter. And so whenever,
>> Estelle: Whenever it counters something that's invalid, it actually does that. So now I know you understand that.
[00:01:26] So here's another example, and this is the one I was hoping you would play with. So,
>> Estelle: The reason I have, okay, so let's just look at the syntax here. So here, I have two quotes and then the counter. So the reason I have two quotes is because I have a space there, because I don't want it to look like that.
[00:01:58] So you quote the strings.
>> Estelle: And so I could do paragraphs,
>> Estelle: And then I could do that. And then I could do are.
>> Estelle: And then I could continue, I can have, doesn't matter how many quoted strings. The thing to note is, it's not interpolated, it is just presented as a string.
>> Estelle: Okay, so, if you see in the bottom left-hand corner, I somehow broke my counter. Because I'm still on slider number three, right there.
>> Estelle: So there's something wrong with my counter because it says number four, and then every time I move over it just goes back to number three.
[00:03:25] So the way the slide is created, it toggles the slide class on and off every time it gets a class of either far past, past, current, future, far future, those are the only ones with the slide class. Actually no, it's not that, it's all of the others have a display of none so they don't exist, and so they're not being counted.