This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Counters Review" Lesson
[00:00:02]
>> 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.
[00:02:32]
>> 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:02:55] So, what I'm doing, the way I'm making my slide deck work is each slide has the class of slide, and then there's far past, past, current, future, and far future. And I think what I'm doing is I'm removing the slide class from the slide. Because I pulled it out of JavaScript, and I think I pulled an old version of this JavaScript, which created these a different way.
[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.
[00:03:48] It's one of those two things that are happening, either I'm removing the slide class from those or it's display none, so it's not being counted. And that's why there's just one through five in this deck and that's all you're ever going to see. And I'm pretty sure it's the not counting the display none, which is the reason, cuz I'm not sure which JavaScript I used.