Build Tic Tac Toe With JavaScript - Tutorial

hello everyone in today's veal we're gonna be taking a look at making a fun project which is tic-tac-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 order to actually build a really good working tic-tac-toe project so let's get started now welcome back to web dev simplified my name is 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 tic-tac-toe as you can see it's very simple and when we hover over we can select X's and then it's going to go over to let us select suppose and then X's and O's and X's and O'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 a board 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 create an HTML page we'll call it index.html and if we type exclamation point and hit enter it's going to generate all of the boilerplate code for us as you can see here next we're gonna add in a link tag for CSS and we're gonna use a style sheet called styles.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 j s and this is where we're gonna put all of the logic and we're just going to make sure we defer this so it loads after the body of our HTML so that way we have access to everything inside 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 going to show up on the left-hand side here or on the right here as you can see and then it's just a completely blank screen and every time we make changes and save you see that they're going to be over here so what we need to do is first create our board for our tic-tac-toe so we can just create a div with the class of board this is going to be where all of our tic-tac-toe elements are going to be inside of it and we also want to be able to access this in the JavaScript so we're going to give it an ID of board as well this will just make it so we can easily access this in the JavaScript and the reason I'm not using the class to access it in the JavaScript is so that I can separate my CSS and my JavaScript I have an entire blog article on this which I will link to down the 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 ended cuz we can say dot cell 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 these again this is so we can easily access this information in the JavaScript 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 win 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 going to call it winning message this is going to be that div 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 and we want this to have a data whoops winning message text just like that this is where our winning message text is going to go so X's windows win draw whatever it is and then also we need to have that button so let's create a button and inside of here we just want to put the text restart and we're gonna give it an ID which is just going to be restart button and up here we also want to give an ID to our winning message this is just again so we can access it easily in the JavaScript and this right here is all of the HTML we need 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 going to need to do a bunch of styling in our CSS so let's actually create that styles that CSS and start working on all the CSS styles now the first thing that I want to do is set up some basic box sizing so we can just say to everything selector we want everything in the actor and we want everything that is going to be a before element essentially this selects absolutely everything and we're going to set this to box sizing a border box this will make styling our widths 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 save it 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 width for example of 100 V width and we want to give it a height whoops height of 100 view 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 to Center it we're gonna use display grid to layout our items inside this grid and we're also going to justify a content in the center and a line I content in the center this is going to Center our board element so everything inside of the board is gonna be centered inside of the board div 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 a height as well of 100 pixels you can see we have nine different cells in here and they're all perfectly centered inside of the screen which is great now to make it so that we actually have our grid elements inside this 3x3 grid instead of just in a line what 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 going to be the same size as the individual cell down here and if we save we now have that three by three grid if I just give this a little bit of a border we'll say one pixel solid white you can see that 3x3 grid showing up dead center inside of our screen which is exactly what we want now to 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 root element and we're gonna create some variables the first variable we're gonna recreate is going to be our cell width which is going to be 100 pixels what you just change this to cell size since it's the same width and height and then we can set our width to be that cell size we can do the same thing to our 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 our X's and O's are slightly smaller than the size of our container that were put in and in slightly smaller than this cell so what we want to do is we want to create a mark size this is going to be how large these X's and O's are going to be and we can actually just calculate that from our cells size so we'll access our cells size and we're just going to multiply this by 0.9 essentially we want this mark size to be 90% of the cell size and we'll use this a little bit later when we create our X's and arroz now the last thing we have left to do to ensure that our X's and O's are always centered inside their box we can do justify items Center and we can do align 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 at all I have an entire video covering CSS grid I'll link that again in the cards in the description down below so now that we have our board set up we can actually work on finishing up what our cell is going to look like obviously the background color is not going to be black so we couldn't remove that but we are going to use a black border around these and 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 3 by 3 grid so the first one here is 1 2 3 4 5 6 7 8 9 so what we want to do is we want to remove the grid from our first three elements here so we can say so first child we want to again come in here and we want to get the cell of the second child so we can use a child - then we can do the exact same thing but for a third child so and the child of three and we want to remove the border top to be nun and if you save 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 our cell of end child and instead of selecting individual child's we can say 3 + + 1 and what this is going to do is going to go through all of our children inserting n here so for 1 it's going to be 3 times 1 which is 3 plus 1 which is 4 that's going to be this cell right here for 0 it's going to be cell number 1 + 4 - it's gonna be cell number 7 so it's these left 3 cells we can do is we can just set the border to the left to be none and if we save you can see we got rid of the left border on those left 3 cells we can do essentially the exact same thing if we just copy this and we want to do instead of here 3 and plus 1 we're gonna do 3 and plus 3 so that'll get the right side of our cells so we can say 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 8th child and the 7th 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 tic tac board set up exactly the same as our Tic Tac bullard over here the next thing I want to work on is the individual X's and O's that go inside of our cells and we're going to use a class of X so we'll have cell X and this is going to be where the styles for our Excel is gonna go so let's make sure our first cell here is just going to be an Excel 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 Excel so we can remove this background color and get started on adding into X and you may think the easy way to do this is just to add an X inside the cell like this but then we have to worry about font sizes and this X depending on what font you use is going to look different on different browsers and with different fonts and it's going to be hard to Center it's just not going to look very good so instead what I think we should do and what we are going to do is we're going to 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 going to use the before and the after element so we can get here the before and the after element and inside of 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 width which we're just going to calculate the size of this width for example is going to be our mark size and we're just going to multiply that by 0.15 we want it to be about 15% of the height of our X so then our height is going to be that variable mark size and just to see how this looks let's set in a 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 bark size variable so let's go take a look at how we define that and you'll see that I missed a C in calc here so now let's save 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 display flex justify the content in the center and align the items whoops items to be in the center and now if we say that you can see that our bars are showing up and they're looking exactly like we want them to but right now we're rendering an L and we want to render an X right now we have two different elves being shown so we can just select one of these elves we're going to say that before one for example and we can actually just rotate it by saying transform rotate and we're gonna rotate this 45 degrees and as you can see that's one part of our X done now let's do the same thing for our after element and we're going to rotate this the opposite direction and you can see we have the other portion of our X done but it looks not very good luckily there's a really easy fix to make this work right now the reason that they're showing up offset like this is because they're both displayed next to each other in the document flow because there is static what we need to do is position them absolutely that way they're going to have the exact same base which is going to be the parent and they won't overlap over top of each other and all we need to do now is set it so that the cell is position of relative just like this and now as you can see we have a perfectly scaled X which has the exact same amount of space between all of the different edges exactly like we want the next thing we want to work on is the O class the circle class so we can do is just make this big class of circle which is what we're gonna use to create these oh right here and again you may think let's just put in a big capital o and that may work with depending on your fonts and everything it's not gonna be a perfect circle it's not gonna look right it's just not gonna be what you want so instead we're gonna create this entirely inside of CSS and we're gonna do it very similar to how we did this X so let's just copy down this X we'll just save this portion right here we want to position it absolutely we want a blank content we want the width and height to both be the same they're both gonna be this mark size just like that make sure that we put the semicolon here and now if we say that you can see oops if we change this to be circle and this one to be circle you can see that we have a giant rectangle or square actually that's black right here which is perfect for now all we need to do is turn these into two separate circles so the first thing that we can do is we can give the before elements so we can say that circle before and we want this to be the larger of our circles because we want it to be behind the other smaller circle so we can copy over this width and height we want the large width and height we're going to make sure we set a border radius here of 50% so it's going to be a circle as you can see and we're going to change the background color of only the before one to be black now if we do the exact same thing but for the after whoops after and we change this to be slightly smaller we're just gonna say maybe times 0.7 so it's gonna be slightly smaller so now we have a width and a height that are both 0.7 of the original width and height of the larger circle if we change the background color to white you can see now we have a perfect looking circle inside of our box here whenever we put the circle class now this is working great and everything is showing up perfectly but there's a few extra things we can do to make this work even better as you can see in this example when we hover over a row we get that nice little pointer icon but we also get the symbol that whoever's turn it is so for example it's exes terms so we get an X also if we hover over a place that already has an indicator we get this nice not a loud symbol showing up saying that we cannot click on this so the first thing we can do is for all of our cells what we want to do is we want to add a cursor whoops a cursor and we want this to be the pointer cursor and now you can see we get a pointer cursor for every cell we highlight over but if we highlight over one of these cells that already has something inside of it so if we highlight over a cell that is either an X so or a cell that has the circle class so essentially it already has an element inside of it we want to change the cursor here to be not allowed now as you can see we get that nice little not allowed color sir over these ones and the pointer cursor over all of these ones now let's work on actual hover effect and this is going to be by far the most complex part of the CSS so in order to determine whose turn it is we're going to apply a clasp to the board either circle in the case of the circle or we're going to use X in the case of X so let's just start with X just like we did before so now every time I hover over one of these elements it should show me the X hover so it should show me this X that you see right here and in order to do this we need to add hover effects to our cells so the first thing we want to do is select our board when it has the X class applied to it and we want to get the cells and side of that board and whenever we hover them we want to do something to them and what we want to do it here is actually the exact same thing that we're doing down here we're just going to be changing the background color so what we can do is we can just copy this over and add it down to here so we want to get the before and then we also want to do the exact same thing but for the after element so now whenever we hover over a cell when it's X's turn or going to apply this class to it we also want to do the exact same things down here with this before so we want to make sure that we're only selecting the before so here now when we hover we're doing the exact same thing and let's copy over the after and do it down here and if we go over here you can see now when we hover get this X and it's going to do that on all of them as you can see it's even doing it when we hover over here or after this one what we want to do is actually just make us that's only going to work when we hover over an empty cell essentially a cell that doesn't have an X or out in it and this is where we can use the knot selector so we can say : not dot X so it's the same it doesn't have an X and we want to do : not dot circle so what this is saying is only apply this hover effect when you're not already on a X or a dot circle cell and we want to do this for all of our cells so let's just copy this down to all of them and now when we hover over one of these X's or OS you can see it's not overriding what we've already done there it's not doing this hover effect because it's checking this not condition right here it's fairly complex but if you think about it and analyze it a little bit hopefully it'll make sense for you now the last thing we need to do is obviously change this background color so let's just come up here we have our hover we want to make sure we copy this just like this so when we're hovering over a cell that's not an X and it's not a circle what we want to do is change the background color to be light gray just like that and we want to do the exact same thing for after oops so we'll come up here and we're gonna say after but of course if we hover over here you see that that's not actually working and that's because we already have black being defined in here and it's overriding the light gray that's above it so we need to do is also just select our cell dot X we want to do our before and we also want to do it for our after so we'll say dot cell dot X after and what we want to do is put the background color of black inside of there and just make sure that this is defined above our other selector just so it'll override properly and now as you can see we get a light gray X every time we hover over an open cell when we have this x class on our board so now let's just do the exact same thing but for circle now we should get a circle whenever we hover over any of these different rows so this is going to be a very similar tactic to what we did before so we can just find our circle code which is right down here and what we want to do is we want to say when we're on a board that has the circle class we want to get the cells inside of it that are not already in X and that are not already a circle and we want to check when we hover over them we want to style the before element and we also want to style the after element to be exactly the same and we want them to have this different positioning and such just like this we also down here want to do the exact same thing so we want to select the before to go with this before and you can see that's working here and the exact same thing here but we want to do this for the after now if we hover you see we're getting the black circle so again we need to remove this black out of this area and put it up here just like we did this with the settle for the X so we'll just say so dot circle and we want to do deep before and we want to change the background color here to be black and actually since this is exactly the same we can just put this up with this class over here and then what we can do down here is say when we have a board that has the circle class and a cell inside of it that is not an X and it's not a circle whenever we hover over it we want to select the before element and change the color to light gray now lastly to get this to work all we need to do is come down here remove this background color of black and if we save you can see we now have light gray circles appearing whenever we hover over one of these cells and if we change this back here to be X we now get the X's which is exactly what we want now finally the very last thing we have left to style is going to be this button down here this restart button so it shows up dead center in the middle of the screen luckily the styling for this is going to be so much easier what we want to do is we want to select that winning message div that we created and we're going to do is we want to make sure this is positioned always in the center of the screen and we want it to always take up every space so we're going to position it fixed we're going to set the top to 0 the left to 0 the right to 0 and the bottom to 0 and if we come in here and we just add a small background color so we can actually see this we're going to use our GBA and we want this to be black so we'll say 0 0 0 and 90 percent transparent and as you can see we have a black overlay covering the entire screen the next thing to do is to make it so that our button is centered inside this so we'll just come in here display of Flex justified content in the center and will align items in the center and as you can see it is now centered our button force which is exactly what we want also let's add a little bit of text in here we'll say X wins just so we know what this text is going to look like when we get to that point of styling and what we can do instead of here is we can change the color to white because as you can see it's impossible to read this text so now we have white text and we'll change the font size to b5r a.m. so we have really big font so we can easily see it which is exactly what we want the next thing to do is we want to style our winning message button this is the button inside of this winning message and what we can do is set the font size to 3 REM so it's a lot easier to read we can set the background color to be white whoops white we want a border around it which we're just going to do one pixel solid black we're going to use a little bit of padding 0.25 p.m. and 0.5 a.m. and then lastly we'll make sure the cursor is pointer so now as you can see that button it doesn't look too much different but it's a little bit different and it looks pretty good in my opinion lastly we're gonna select that winning message button again and we're gonna give it a hover State so we want to come in here and just invert everything so we're gonna change the background color to white the border color whoops border color is going to be white our background color is actually going to be black and we're going to change our text color to be white oops wait now if we hover you can see it just inverts that button which is exactly what we want and to stack these vertically we can just change our flex direction to column and as you can see these are now stacked on top of each other and it looks really good the last thing to do is just by default make it display of them none since we don't want this to show up by default and then we can move our display Flex into a separate class well we're just gonna call winning message bot show then inside of here we're gonna do display flex so now if we apply the show class to this it's going to show up but without that class it's not gonna show up okay we are finally now done with all of the styling I know it's a lot but we're gonna get into the fun part which is the logic to make this tic-tac-toe actually work but before we do that let's just clean up all of these different extra classes and text we add it in here since we don't want any of that showing up in the final version and there we go we now have our empty cell exactly like we want it so now the first thing we need to do is just create that script dot J's file which is going to be all of our JavaScript and the very first thing we want to do is select all of these different cells so what we can do is just say Const cell elements is going to be equal to document whoops document query selector all and you remember these are just a selector of data cell just like that this is going to be all of our different cells and we can loop through them by saying cell elements dot before each cell what we want to do is add an event listener so we'll say so that add event listener every time we click on the cell we want to add this we're just gonna call it handle click and an important thing is we want to say once is true so inside a vote object we're going to say once true which essentially means only ever fire this event listener once so once we click on the cell it's not going to fire again so if I create that function of handle click we're going to take our event I just consul that log clicked and if I inspect this drag over this inspection and I click on one of these cells you see it says clicked but if I click the same cell again it's not going to fire until I click a different cell essentially it only does a click event once and we only ever want to be able to add once to this element so it makes sense we only want to fire this once and no more because we don't want to be able to overwrite something that's already been done so inside of this function we actually need to do quite a few things the first thing that we need to do is we need to place the mark the next thing we need to do is check for win then we need to check for a draw and then lastly if none of those happen we need to switch turns so the easiest thing to do first is to actually place the mark but to do that we need to know whose turn it is so we're gonna create a variable we're just gonna say circle turn and if this variable is true then it's circles turn if it's false it's X's turn so we can easily determine which class we're using by checking whose turn it is and let's actually create a few constant variables which is going to be our x class and we're gonna create a Const which is our circle class and a circle class is just whoops circle and our X class is just X this way we can easily use these strings throughout our application without having to duplicate them all over the place so let's get our current class that we're going to be applying and we first need to get our cell as well so we'll say so is going to be our target which is whatever we clicked on so whichever cell we clicked on is gonna be here and our current class is going to be if it's circles turn then we want to return the circle class otherwise we're gonna return the X class so now we have our class that we're going to be applying right here and we can actually place the mark and to do this we're actually just going to do it inside of a function we'll pass the current cell and the current class and we'll do it inside of this function here which we called placemark with a cell and it's going to have the current class luckily this function is super easy we're just gonna say cell class list dot add our current class just like that and now when we click on something you can see it's adding an X and it's gonna add an X every time because right now circle is always false and we're never actually switching turns so this is all working perfectly fine placing marks is going well we're going to skip checking for wind and checking for a draw for now because switching turns is the most important thing to focus on so we're going to create a function called swap turns and this function is super easy so we'll just create this here swap turns and all this function is going to do is it's going to take circle turn and it's going to set it to the opposite of circle turn now we click it's going to be X's turn then circles and X's then circles then x's then circles and X's and so on always swapping every single time the next thing that we want to do is if i refresh this and i hover you see we're not getting those hover States so I want to apply those hover States and we can do that by just calling a function called set board hover class and inside of this function we're gonna determine which class we actually apply so we'll just say set forward hover class if we want to make sure we do this after we swap turns so that we know which current player it is so we want this hover class to be based on whose turn it currently is not whose turn it used to be so now instead of here we first actually need to get our board so we can just say our board is going to be document dot get element by ID and if you remember we had an ID of board this is our board element how we wanted to do is board dot class list dot remove so we want to remove the x class and we want to make sure we remove the circle class that will we have no classes on it and then if it is circles turn currently then we want to add in the circle class so we'll say add class whoops class list dot add and we want to add in whoops circle class and then otherwise we want to add in the X class so it's a board class list add X class just like that now after we click on our first one you can see we now have the proper hover State based on which class we're currently using which is exactly what we want but you'll notice a problem that our first instance is not actually setting the board hover class so let's just create a function which is going to be called start game and inside of this function we want to set up all of our cell elements just like this and we also want to set the board hover class inside of here and we're gonna set the circle turn to equal false just to start now as you can see oops if we make sure that we've called this function so we want to make sure that we call start game at the beginning so that we're actually starting the game and now as you can see we get that X hover then the circle hover and X and so on and it's working for the rest of our app now the only thing left to do is to check for wins and for draws and what we need to do is create an array for all of the winning combinations and this winning combinations is going to be an array full of arrays so if for example you had an element in an array in spot 1 2 & 3 you would be a winner if you had it in 1 4 & 7 you would be a winner and so on but since this is an array it needs to be 0 indexed so this spot is 0 1 2 3 4 5 6 7 8 so for example if you had a spot in 0 1 or 2 that would be considered a win so if you had 3 elements right here that's a win again we can do 3 4 5 that's the very next row and then lastly we can do 6 7 & 8 which is again going to be the row after that now we can work on the verticals so we can come in here we can have 0 3 6 that's going to be these vertical ones here we can also come in whoops and do essentially the same thing but we're going to do 1 4 & 7 and then we're also going to have 2 5 & 8 now all that's left is to do that a diagonals so 1 4 & 8 or I'm sorry 0 4 & 8 and we're also going to do the other diagonal which is 2 4 & 6 these are all possible winning combinations for a tic-tac-toe game and then we can use this inside of a function here which we're gonna check for win so we can just say if check win then we want to do stuff inside of here and inside of this check win we're actually going to pass in the current class and now let's create that function check win and we're going to pass it to the current class just like that and inside of here what we want to do is we want to check all of the winning combinations to see if some of the winning combinations are met by the current combinations so we'll say winning combinations not some essentially this is going to return true if any of the values inside of it are true so we can say return winning combinations dot sum and this is going to loop over all of the different combinations and for each one of the combinations we want to check if all of the indexes so essentially if all the values in our cell elements have the same class so we can do is our combination dot every because we want to make sure every element has the same class we're going to get the index and then we're going to be instead of here so we're going to say what we want to return our cell elements of that index so we're checking which cell so for example that's 0 1 2 combination is going to be these top 3 cells it's going to check cell 0 1 & 2 we want to check the class list now we want to see if it contains the class or the current class so essentially what this is saying is if the current class is in all three of these elements inside of the combination then we are a winner so if every single cell inside of the combination is correct for at least one of the winning combinations then it's a win and what we can do inside of here for now it's just console that log winner and if we inspect this page you can see we have our console over here so we do X then OH X then o and when we click X you can see that it's a winner because we have three X's in a row you want to refresh this inspect the page again we can do X 0 X 0 and oh and you can see again we have a winner and this time it's the O's instead of the X's but obviously we don't want to just stop it right there we want to actually show up a message say that the X's arroz 1 and go from there in order to do that we can just call a function call endgame and for now we're gonna pass in false this is going to be whether or not it's a draw we can create that function called endgame and it's going to have that draw passed into it so whether or not it to draw in this case it's a win so what we want to do is if it's a draw we're gonna do something we're not going to define that yet but if it's not a draw we want to select our winning message text element which we have not created yet so let's come up here and say our winning message text element is document dot get whoops dot query selector I believe when we make sure hope it's actually yep right here data winning message that is the selector that we're going to use so we'll say data winning message text this is our winning message text element and we want to do is we want to set the inner text inside of here to be equal to a string and what we want to do is just check to see whose turn it is so if it's circles turn we want to say that the o's win so we'll say o's win whoops we don't even need that when we can just put o's and then we can also do the same thing for X's and then after that we want to put the text wins so what this is going to do is it's going to check if its circles turn print out o's if it's X's turn print out X's and then print out the text wins and then we obviously want to make sure that we actually show this so we're going to say winning message element dot class list dot add ever going to add in here the show class and the way that this works is we need to select this winning message element so we can say winning message element and it has an ID of winning message so now when someone wins the game is going to print out the text and it's going to show us that winning message element so let's just have the X's win and as you can see it says X's win obviously restart doesn't work but if we refresh and come in here and make it so that the O's win you can see it says O's win and again refresh doesn't work yet now let's actually go on to figuring out what we do if there's a draw so we were sawing to say he is else if there is a draw so we say is draw then what we want to do is end the game but pass true for the fact that it is a draw and then obviously if it's neither of those we want to make sure we swap the turn and set the board we only want to swap turns if there's no winner yet so instead of the draw we can do a very similar thing winning message in our text we can just set it equal to here draw and now you'll notice immediately there's an error obviously we haven't defined is draw yet so let's actually create that function is draw and inside of this function we need to do a very similar thing that we did with our winning combinations but essentially we just need to check to make sure every single cell has been filled so we can say cell elements dot every what we want to do is we want to get every cell and we want to check if it has a class so we can just say sell that class list dot contains the x class or if it contains the circle class so we'll say it contains circle class so if every single one of the cells has either an X or a circle class then we want to return true because it is a draw and one problem is that the cell elements does not actually have in every method but to get around that we can just D structure the cell elements into an array and it'll have the method and if you're not familiar with destructuring I have an entire video linked in the cards and description that you can check out after this so now let's actually make sure this works we click X then o X then o X then o put an X here o here X and as you can see we get that draw text showing up but obviously we're sending it on the wrong element we want to set this on the text element so that it doesn't delete our button so let's try that one more time we'll put X 0 X oh just like that and now you can see it says draw and the restart button is right here so the last bit of functionality we have is to actually implement the restart button so let's select the restart button so we can just say up here Const restart button make sure I spell that correctly is going to be equal to document dot get element by ID of restart button just like that let me make sure that's correct yep and then what we can do is we can just select a click event listener so we can say restart button dot add event listener every time we want to click on we just want to call our start to game function so now if we come in here and we click on everything oops I made the X is when that's fine but if we restart again you'll notice nothing's happening and because our start game function is not reversing the state of everything that's happened right now we're setting everything up but we also need to unset everything up so the first thing that we can do in here is we can just change our winning message element and we want to make sure to remove that class so we want to remove the show class so now if I just make the X's win click restart you can see it actually removed that show class but of course it hasn't removed any of this other information so we need to remove that next we can do that really easily when we loop through all of our cells we can just select the class list and we just want to remove the X X class and we want to do the exact same thing up for this circle class just like that and we also want to remove our event listener so we'll say so that remove event listener on the click and we want to remove the handle click function just like that now if we set this up so that X is when we click restart it clears absolutely everything out we can go right back into it this time let's say o is 1 and everything is working exactly like we want it to and that's all there is to create an incredibly robust and fun tic-tac-toe game if you enjoyed this video make sure to check out my other videos linked over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 166,630

Rating: 4.9435277 out of 5

Keywords: webdevsimplified, js tic tac toe, tic tac toe tutorial, js tic tac toe tutorial, javascript tic tac toe tutorial, javascript tic tac toe, js advanced tic tac toe, tic tac toe, javascript advanced tic tac toe, javascript advanced tic tac toe tutorial, js advanced tic tac toe tutorial, css tic tac toe, css tic tac toe tutorial, css advanced selectors, js game tutorial, javascript game tutorial, js game, js, javascript, js game dev, javascript game dev, css, advanced css

Id: Y-GkMjUZsmM

Length: 41min 46sec (2506 seconds)

Published: Sat Jan 11 2020