All right.
Welcome back.
So in this video we're going to build the final project the tic tac toe game.
So let's head over to Sublime and we go inside the project folder.
Go to the starter files.
We're in right click on that folder and do new folder all those J us and right click inside of there
into new file and we'll call his main died J us.
And inside the index that each email file we you can see we have j ust me and J ust connected to this
one.
So what I want to do is console that log just to make sure that it's working.
So those two connected close that right click on the exact tonnage to Melbourne in the browser inspect
and you can see connect it.
So that's working so good.
All right.
So now what we're gonna do is delete that and I want to start writing out our code here.
So we're going to do a dollar sign document dot ready function
and we'll do a curly brace
and inside the function I want to do variable X equals X
then we're going to do variable o equals 0
and we'll do var turns equal zero.
Then we're going to do spot variables.
So we'll do it here in a comment that out and I'm going to do this.
We're going to go to the finish files and go to the jazz folder.
Could Amanda J ust and we're going to copy all these
and essentially what we're doing I'm a pace that is we're calling on the these right here OK so we're
saying I want to make each one of these variable.
So this ally with the idea of spot 1 spot to spot three spots 4 spot 5 6 7 8 and 9 I want them to be
variables so that I can call on all of them and give them different commands and functions to do what
I want them to do.
So next what we're going to do is we're going to create the board so let's do the dollar sign and we're
going to call on the I.D. board ally and we're going to dot on click
and we'll do kneecaps to lowercase and then we're gonna do a function and we're gonna do an if statement
which we're going to copy.
So what I want to do is we're going to
function and we're going to do f k and we'll return that twice.
And inside of here we're going to do the spot.
One has class of 0
and then
spot 2 as class
0 and spot 3
has class
0 and then two pipes like that.
Now what we're gonna do is I'm going to copy the code from the finish file again.
So we're going to spot four to the end here and I'll paste it right below here
space third and then inside of this one we're going to do an alert so do alert
winner capital all because that and then we're going to do dollar sign
parentheses and then board.
So the I.D. board and then apply that text on the plus sign and then close up and run into a dollar
sign.
Same deal quotes I.D. board ally that remove class and disable here in the dollar sign be bored.
How I got removed class
I really do.
Oh then you can copy this one page to read belonging into axis of Oh.
Everything else is going to be the same.
Then we'll do.
Else if
spot one has class.
I'll be an X.
And then
the two and signs.
Spot 2 has class.
Park and spot 3.
Has class parks
trauma do the same thing we're going to go to the main.
The finished file here.
We're just going to copy you know the stuff that would take a long time to type.
The repetitive stuff some a tab in here pasted right there and a highlight all this and have it over
now below that we want to do the curly brace and we're going to do another alert so alert and we'll
do Winter
X okay.
Close that and then we're going to do the tax method remove class method and it's going to be the same
as up here so we're just gonna highlight this and copy it right here pasted in there and it's the same
exact properties that looks good and then we're gonna do an LC f
turns are more than 9 tie game so.
So it's gonna be alert.
Tie game
and then below this we're going to copy this again because it's the same exact thing again for the tie
game because what you're doing is a return in the else if you want to return an alert winner.
X If this happens if this happens winner O is gonna get this so it'll be an alert.
So you're doing it.
If else statement or else if statement I should say so then we have alert.
Tie game so we have allied text method with the plus sign the removed class disable oh and X then we're
going to return turns equal zero and then below that it'll be else F and it be dollar sign.
This that has class
the same all
play and then we're going to return the function alert.
This is what this spot is already filled.
That that way you can't fold twice.
And then else if
turns Persia to
Rio equals zero.
Then we'll read another one here and this one is gonna returns.
Plus plus close that I will do dollar sign this text.
Oh and the dollar sign dollar sign.
This that ad class disable
oh
and then we're going to do if it's over this one
let's highlight from the let's save it first and then let's go over to our next instrument one inspect
this real quick so open the browser inspect and let's see if we have an errors
OK.
I have one error that's pretty good.
It's the most basic error of all that ready.
But that's good because we need to be checking this to make sure we know I'm here.
So let's inspect it again make sure we're clean and we are clean.
Good.
So now let's go back here and after we do disable Zero we're going to do an if statement.
So we're gonna do f spot 1 has class
0 0 0
and spot 2 has class
Mary Campbell guys.
Bear with me and spot 3 has class.
There were two pipes and then we're going to do the same thing we did the above.
So we're gonna do we're gonna grab all these right here but we're going to do.
Oh and sort of Ax grab all those.
We're gonna paste those right here and bring them back right there and then I'm gonna highlight them
all and have me over and then I'm gonna bring this one over so they're all lined up beautiful and then
below that we're gonna open up another function and we're going to return alert winner.
Oh.
And then turns equal zero current
and then we'll do inside of this one else and inside of there we're going to do turns
plus plus
OK.
And then we'll do this.
So I'm just gonna grab this right here because it's a lot of the same code.
So this tax is gonna be X instead of oh.
And this able x.
And then this
and actually we can copy all this.
So right below that we're going to return here and paste that in and instead of oh it's gonna be X so
we're gonna change all these to X
so the idea of this is to is that you write a reusable code and then use it over and over again instead
of having to write everything out.
So let's do X
turns equals zero and then we have.
So we should have
one two three.
Now let's inspect this and make sure that we're still clean in terms of errors.
We're clean right now.
Good.
So what I want to do then is after these three right here let's close that one that I'm going to.
We're going to set up the reset handler.
So when the dollar sign
parentheses and then the idea of reset click we function and it will be a bracket and inside of there
is a dollar sign and the I.D. board Ally I text
plus
and then the same note here we're going to board I.D. board ally dot remove.
Class which we talked about earlier
the symbol.
And then let's copy this one because we're going to the same class or the same method I should say two
more times already to remove class and this one will be oh.
And this one will be X OK.
And then we're gonna do turns equal zero and we're gonna close both of these and we should be working
so we can close them the finish files.
Like I said that's just for reference when I click open in the browser let's inspect this and you can
see we have no errors at all.
Congratulations on an error free project.
So you can see that the game is working.
There you go.
So the winner is.
Oh let's reset the game
and let's do that X is the winner and let's see what happens when we have a cat game or a cat scan.
I should say
I won the game
who won the game again.
OK.
I won the game again
there we have a tie tie game.
There you go.
So those are the three promptly you get you get the the winner the tie game so your winner for oh yeah
winner for X and then you get a tie game
and you also get this spot is already filled.
So those were the alerts that we were adding to the game and that's the functionality that we were building.
So congratulations on finishing this project.
I see in the next video.
Thanks for watching.