Transcript from the "Keeping Score & Winning" Lesson
[00:00:00]
>> Brian Holt: So we're close. Now all the animations and showing up and going away, that's all working. But now we need to keep track of the score. So we're gonna say, we'll put it up here at the top, let's score = 0.
>> Brian Holt: And when they get to ten points, they're going to win.
[00:00:31]
So you can keep track of points however you want to. I think in my notes I have it at increments of ten, but there's not reason why we couldn't just do it by one. So if
>> Brian Holt: Score is greater than or equal to 10, then win the game, all right?
[00:00:48]
The win method here in just a second. And then up here we're gonna say score plus plus. So they're going to get one point for every time that they click on one of these. Once they get to 10 points then they're gonna win.
>> Speaker 2: This is in the feed function?
[00:01:02]
>> Brian Holt: Mm-hm, bottom of the feed function.
>> Brian Holt: Okay, good so far?
>> Brian Holt: Okay, underneath that we're gonna create a function called win.
>> Brian Holt: And all we're gonna do with the win function is we're gonna say document.get.querySelector.bg and we're going to say, class list.ad hide. And then relatively similar, we're going to have another thing called the win screen and we're going to remove hide from it.
[00:01:59]
>> Brian Holt: And then we're gonna go have to create both of those things.
>> Brian Holt: Okay, so it just wrote that right there. Now we're gonna go into our styles and we're gonna add two things here. One of them is gonna be called
>> Brian Holt: Hide, that's what we called it.
[00:02:23]
So hide is gonna be display none, whatever has hide on it is not gonna show up.
>> Brian Holt: So honestly, we have gone up here, we could have just reused that as well. But because those are kind of semantically differnet, I'm going to keep them as separate classes. But you could have also just have done something like this as well.
[00:02:48]
Or you could just use gone in both places as well. I'm fine with any one of those solutions.
>> Brian Holt: So we'll just keep it like that for now.
>> Brian Holt: Okay, now we're gonna go into our index.html. We're gonna add an image down here at the bottom. Its source is going to be ./win.png, and you've won the game.
[00:03:22]
>> Brian Holt: And it's going to have a class of win. And as well as we don't show it initially, so we're gonna have it be hide.
>> Brian Holt: So now hopefully, if we refresh this and we click on ten of these,
>> Brian Holt: One, two, three, four, five, six, seven, eight, nine, ten, and you get a happy little mole at the end.
[00:04:10]
>> Brian Holt: You might put it to like two or three if you're testing, rather than make yourself have to click through ten every single time.
>> Brian Holt: So when we add the hide to the background, that's going to hide basically the entire game board. Which is why all that stuff has gone away.
[00:04:33]
And now, it's just the win screen.