Build Tic Tac Toe using HTML + CSS + Javascript!

hey guys I hope everyone's staying safe during this time of quarantine so what I plan to do in the next couple of days is I'm gonna be making some small projects aimed at beginners so if you're a beginner what this is the tutorial for you so today what we're gonna be making is we're gonna be making a simple game of tic-tac-toe using only HTML CSS and JavaScript so this is what the game looks like let me just show you guys how it works real quick X is next Oh X Oh X and if someone wins these become red and it tells us that X is the winner because we set the game and so on and as I add a twist we're also gonna make this semi responsive so if I go down it shrinks like this and it'll be still fully functional and if I go down a little bit more it is still functional as well so this is what we're gonna be building for for transparency here I pasted the color design of this on Google's take that whole game that you see here I just cool go tic-tac-toe and this is like the game that they came out with so this is what it's based upon but we are not gonna be relying on anything for this project again we're gonna be building everything from scratch so if you're pretty scared of web development and such this may be a good start for you all right let's get started yeah a quick introduction before we begin I've made the kid huh become for the finished project already here so links will up this github a creeper will be in the description below and pretty much if this will give you all the finished code so if you go here you can see for example the app.js file the index.html file so if you get stuck or loss or any word reference this so that you could use this also you'll are not be showing you guys a blueprint and I've been using to kind of give me the CSS of all the important parts so that we don't waste time doing all this and all the colors that we're gonna be using so it's all down here so if you guys want a copy of this jpg file just go here go to the blueprint jpg and you could just do download and you can have this as a reference as we call this along alright back to the video alright so I have my webstore editor open here you could use whatever editor you preferred whether it be PS code or whatever I personally prefer webstorm so I'll be using that but follow with me or I have created here at empty folder so do that as well I've called my father tic-tac-toe but you could call this whatever you want and within this file within this folder I mean we're going to be creating three files HTML file or CSS file and a JavaScript file and those are the only three files we're gonna be working with so let's create those right now I will create a new file called index.html I will create another file called style dot CSS and finally I will create my JavaScript power called fjs so these again are the three files that we are going to be working with let me zoom in in all of these and now that I have these open I don't need my left panel so let's start with our HTML file so if you're using BS code you could do this tuple what I'm gonna do is I'm gonna put a boilerplate HTML file here and the way that I do that is I'm not use Amit so you could put an exclamation point and click tab and it should automatically automatically create what you see on the screen right now if you haven't you can pause the video and just write this down but I'm just gonna click tab there we go I want to change my title to maybe tic-tac-toe and let me just open up a preview here and right now of course it's an empty file we don't we didn't put anything inside the body but that's good let me just make this smaller a little bit okay so let's get a basic framework of our app right here we will be putting in a logic later but before we do that actually let's link our CSS file and our javascript file so above the title I'm gonna plug link ref the ref will be H ref I mean will be styled our CSS and make sure you put relat Row is equal to style sheet and also right above my closing body tag I will put a script tag with source fjs and make that empty tags like so so now we have our style sheet connected and our what is it called our JavaScript file connected so let's first go to our style dot CSS and I'm gonna put some basic research I always personally like doing so I'm gonna put our select all selector which is with this asterisk asterisk sign and I'm just gonna make sure that all my margins are zero and all my padding's are zero this is just what I personally like to do on all my projects and not only that I want to make my box sizing or border box instead of the default which is a Content box if you're not familiar with what this is don't worry about it too much right now you could Google if you want but I won't be focusing on this so don't worry too much about that right now now let's go back to our index.html and let's start putting some tags in so I'm gonna put my game I take that total game you know until called a container so let's do that first we'll do div I'll put a class of container like so and by the way just to make my life easier I made a little cheat sheet here that gives me like a blueprint of all the things that I need to know I pull out of the CSS stuff here cuz I don't want to be playing around wasting your time figuring out the best margin or padding so we're gonna be using this as a reference by the way if you're if you want this this is a PNG file this is an image file if you want this later at the very end of this video I'm gonna put a link to my github or the finish repo of all the finished code so and I will have this blueprint that PNG file in there too so if you want to grab that go to my description go to my github page or you could download this from there alright so let's first star contains let's go back to our style dot CSS file see oh whoops style that CSS file let me zoom in real quick I'm also gonna do a little bit or something else too so whoops I am going to put my body tag here and I'm gonna put my font family as San serif what else should I do I am also gonna make my body of flexbox so I'm gonna do that by putting on display flex and the reason why I'm doing that is because I want to Center my game in my in my application in my screen I mean and what I have found is using flexbox it's probably the easiest way to do that and I'm gonna put justified content center so this will put everything in the center let me just show you guys right now let me stylize this container as well right below my body let me put container tag get in the container class name and I will let's see what should I do I will put the background color to going back to this I'm gonna be using my primary color which is this greenish color that you see here one for PDAC so and just for now I'm gonna erase these attributes later and I'm just gonna put a width of maybe five on your pixels and the five of a height up 500 pixels as well just to see my blue in action there we go so this is what we have so far notice that this greenish box is centered on the screen not vertically but horizontally and the reason why it is centered like this because of our display flex in our body and also the justified content of center just to give you guys a reference if I Pro flex end here for example at the HP I'll justified content it goes to right and if I go if I duplex start then that is a default and goes to the beginning but what we want is Center now just to make sure that we're not covering the beginning of the board is not very the page let's do this let's put hmm I don't think this should be zero here I think they should have been 25 pixels so for our container let's put on margin of actually I think it was 50 pixels sorry about that so let's put 50 pixels for margin and padding let's put 50 pixels as well I think that's what I had initially not only that I want my border to be a little curved like this so let's put border radius is going to be less see 25 pixels maybe yeah so that seems about right whoops and let's continue I'm gonna go back to my index.html file and within my container the first thing I have is this tic-tac-toe title so I'm gonna be using an h1 tag and I'm gonna give this a class of let's see just title and we will write tic-tac-toe three words let's see that okay so notice this is not centered as a matter of fact I want my default color right now my tea for color for my text is black why don't we make it that little odd not a black but like a dark color that you see here so the way that I do that is go back to my style CSS within my body I'm gonna add a color attribute and I'm gonna be using this black color that you see here five four five four five four like so so if i refresh notice is a little bit of that it's not black and moisture built or that dark gray color and let's Center this so the weight I'm gonna Center this is I'm gonna grab my title selector my h1 tag and I'm gonna put text align Center like so now what else do I need I think that's it for now right below the title right before before we go up notice attack in the title is the white color right so let's do that to the way that I did that is I first went back to my index.html and for my tag I put a span in there like like so and going back to my style a CSS I'm gonna grab that span and the way that I grabbed it is is first within the title tag right the title class and I'm gonna grab the span like so and I'm gonna make this color the white color that you see here which is f2 e BD 3 let's see if that did the magic there we go so that looks pretty good so far and the next thing that we're gonna grab is the next thing that we're gonna design is these two things right here so we have the this part right here that tells you the status of the game whether X is next or always next or is tells you if the game is a tie you'll see game is a tie right here or if someone want you will say X has one or something like that so I'm gonna call this a status and this button and I call it the reset button but both of them are contained within an outer div container which I will call let's go back to our index what should we call this I will call this status - action because it is a container for both our status and also our action buttons which is only the reset button that we have here and within this class within this div I mean we're gonna have two dips the first dip is gonna be called armed status whoops and let's just write this first X is next inside here and the next one I initially thought about putting a button like so but is kind of stressful to stylize our buttons so I'm just gonna make this a tip as well and I'm gonna make college div let's see what should I call it I will call it we said they've like so and I'll put the word reset in there so it will be a diff but we're gonna kind of connect it to our JavaScript to make it more function like a button so let's see what we have so far now go back to my preview and this is what we have right here let me zoom in for us real quick and take him back our style guide let's put somebody styling into our style our CSS and when I first grabbed the container that contains both the action button and the status div which is called status - action and we're gonna give a little bit of a margin top here to separate it from the title of 25 pixels and also we're gonna put a font size of 25 pixels as well to make it a little bigger there we go so keep in mind my screen right now on the right is zoomed in so yours will look a little bit smaller than this but we don't want them stacking on top of each other right we want them kind of next to each other like so so the way that I'm gonna do that is I'm gonna make my status action dip container or flex or Flex container as well so display flex and let me just refresh now notice that they are all next to each other but that's not what we want we want to kind of spread apart so I'm gonna add a justified content which spreads them out we have a couple options to share to choose from what I want is space around which will put the spaces up here the left side of the first element the middle in between and the right side all in eco spaces so I think that looks pretty nice now let's see what we have as well let's stylize our button by doing this I'm gonna grab our button which is what is it called we set and I'm gonna make it act like a button so I will put a cursor of pointer what that would do is when I hover over it my cursor will become a Poynter to let a user know that this is a button and not only that when I hover over it by using this hover attribute I want the color to change and the color I want to change to our white color which is f 2 EB d3 that we use up here like so so now when we hover over it it looks white to let the user know that this is indeed a button obviously if I click on it nothing works right now because we didn't configure our JavaScript yet but that's fine we just want to get the basic UI down excuse me okay so now we want to make this grid so the way that I'm gonna make this grid is I'm going to be using the CSS grid so if that is new to you don't don't be afraid or this will be fairly simple what we are going to do first of all right below our status action tip we're gonna make a new div and we are gonna call disc the game - grid div game - grid by the way this is image shorthand for a man if I click tap here it automatically makes me a day for the class of ingred so that comes very useful if you haven't seen that before by the way and let's see within our king grid I'm gonna make nine tape elements that are these cells right here so div class I'm gonna call this game - cell and not only that I'm gonna let's see yeah I'll just call them game cell for now but I'm going to make nine of these so make sure you have nine one two three four five six seven eight nine and let's see what we have so obviously right now we don't see anything here I'm gonna inspect this there is something in here but because we did stylize it you don't really see anything so let's add the styling right now let me just pull this up as a reference so let's first add C as to our gain great container game - grim and I'm gonna make this a display grid to make it upgrade and whenever you use this play grid you gotta specify the number of columns and rows that you want on your grid so the way that we do that is we do grid template columns and create template rows so we could put a couple different things here you go let's say we want to recall those right then what we could do is and let's say we wanted three columns of 250 pixels each we could do something like this this is letting the CSS know that we want three columns all with 250 pixels however we could also do distinct this repeat function that tells us we want to repeat three of 1fr so what what 1fr is is a relative unit is pretty much saying I want three spaces repeated with this one f4 unit what the 1fr unit is it equally divides the available space into eco spaces so this is what I want but not only for the columns but I also want to do this for the rows so create template rows like so and how do we make this little tic-tac-toe color this little dark grid right here the way that I use it to that is I'm gonna introduce this thing called a crit cap which gives cap to each of our cells and I'm gonna make this grid gap of 15 pixels like so again you're not gonna see anything here but what we can do is this let me try this for now I'm gonna grab my game - cell which are all of our nine cells and let's give them attributes of height of 200 pixels and width of 200 pixels and just to see them let's put a color or background to them a background color of mmm orange for now yeah so obviously this is not what we want let's see what happened ah so what the reason why this is happening is let me zoom out real quick the reason why this is happening is before just to see our container we have put a width and a height of 500 pixels so we initially put this here because we want to see the background actually showing up on our HTML on our page preview right here but we don't need this anymore from now on we're gonna let the containers width and height be determined by his children so if we erase this let's see what we get now everything's fitting okay it looks very nasty but this is fine for now and let's just make sure that we put some space below our status at our button with our grid so let me go back to this and we have within the crew can create a CSS I have a margin top of 50 pixels all right that looks a little better but now the question is how do we make just this part dark and this part the same color as our container right so the way that I have decided to that is I'm gonna put a background color to our grid of this primary dark color which is zero D a 192 if I do that and refresh notice this has become a little bit darker right here right now within our game cell let me just put this in the front I'm gonna give a background color of my original primary color which is one for BD AC so let's replace this orange with that and now we have those take that Oba that the game board as we want okay so that looks pretty good how about we make each of ourselves or let's convert our cursor into a pointer as well because to let the user know that we could click these like so so that looks pretty good and what else do we need I think we are done so in terms of our CSS for the most part I think we are done all right so yeah that looks pretty good so now let's start adding JavaScript into our code okay so we are gonna start with our JavaScript file or a players and the first thing I'm gonna break this foul up into a couple different sections so the first section and I put a little comment here and I'm gonna call these the a semi elements so this is where we're gonna be grabbing our a semi elements so let's first grab what do we need we first need access to this status right here what was the class name of this status we called it the status right so let's write Const status div and we will grab that by doing document that query selector and what we want to select is we want to select a class of status just to show you guys that we create the correct one I mean console.log status div or steady state and see what that is all about so I'm gonna refresh the page go to my console ignore all the stato stuff that just from my react stuff and we see that if we cancel out this we get the div class status right so this is what we want let's grab all so let's also grab the reset button Const receptive is document curry whoops document curry selector we want to grab the reset button to reset class and let's just make sure we grab the correct one we said to refresh the page and we do get reset here now let's grab our nine cells that we see here so the way that I'm going to do that is and I call these the cell cell divs so it will be an array and the way that we grab is we do queryselector all this we'll grab every single occurrence of whatever you put here what we want what do we call these grids actually you gotta remember we have call these game cell so I'm gonna grab all elements with the class name of game cell let's cancel out this and see what we get we get this no list object it looks like an array at 0 1 2 3 4 5 6 and there's 8 meaning there's 9 characters total right so that's what we want so now that we have crap by the way why did we grab this we grab these status because we're gonna be using javascript to update this let's say that X has already gone then it's O's turn right so it should be saying oh it's next year we're gonna be grabbing this status tip and changing it manipulating and that's why we want access to this a similar limit within our JavaScript we also want the reset button because when we click this we wanted to do something and obviously we want to manipulate each of these cell pieces here to whether to put an X or in order so these are the 3 HTML elements that we're going to be using let's introduce game Constable's getting variables we're gonna have and I'm gonna be using let here because we're gonna be chaining these around later so let's put game is live so I'm gonna initialize this as true what this variable would do is if this is true that means that the game is live right now meaning the game is going but let's say someone won or there was a tie game then the game is no longer live we will manually set this to false we are also gonna have another boolean which I'm gonna call X is next so I'm going to initialize that's true and what this is if this is true that is X Esther if it is false then it's ulster so that's what this signifies and I think those are the only two variables I need so far if we need them later we will add them here later okay so what I am going to do is this is what I'm going to do here will be our event listeners we are going to add event listeners first of all to our reset button and we're also gonna add append esters to each of our nine cells so let's first add all reset but event listener to a reset so let's do receptive add event listener and the event that we're listening for is called is called it click is whenever we click this and we're gonna link this to a function so let me define the function up here first so here are our what should we call this section here how about we call this section event handlers like so let's put some spaces here and the first event I'm gonna have is Const handle we set this will have e short for event as in parameter and for now let's just count along what this e is and we're gonna link this to our click event handler on a reset so handle reset just passed a function as a reference so notice I'm not putting parentheses here we're passing the function as a reference like so and so when we click this reset button we should see a console log of e let's see if that happens I see this mouse up on here and there's all these attributes associated with it so that's working so far so let's ignore that for now now let's add event listener to each of our nine cell dibs so this is an array like object how do we add event listeners to each of the elements so the way that I'm going to do that is I'm gonna use a for loop and we're gonna do a for loop within ourselves so this is our array like structure so what we do is we do Const cell div of cell tips what this will do is this will loop through each of our elements within ourselves and that element will be stored in the cell tip / here let me console.log sewed it for you guys just to show you guys what is going on notice we have nine console logs here right all the different cells so that's what this is looping over and within each of our cell did we are gonna add even Lester's to each of them add a listener of a click and what should we call this mmm handle what should we call this handle cell click maybe we'll put it off up here handle cell click this also has an event and for now let's just count along II just to make sure that everything is working as intended and it appears that it is so how do we know which so we have clicked the way that I'm gonna know which cell we are clicked is there is a target attribute and within the target attribute we have let's see within this target attribute we have this class list which gives us all the classes that this element in question has but this right now though with our code is set up we can't distinguish between each of ourselves so what I'm gonna do is I'm gonna go back to our index SML and within each of ourselves I'm gonna give them special names but extra classes for each of them just to four just to give us a way to distinguish each one so I'm gonna put games of space and I'm gonna give a class of the first one of maybe top left the next one of top middle next one is top right middle left middle middle middle right bottom left bottom middle and bottom right this way we can distinguish each one now let me refresh the page click this again and let's go to our event handler which is header cell click I'm gonna cancel off not eat but eat a target that class list let's see what we get if i refresh I click this one notice we get game cell tops and top left if I click this one we get game cell and middle right right so however so what type of an object this is this is actually an object that looks like an array but it's not actually an array so though the index that we're interested in is not a zero index which is this game cell it's the first index because that's where everything is different right this tells us which section of the cell that we are looking at so let's do this I'm gonna extract the first element the first index element within our class list so I'm gonna do const location is i'm gonna grab this from either target that class list the first element like this the first index let's cancel lock our location like so let's get rid of our first console.log by the way notice i'm console logging a lot right so this is pretty what's the word I'm looking for this is pretty common in web development gonna be console logging not a stop when you work with JavaScript so I click here it says top left I click in the middle it says middle middle click here it says middle right and so on so now we know whenever we click on something and we go into our Hana cell click function we know which cell we are dealing with right by this location variable here so what do we want to do I will and to add an extra class to our div depending on if X is next is true in this variable that we have declared up here if that is true I'm gonna put an X there otherwise if this is false I will put a whole class in there so this is what I'm gonna do so if X is next if that is true by the way this is the same thing as saying this is triple equals to true but as a shorthand to that we can just put if X is next because that is a boolean so if this is true what do we want to do we want to do we want to let's see let me cancel log de again because I want to grab something from the e what I want is I want to have access to our div which is actually inside a target let me cancel either target and you see that this eat a target gives us the actual dip in question right so what I want to do is from our either target I want to add a class get the class list first and then add a class and the plasti I'm gonna add I'm gonna give it a name of X because X is next because X should be next so this will let us know that this has the x value so let's try that right now refresh the page I click here I don't see anything but if I inspect the element you see this X element here right this X class that we have added after we have added a class what we want to do is we want to set X is next to opposite of what it was previously so if it was true we want it to be false and so on and we will say else if X is not next then II that target that class list add not an exponent Oh like so and we're also gonna be making the exes next to it too the opposite value like so so if you look at our classes here as I click you can see that it is adding the X and the O but the problem is what if we click on the same same cell again notice what happened here we put an X oh and then if I click here again what the X I would exist so it's not doing anything but we don't want a cell to have both in X and O value right so the way that I'm going to do that is this if I'm first gonna check to make sure that the element in question does not have either an X or o so how about we do this I'm gonna grab all the class list in the beginning Const classes class list on call it class list from EDA target that class list and I'm just gonna use this variable from now on so instead of doing this either target a class list let's just do class list that one and down here we could just do class list add and class list add like so we are referencing this variable from now on all right so what do we want to do now what we want to do is we want to only add the X or the O if the element in question doesn't already contain either an X or o hopefully that makes sense so how can we test and check to see if the element in question has the X or oh so what we can do is this I am going to let's see let's first see whether this is an array or not meaning or rather we could just do this we know that hmm we know that the third element or the second index is e is going to contain the O or ax so let's do this if class list at the second index is equal to X or class lists at the second index is equal to oh then we want to do nothing right because that means that it already either contains an X or an O so if this is the case then we want to do nothing and the way that we do that is just put a return or function so our with our function will end right here otherwise we want them to do this so let's see if this works remember what was happening before we could add both in X or O to a single cell which is not ideal which is not what we want let me see let's go to our this I'm gonna click this one right here notice we have added the X I click again I can't add another one anymore I click here I added an OBE can't add an X back again here so this is what we want like so and now we have successfully added or we are able to add X or all within our track to our classes using javascript but how do we now then visualize our display to the user that the X is here and the always here so we're gonna be using this current thing called a pseudo pseudo pseudo element of HTML and we're a what a pseudo element in question that we're gonna be using is called it before pseudo element we can also technically use after two it doesn't really matter but let me just show you guys how that works in case you guys haven't seen this before I'm gonna grab the game cell each element that we grabbed with our CSS we could reference the before or after pseudo element by doing semicolon before or after doesn't matter and let me just show you guys what this is on each pseudo element about before pseudo element or after pseudo element has a means of content properly and I'm gonna just put X here like so now notice we have X's everywhere do you see this X's here it looks very small but and notice within our SM our in - element we had this before element right here so what this does is at the inside whatever we have selected right inside as the first element if we use before it has this content that we have given in here so let's stylize this now but not only that we don't want to put it on every axis like this we only want to put the X's where there is the X so the way that I'm going to do that is I'm gonna grab the X class and put a content for that one let me refresh the page notice there's nothing but when I click here and there was X now I put the X let me just make this font bigger and what font did I use before I use 200 pixels for this one so I'm gonna do font size here 200 pixels let's also grab the Oba for content is Oh font size is for this one what the 20 pixels - all right now you see this right see now we could see it and we are seeing this using the before pseudo selector by the way let me just show you guys we could have also use it after - it doesn't really matter you see still works the same well I will just yeah I'll just use after okay so I want to make a few changes one I don't like how this is on the bottom left it doesn't look that this should be centered right second I think we're using the alphabet X in the alphabet oh and in my opinion it doesn't look that nice so I'm gonna use another symbol here later but let's first try to get this centered in our born so the way that I'm gonna do that is within our game cell I'm gonna also make this or display flex and to wait on a center the element inside is our container this div is first keep just five content of center and what that would do is that will make it Center horizontally but to make a center verdict I'm gonna also give it an online items properly of center now if i refresh the page now you can see that it's a little bit more centered right i still doesn't know to center to be honest maybe i'll fix this later but let's deal with our second problem which I don't like these symbols so what I did is I googled circle symbol here and you can see the circle here if I let me zoom in for you guys what I'm gonna do is I'm gonna copy this one cuz I don't know how to type that in and I'm gonna put that as a content here notice it looks like a perfect circle right and for our X simple I googled X symbol again and I'm gonna use this multiplication symbol right here for DX I think that will look a little better by the way if you don't want to Google this I will put these two symbols in the description below so if you just copy that and paste it into your code now let me go back to my game now that looks pretty better but the only issue now is the circle looks smaller than the X so I'm gonna increase my size by 25 pixels and now I still doesn't look ideal why is there actually let me I changed my mind I'm gonna use a different X I don't think this is the original X that I use multiplication symbol let me go go this there's like a hundred of these X's so I think what I want is this one maybe let's try that one again this being a description below yeah so I think that looks a little bit better right so at least this is working so I'm pretty satisfied with this again our game logic doesn't work we gotta check to see after each round we're gonna check to see that check to see if there is a winner or not and also if there is a winner then we should update the status and not only that when X has gone they should say always next right so let's deal with that right now I'm going to go back to my apt Jas and let's see what I want to do is I after every click I want us to check to see if there is a winner or not no no before they actually let's update our status this is what I'm gonna do I'm gonna add a function here of let's see above here I'm gonna add a section called functions and this first function that I want is Const update game status or how about check game status whoops check game status what I'm going to do here is I'm gonna call this after every single game move so if someone clicks on the tile we will invoke this function to check the status of the game so this is what I'm gonna do I'm going to make nine variables and I am going to see what whether there is an X or an O in each of the nine cells so I'm gonna do Const top left is equal to what is it class not class missed our cell this the 0th index and I want what is a class list of the first element of the first index this will tell us whether it's an X or an O let's do this for all nine of our elements we have top middle which is seldom one we have top right which is cell they've two middle left cell they've three middle middle so they four middle right of cell d5 bottom left so div six bottom middle of cell day of seven bottom right of so did eight and just to show you guys what this is let's come to log all of these out right now not sure to what to write all these again yeah it's not a big deal you don't have to do this if you want I just want to make sure we are on the right track little little little right bottom left bottom middle and bottom right so if everything went to plan which you see a list of whether we the XS and the O's that we have depending on the location so now if I go to my console I don't see anything is cause we never invoke this function this check game status and where I want to check the game status is here right and also here I click now we get top left although that's not what I want why am I getting oh I don't want the first class list I actually want the second one but that tells us whether we have an X or oh sorry about that like so now we get only five different fine but we have an X in a self element we have X oh and as you can see we have what we want so this tells us whether we have an X or an O or an undefined so I think this is something we could work with so let's do this we first kind of see if there is a winner or not is there a winner the way that I'm gonna check is I'm just going to manually proof first and check all possible winning combinations another this if top left we could do two ways we could either say make sure that first of all or one way to win is top left top middle and top right is an X or both all three or dementia all right so weekly either check manually to see whether there are all X's or whether they're all o's or we could just say this if top left exists already let me do this first if top left is equal to top middle and top left is equal to top right that means the top left top middle on the top right there are all these seven elements but we gotta be careful here I gotta add an extra attribute here saying extra condition I mean and I say make sure that the top left exists so I'm not the top left and top left is equal to middle and top left is equal to top right and the reason why I have this top left condition in the beginning is if these three are all on defined meaning we we don't have anything within the first three that means this is gonna be true without this first condition here if all three of them are defined means this part damp holiday here will be true only fine is triple equals to undefined and only find a stripper eCos undefined so we got to make sure that the element in question is not undefined and the way that we do that is we make sure we check because if this is on the find that this will become false and we will never go in here and I don't like this is there a winner comment let's say checked winner so if this is the situation we now know that we're dealing either with an X or an O right so what should we do then the value of the top left let me count so long top left here and this will only comes along if all the top is the same so let's just put X's on the top like so now we see X so now the value of our top left is X and in Reverse if we put o there it should be Oh as you can see here so this is what we'll do I'm gonna put here let winner and I'm gonna make this no I will say that winner is going to be whatever the tablet left value is what else do we want to do we before we do that actually I wanna set game is live is false meaning if there is a winner or game is life should be false and we want to do a couple more things right we want to get our status div and update the inner HTML to say what do we want to say and I'm going to use es6 string interpolation here by using backticks I will say that top left the variable is is has water let's see what we get better so I'm gonna make X win and focus on what goes in our status here and now it says X has won but I don't like this in several reasons one we're using the alphabet X and second I mean that that's it for now so let's update that for now and because I'm going to be referencing our two symbols of this X and this o what I'm gonna do is I'm gonna extract them out to our JavaScript variable so I'm gonna put here game constants these are variables that won't change past X symbol it's gonna be this little costing and cost o symbol it's going to be this perfect circle here like so and be careful don't use these symbols in the class list notice we are checking the class list here I wouldn't use the symbols on the classes I don't even know if that's possible now but I'm not gonna try to what I'm going to do is I am going to let's see make another function here called letter to symbol what this will do is this will get a letter which is either going to be X or alphabet and it will if if the letter is triple equals to X and I use ternary operator here then the output of this function is going to be the X symbol otherwise we're gonna give the Y symbol so this will convert our x or all to the symbol counterpart so instead of saying top left as one here let's use our letter to symbol function and pass our top left like so now if you play our game and let X win which you see that X symbol has one right let's see if all wins however I don't want to use the black task text I want to use a color and not only that I want Oh's to be at different colors as well here so let's actually take that take care of that first so the way that I'm going to do that is I'm gonna go to my style that CSS and for our Oh after and then give it a color properly what was our beige white color it is this f2 e BD 3 let's see if that works now it looks a little better right and let's make it so that when all wins this has this becomes white so the way that I'm going to do that is go back to mark our app and I'm gonna check this the well should we do this mess with this if top left is equal to X I'm gonna put status inner-tube as that else put the status in there Dave not as dis but I'm gonna put a span around it like so whoops like so and let me put this into his own line like so I don't know if that looks but any better or not actually I changed my mind that something too good let me put spaces after this one like so I think that looks a little better okay so by the way I'm only doing this because I'm so doomed in that this doesn't fill up a line so for you this shouldn't be an issue and let's stylize our span so where does this span occur so he occurs right here if I look in here oh whoops we need someone to win so let me do this then let's make sure that all wins if you look at this right now we see a span here right so that's what we walked here granted we're putting this extra space oh sorry about me constantly changed my mind let me just get rid of this space actually I don't want that I just leave it in one night like so and we're gonna stylize that span so we're gonna go back to our CSS go to our status we're gonna add a new selector here called status space and we want the spanned inside our status class and for this we want the color to be white like so f2 e bt 3 let's see if that becomes white if all wins yeah yeah it becomes white and if X wins it stays us back like so now also let's before we go on let's finish our logic of all of our winnings so we only check to see it's a top 3 or Eco we gotta check for every single other ones so watch how should we do this hmm I'm gonna have a lot of duplicate codes so what I'm gonna do is right below our F here we're gonna put else if let's check all of our three rows first and then we'll check our vertical ones and finally our diagnose so we're gonna say middle left and middle left it's triple equals two middle middle and middle left is triple equals to knock on triple triple equals two middle right then we're gonna have this duplicated code again right so probably we should make another function to take care of all these two applications we're gonna have this how many ways are there to win one two three four five six seven and eight I don't want to to placate this eight times so we're gonna make another function here and I'm gonna call this function Const handle win and this will receive a parameter which is T letter that has one it's either going to be X or own and what I'm gonna do here is first set the game is slide to false winner as the letter winner as the letter and finally we gather this all this crazy logic here if the winner is triple equals to X then that winners are about that yeah well yeah I won that will use winner if because we have a signed letter to wither anyways and all references are top left will update that with winner like so so we could erase this complicated logic here where is it right here and we will say handle winner and we will pass in the top left which he'll either be X or an O so else it middle left is equal to middle left and all this then handle win little left else if bottom duct and but make sure you can't write these carefully bottom left is equal to bottom middle and bottom left is triple equals to bottom-right handle win bottom left we have taken care of our three horizontal wins now let's take care of our three political winds else if let's see top left is and top left is triple equals two middle left and top left is triple equals two bottom left that's our first horizontal case top left else if top no no not hot yeah top middle I mean Zeke and top middle is triple equals to middle middle and top middle is triple equals to bottom middle and the win are whoops spelling error here sorry about that top middle and our final vertical case which is right top right top right is triple equals to middle right and top right is triple equals to bottom-right handle winner top right and now our finally are two vertical cases I will sift top left and top left is equal to middle middle and top left is triple equals to bottom right and the win top left and finally our last diagonal case and mass winning condition else if is top right and top right is triple equals to middle middle and top right is triple equals to bottom left make sure you have written all these carefully otherwise if you don't then you're winning logics are messed up handle win top right like so alright so we have taken care of our eight winning conditions now there is another condition that we got to account for which is what if there's a tie and when will there be a tie there will be a tie when none of these are undefined if none of these eight cases pass and all these are not on defined meaning they have an X or old value then we are dealing with a tie so I'm gonna put another else appear and we're gonna now check to see if these all have a value so we're gonna say top left and top middle and top right-hand sorry about the weed doesn't see here middle left and middle middle and middle right and bottom left and bottom middle and bottom right if all these have a valley then we are dealing with a tie so how are we gonna deal with tie we're gonna first set game is lied to false we're gonna update the inner span of our statistic or I mean the innerhtml status tip inner HTML we can update it to say game what should we show you right in there game is tied how about that let's see if that works when I try my best to tie the game ex o ex o ex o ex o ex okay game is tied okay so that works now okay and finally it if we have no winner and the game is not tight our final condition is just a game continues right so what we want to do in this case is we want to whatchu it what should we do we want to first let's erase this logic within our handle cell click where we are manually setting the exes next to this opposite value I'm gonna erase this and I'm gonna let the check game status function that we are building right now handle that condition so let's do this where were we all right here else we want to do this hmm X is next is first going to be opposite of axis next to flip the logic that's what we just erased and also we got to update the status tips in a HTML so this one I do if the new X is next is triple equals to an X I'm gonna do status stick inner HTML it's gonna equal string interpolation here six letter to symbol of X no no we don't even need the letter to symbol we could just use the actual X symbol is next like that else that means that alternates next a whoops and I don't want this to be equal to X is next the boolean so I'm just gonna check to see if that is true and instead is this otherwise I'm gonna put a span across our string to make it white like so but I'm gonna use the old symbol this time let's see if that works now notice this is turning white so that's what I wanted however when I play the game I'm noticing a very annoying thing with this grid goes up and down by a little bit and the reason why that is happening is when the HTML s is span to the white oh is changing the height of our status action right now is 29 but I click somewhere and now it's dirty weekend like right now it is 30 so what I'm gonna do is I'm gonna set the status action a fixed height of 30 pixels that way you want to came on jitter anymore okay so we are almost done let's make sure our reset button works so the way that I'm gonna do that is I am going to update our where is our reset event handler right here hello reset let's take care of this so what do we want to do when we click reset let's see when we click reset we want to set X is next to true we want to always make the first person that starts a game to be X so it just makes life simpler and we want to of course update our status - as 2 X is next and also what we want to do is we have to look through each of our cells each of our nine cells and remove the either the X or old class and the way that I'm gonna do that is I'm going to put a for loop here and let's do this for what do we call it the cell days right Const cell dig of cell tips you know I'm gonna look through each of our div and Gratus class list and remove the X class if it exists if it does exist you won't do anything and also remove the old class and what else do I want to do let's see I also had this winner right here right do I did I hundred the winner yes I did handle the winner so I want to set the winner back to no and I think that's it so let's see if that works so first as I'm playing I click reset ankles everything it clears everything up so I think it is working now what if we have a winner if I could just get a winner so now Oh has won I reset and the game is reset again so that is working - and it appears that we never actually needed to use a location so forgive me for backtracking button I erase that and because we have eraser actually I want us to clean tidy up our code somewhat this is optional but I just want to do it because I have realized now that this top left top middle top right is useless so I'm gonna rear-end sorry about that but this happens whenever you're coding sometimes you decide later that you don't need a couple attributes so I'm going to erase these and I gotta be careful now because going back to my class list is known or excellent are always no longer on the second index place actually on the first index and let's make sure that so I changed it in a handle cell click and where else do we reference the class list we listen we reference it here so I'm gonna change all of these class lists back to a 1 because we remove the class the X or the own now resides in the first index so I think let's just make sure that everything is working let's make sure that the game knows who won yep yeah still knows who won all right so that was a little bit of refactoring we did a little bit of tidying up and now I think we're almost done the one final thing or the second final thing we also have the responsive stuff to do after this but one final thing or the CSS that I want to do is if someone wins I want this to turn red or to kind of show which combination has produced a winner so the way that I'm going to do that is within our checking status and within these I have to do something so this is not gonna be pretty but within each of our if conditions I'm gonna add a new class to ourselves to our disk and I'm gonna say that that's our cell class the class that we're gonna add is called 1 so I'm gonna do Baga to manually create them so I'm gonna say in the first condition the cell divs zero index class list of ADD and I'm gonna add the 1 and I want the first one I want the second one and also for our second win condition I'm gonna be very careful this accounts for the middle horizontal winning so that is three four five the next one is six seven eight and the next one is the top left middle left and bottom left so it's zero three six next one is one four seven and the next one is two five eight and finally we got our two diagonal cases we have zero whoops I think it's four and eight and finally we have 0 1 2 0 1 2 3 4 4 5 & 6 like so and if we have a class of one let's go to our CSS and let's do this if we have a one class I want the color of the after to be red and the red that I'm going to be using referencing my little PDF file is PD 0 to 2 F like so let's see if that works make X win and it becomes right so it works the only problem now is when I reset I want to also get rid of that so the way that I'm going to do that is go back to my app when we do handle reset we also not only want to remove the excess down in the old class I also want to remove the 1 class so let's see if that works access 1 reset and now let's let all win ah crap okay--oh has water so that seems to work yeah okay so now we are almost done our game I think the logic of our game is fully complete now let's just add the responsiveness so the way they are going to do that is I am going to add go back to my CSS I'm going to add media queries here and I got to meet a curry one for like a tablet size and one for a phone size so I'm not the media only screen and max width and I have decided to use 1024 for our tablet size so whatever CSS that we are here it will only apply if d-max wave of our window is less than 1024 pixels so using my little blue print template here I'm just going to add this here I'm gonna do game grid I will have a margin top of 25 pixels grid gap of 10 pixels let's see gain cell of height of 150 pixels width of 150 pixels and finally our X after not before this time because I decided to use after for whatever reason font size of 150 pixels and for our old font size of 175 pixels let's see that come to play on azuma back to its original okay there we go notice the size right now but once I go lower than 1024 it's just Rick like so and everything should still be working like that okay let's add one more one for our tablet I mean our phone media only screen and max width is going to be let's see what did I decide to use 540 I'm gonna grab my container it's gonna have a margin of 25 and a padding of 25 this time game cell it's gonna be even smaller height of 100 pixels width of 100 pixels X after it's gonna have a font size of 100 pixels now and OH after it's gonna have a font size of 125 pixels let's see if that works bye there we go and the game is still fully functional like so okay so this was our tic-tac-toe game so I was editing this video and I realized a couple of things I've missed in my initial run of making this game so I want to add those fix right now to make this really tidied up tidy this game up so if i refresh the page right now look at this X do you see this how ugly this X is right here and the reason why this X is at least because we're using the alphabet X in the beginning the reason is usually we always update this value using javascript except the very beginning so going back to my index.html file let me erase all these readme and everything I've added later notice I'm using the alphabet X's next year so we have to update this in the beginning to be consistent so I'm gonna go to my style dot CSS file try to find my symbol which is here the X symbol copy that and paste that over here so that now when i refresh it looks consistent so that was problem number one that I saw so problem number two that I saw is this so this is optional but just to be consistent with our cursor UI buttons do you remember what we did for our grids when we hover over them our cursor becomes our pointer right to let the user know that we could press these but the moment we press 1 this is no longer able to be pressed right here so that we should have let the user know that this is a pointer so we should disable this and make the cursor go back to its default when there is either an X or all value all right as a matter of fact even on one value so let's do that now actually we're not to do the 1 ballot because one value will always have an X or O so let's do this X after we are gonna say um what is the best way to do this actually let's do this if game sell now will just of this if X or oh now why but oh then we'll say the cursor is back to default let's see if that worked I'm gonna refresh the page right now is a pointer I click and it didn't work so default is not a valid um actually before cursor I think I want auto let me refresh the page and he still or maybe it's because I didn't hard refresh maybe default did work ok so now it's working I'm curious the default what work let me try a fault I'm gonna hard refresh yes so default works as well so it's up to you whether you want to use the father auto but the point being it is no longer a pointer when we hover over those ones even if you win is still not a pointer right as a matter of fact if the game is won technically oh look at that that's another issue if someone has won we shouldn't be able to click here anymore so let's fix that right now um within our check game no not checking status within our event handlers in the handle cell click we should only do stuff inside if the game is live so we have this condition in the beginning that says if the class list that we clicked has an X or oh that don't do anything by returning right but let's add a new condition here why don't we add in the beginning by say if not game is lie then also return so let's see if that works now yeah it's still not working so why is that the case perhaps we did an update game is life let's see where is our handle win or handle win is here we put game is live is false so maybe I had hard refresh again that's kind of annoying but let's see if that works now okay so that works I don't know why it's forcing it to hardware so every single time but now if the game is not alive we can't click anywhere and you anymore so that it's good and one final thing that I want to refactor technically we can make this not be a pointer again but that's too much work I don't want to that right now right what I mean is if someone has won we shouldn't make these pointers anymore but whatever whatever what I do want to do though is I have noticed when I was editing this video that we never actually use this winner variable so we could just erase this because once we find out summarize one we just wrote we just write that person as win as one we never use this winner um so let's do this unlike a erase this winner variable erase this within the handle win and instead of referencing winner here we reference winner in three different places in the handle win function I'm gonna grab every single one and I'm just gonna replace them with a letter like so now what else do we have the winner right here handle reset we have set the winner back to no but we don't need to do that anymore do we have winners anywhere else no we don't let's just make sure that the game works still I'm gonna win reset and it doesn't work anymore now the reason why it doesn't work is why when we handle reset we should also set the game is life back to true right when we reset we want out came to be so let's do game is life is true let's as a matter of fact do this at the very end although it doesn't really matter let's make sure our game is working I reset and we can still play all right so I think that is it with our refactoring and making our code a little better ah I think that is it if you guys find any other optimizations or refractors that we can do or mistakes that you have found in school please let me know in the description in the comment section below I would love to see that and if you decide to by the way feel free to use this in your own personal projects you could put in your portfolio's I highly encourage you to add some other more fancy styling if you want and show me let me know by posting in the comments section below and now if you post a link to your github or whatever I would love to check it out anyways back to the video where I say the outro alright guys so this was our ticket Oh game um hopefully you guys enjoy this hopefully everything made sense I'm gonna make a kid hub repo and put the finished code along with an update a fixed version of this little blueprint right here if you want to follow along um so I'll put that in the links in the description below and hopefully guys you guys like this content subscribe to my channel if you want to see more tutorials like this I'll be releasing a couple more beginner friendly tutorials with HTML CSS in JavaScript on next few days so please stay tuned for that guys I'll have a good day stay safe and I'll see you guys next time

Channel: Justin Kim

Views: 27,159

Rating: 4.9343185 out of 5

Keywords: HTML, CSS, Javascript, JS, Programming, ES6, ES2015, Tutorial, Code Along, Grid, Flexbox

Id: Rzhcb4M9-0Q

Length: 84min 43sec (5083 seconds)

Published: Wed Mar 25 2020