In today's view, we're gonna be taking a look at making a fun project, which is tick tack toe, and this is a great project because it's a very simple game.

But there's a lot of complex stuff that you have to think about and understand in orderto actually build a really good working tick tack toe project.

So let's get started now.

Welcome back to Web, Debs simplified.

My name's Kyle, and my job is to simplify the Web for you.

So if that sounds interesting, make sure you subscribe to my channel for more videos just like this one.

And to get started on the right hand side.

Over here, I have the finished version of our tick tack toe.

As you can see, it's very simple, and when we have her over, we can select exes, and then it's going to go over to let us select, sit close and then exes and oh's and exes and oh's.

And eventually, when someone wins, it's going to say that they won and we have the option to restart, and we can do it all over again.

But if for some reason no one actually wins so If we get aboard that ends up looking like this, it'll say draw and then it'll allow us to restart.

This may look really simple, but there's actually a lot of complex logic that goes into it, which I'm going to be covering throughout this entire video.

So make sure you don't miss any of it to get started, though All we need to do is first created html page.

We'll call it index dot html and if we type exclamation point and hit enter, it's going to generate all of the boilerplate clothes for us.

As you can see here next, we're gonna add in a link tag for STI SS, and we're gonna use a style sheet called stiles dot CSS.

This is where we're gonna put all of our styling so we can have all the hover effects, and then we're gonna create a script tag, which is just going to be here script dot Js And this is where we're gonna put all of the logic and we're just gonna make sure we defer this.

So what loads after the body of our HTML.

So that way we have access to everything inside of the body and now to actually open up this index file.

If you install the extension called live server, you can just right click this and open it with live server.

And it's gonna show up on the left hand side here on the right here, as you can see, and that's just a completely blank screen.

And every time we make changes and save, you see that they're going to be persistent over here.

So what we need to do is first create our board for our tick tack toe so you could just create a div with the class of board.

This is going to be where all of our tick tack toe elements are going to be inside of it.

And we also want to be able to access this and the JavaScript.

So we're going to give it an I.

D.

Of board as well.

This will just make it so we can easily access this in the Java script and the reason I'm not using the class to access it in the Java script s so that I can separate my CSS and my JavaScript.

I have an entire block article on this which I will link to down their description.

If you want more information about that now, the next thing we need to do is we need to have nine different cells, one for each one of the places we can put a mark.

So an easy way to do that with end it Because we can say dot Sell This is going to give us one cell.

But if we want nine, we can just say times nine and now you can see that we have nine cells being generated.

Also, I'm going to use data cell to denote thes again.

This is so we can easily access this information in the Java script without actually using the class cell.

Since this is going to be for our CSS, and that's all we need to create our board, all that's left to do is to create the page that shows up when someone actually wins.

So if we just come here and have them when we want to be able to create this page here, so an easy way to do that is we're gonna create something we're gonna call it winning message.

This is going to be that def.

That's gonna have that black section around it and inside of here we're gonna first want to have a div which is going to have this text here so we can just say div, you want this toe?

Have a data.

What's winning message text just like that.

This is where our winning message text is gonna go.

So exes, winos win, draw whatever it is.

And then also, we need to have that button so it's create a button and inside of here we just want to put the text restart and we're gonna give it an I D.

Which is just going to be restart button and up here.

We also want to give an I d toe are winning message.

This is just again so we can access it easily in the Java script.

And this right here is all of the HTML we meet.

If we refresh you see, we just have a single restart button.

That's fine for now, because to actually make this look good like this, we're gonna need to do a bunch of styling and R C s s.

So it's actually create that styles that CSS and start working on all of the CSS styles Now, the first thing that I want to do is set up some basic box sizing, so we can just say everything selector.

We want everything in the after and we want everything that is going to be a before element.

Essentially, this selects absolutely everything.

We're gonna set this to box sizing of border box.

This'll make styling our wits and heights so much easier.

The next thing that I want to do is to work on actually styling the body.

This is again just going to be really easy.

We just want to remove margins.

And if we say that you'll see this button over here moves up because we got rid of all of the margins on the page that'll make this black background so much easier to put in place.

The next thing to work on is the actual board.

If you remember, this is the element that wraps all of our cells.

And we want this to be here a with for example, of 100 view with and we want to give it a height lives right of 100 of you height and what this is going to allow us to do is actually make it so that our board is gonna fill the entire screen, which will make it so we can very easily center it inside of our screen.

So dissenter it.

We're gonna use displayed grid toe, lay out our items inside this grid, and we're also going to justify content in the center and a line I content in the center this is going to center are bored element.

So everything inside of the board is gonna be centered inside of the board, Dave.

And we can see that by just selecting our cells.

We're just gonna give it a width for now of 100 pixels and a background color of black.

And if we come over here and make sure that we give this height as well of 100 pixels, you can see we have nine different cells in here, and they're all perfectly centered inside of this screen, which is great now to make it so that we actually have our grid elements inside of this three by three grid instead of just in a line we can do is we can select grid template two columns and we want to repeat three separate times So we're gonna have three separate columns, all just auto sized.

So they're gonna be the same size as the individual cell down here.

And if we save, we now have this three by three grid.

If I just give this a little bit of a border will say one pick soul, solid white, you can see it.

That's three by three grid showing up dead center inside of our screen.

Which is exactly what we want now.

Too easily modify things with our width and height and make sure everything's super automatic.

What we're gonna do is come up here and select our route element and we're gonna create some variables.

The first variable we're gonna create is going to be our cell with which is going to be 100 pixels.

What?

She just changed us to sell size, since it's the same width and height.

And then we can set our with to be that cell size because the same thing tore height.

And if we save you see, nothing has changed.

And if you're not familiar with CSS variables, I have an entire video covering them, which I'll link in the cards and the description down below.

Now the next thing we need to do is, as you can see, here are exes and oh's are slightly smaller than the size of our container that were put into a slightly smaller than this cell.

So what we want to do is we want to create a market size.

This is going to be how large these X's and O's they're gonna be.

And we can actually just calculate that from our cell size so well, access our cell size.

We're gonna multiply this by 0.9.

Essentially, we want this market size to be 90% of the cell size, and we'll use this a little bit later when we create our exes and ah Rose.

Now the last thing we have left to do to ensure that our exes and oh's are always centered inside their box.

We can do justify items center, and we could do a line items in the center, and this is going to align the actual individual things inside of our cells and not the actual cells themselves.

And if you're confused about great it all, I have an entire video covering CSS grid on like that again in the cards and the description down below.

So now that we have our board set up, we can actually work on finishing up what our cell is gonna look like.

Obviously, the background color is not gonna be black.

So the corner move that.

But we are going to use a black border around these.

If we come over here, you can see we have our black border set up, and it looks pretty good.

Other than the fact that we have all these extra borders around the outside that we want to get rid of.

This is actually fairly straightforward to get rid of.

We know that this is a three by three grid.

So the 1st 1 here is 123456789 So what we want to do is we want to remove the grid from our 1st 3 elements here.

So we can say so.

First child, we want to again come in here, and we want to get this cell of the second child so we can use and child to weaken, do the exact same thing before 1/3 child.

So and the child of three and we want to remove the border top to be none.

And if you say that you can see we got rid of the border on the top of our page, the next thing we can do is we can select ourselves of and child.

And instead of selecting individual child's, we can say three n plus one on with is going to do is going to go through all of our Children inserting end here.

So for one, it's going to be three times one, which is three plus one, which is four.

That's going to be this cell right here for zero.

It's gonna be cell number one, and for two it's gonna be cell number seven.

So it's these left three cells we can do as we can.

Just set the border to the left to be nun.

And if we save, you can see we got rid of left border on those left three cells.

We could do essentially the exact same thing.

If we just copy of this and we want to do instead of here three and plus one, we're gonna do three and plus three, so that'll get the right side of ourselves.

We can save border right is none.

And there we go.

We got rid of that right side, and the last thing left to do is the exact same thing we did here.

But instead of the first child, we want the last child.

So we can say last child, we want the eighth child and the seventh child.

So these are gonna be our bottom three, so we'll get rid of the bottom order.

And there we go.

Now we have our tick tack board set up exactly the same sort tick tack forward over here.

The next thing I want to work on is the individual exes and those that go inside of our cells.

And we're gonna use a class of dot X.

So we'll have dot So dot X and this is going to be where the styles for Excel was gonna go.

So let's make sure our first so here is just going to be an XL.

And for now, we can just change the background color to red.

And as you can see, our first cell is going to be that ex cell so we can remove this packer and color and get started on adding in the X And you may think the easy way to do this is just to add it X inside the cell like this.

But then we have to worry about font sizes.

And this ex, depending on what fun you use, is gonna look different on different browsers and with different funds.

And it's gonna be hard to center.

It's just not gonna look very good.

So instead, what I think we should do and what we are going to do is we're gonna use just plain CSS to create the X shape for us.

It's actually fairly straightforward as long as we use pseudo elements.

So we're gonna use the before and the after element so we can get here the before and the after element.

And inside it here, all we need to do is set a content to something.

In this case, it's going to be an empty string that way, these before and after elements render.

And then we can come in here and create a with what we're just going to calculate the size of this with, for example, was going to be our mark sighs, and we're just gonna multiply that by 0.15 we want it to be about 15% of the height of our X seven.

Our height is going to be that variable mark size and just to see how this looks but set in the background color of black.

And if we save and you'll notice, nothing is actually happening yet, which means there's probably a problem with our mark size variable.

Let's go take a look at how we define that and you'll see that I missed to see in calculus.

So now let's say that and you'll still notice nothing is happening.

And the main reason for this is the fact that our cell is not actually displaying the contents inside of it very well.

We want to change this, to be displayed flex, justify the content in the center and align the items, what items to be in the center.

And now if we say that, you can see that our bars air showing up and they're looking exactly like we want them to.