Starting Tic Tac Toe :: Intro CS Textbook

Resources

Slides

Video Script

Welcome back everyone. In this video, we’re going to be taking a look at how we might make our Tic Tac Toe game using HTML, CSS, and JavaScript. To start out here, we’re going to make a new HTML page. Now this can go straight back into your index.html that we made in the previous videos. The one I’m going to make for this video is going to be called tictactoe.html. And I’m going to save this as all types. As I mentioned, we can just use the files that we had already previously created. Or we can make a new one, if you are using a previously made file, the only things that you might need to actually add in here is replacing our body tag, or just replacing the content with the new Tic Tac Toe stuff that we’re going to be talking about this time. So anyway, so what we actually had just have here, and if I just simply run this file, all I have is my Tic Tac Toe title. So a lot of what we have actually in the PowerPoint slides are also most of the HTML code that I’m copying over today. So if you need that reference, go and pull up those slides. And you can copy and paste a lot of this code in, or you can type it out by hand for some extra practice. The next chunk of code that I’m going to put in here is the actual word that we’re going to use for the Tic Tac Toe game. So let me come and tidy some of this up here. And again, if you remember the previous videos that we did on HTML, you don’t actually have to have proper white spacing, a lot of the time with HTML tags. I’m including proper whitespace, and tabs in here, just so our code looks nice and neat and clean, and it’s a lot easier for us to read.

With this, what our tags that we’re actually having in here today are the table tag. So you’ve already seen the h1 tag that we had before, which is just the header tag. But the new tag that we have not covered before is the table tag, the table tag is going to just as it sounds, create a table just like what you would do in Microsoft Word or even in Excel. Now the table tag has a table body, and the body is actually going to contain the contents of the actual table. Now, inside of the table body and its base form, we have trs, which stands for table row. So the tr tags that’s an open and close tag. And then inside of each row, we have td tags, or our cell tags. These td tags or table data tags are going to represent the content or columns that are contained inside of our table. So let’s go ahead and save this. And I’m going to refresh my web page. And you can kind of see that nothing is actually here, nothing actually shows up. But if we inspect our page, we can actually see that our table is actually there. It’s just super, super tiny and has nothing inside of it. Not yet anyways. So the other step that we can start making to make our table actually visible is adding a little bit of CSS. So what I’ll go ahead and do is I’m going to remake mine. But again, you can reuse the CSS file that we had from previous videos. So I’m going to go ahead and save this out here and I’m going to call this fancy.css. This is going to be all types. Save.

So now I have my CSS. And this couple CSS rules I’m going to paste in here. This first one is going to be for our td tags, which is going to add a border that is five pixels thick. That’s going to be solid, so not dashed, and it’s going to be colored black. And then each of our td tags are going to have a width and height of 100 pixels, a font size of 80 pixels. And it’s going to align the text to center and it’s also going to change the font type. So with that if we save, refresh. Ah, now we’re getting somewhere. Our Tic Tac Toe board is starting to look a lot closer to what we would normally expect a tic tac toe game to look like. But we’re still a little bit off as far as our board goes because typically we don’t have full squares here. We just have two vertical lines and two horizontal lines as part of our Tic Tac Toe board. So let’s take a look at some more CSS rules that we can use to make our Tic Tac Toe game a little bit better looking. So this, these CSS rules are also going to be applying to my td or table data tags. But this time around, what it’s going to do is it’s going to start cutting off the borders that we no longer need.

So for example, this CSS rule is going to find all td tags. And then for the nth child, so the first for every first td tag that it finds, it’s going to set the border left to be none. So what this is basically equating to is for the first column, right, so the first td tag that we find in each of our rows, we’re going to take off the left border. And so that applies to this cell, this cell and this cell. This CSS rule for every third cell, take off the right border, so that applies to the column on the far right the third column. Then, we do the similar thing for the table row. So this tr, so find all tr tags, so find all rows, and then pick the first one that we find. So I’m going to pick the first row and take off the top border. And then this says, Ah, give me the third row and cut off the bottom border. And so this is picking, these are picking the first and third row. And then within those, that first row and third row, it’s picking up all of the td tags, and then applying either a border top of none or a border bottom of none. And this just shows some more of the advanced CSS tags that we can use for our website.

So now we’re pretty satisfied for the most part for how our Tic Tac Toe game actually looks, at least as far as the board goes. But we’re also missing an indication. If we’re going to be playing this as a tic tac toe game, we need to know whose turn it is. So let’s go ahead and switch back over to our HTML file and add in a another piece of HTML. So here, I’m going to add in a div tag, that indicates whose turn it is. And so this is going to go right underneath our head tag. So here, I’m going to say div. And remember ID, the ID attribute should be unique. And I’m just going to call this turn. And it’s going to be first x’s turn that then close div. So the div tag is also new for us. The div tag is going to act more along the lines of a organizing feature in HTML. So div tags are used to gather up or tidy up like content. So let’s say I have a navbar on the left, where all of my website navigation goes. And then we have all the content on the right. So each of those could be a div tag, where we use to organize all the other tags that are contained inside of it. So mostly just used for organizational purposes. But it’s also extremely useful for applying CSS as well.

So with that, let’s go ahead and refresh our page here. And we can see X’s turn there. But X’s turn is kind of small. So we need some more CSS here in order to make that a little bit more interesting. And so the rule that we’re going to apply here is going to take the text inside and make it bold. Remember, the CSS selector for ID tags is the pound sign, so pound, and then the ID so turn, font weight to be bold, it’s going to transform the text that’s contained inside of this tag and capitalize it, center it, change it to 16 point font, change the background color, and then set the width of that particular container. So as I mentioned, right divs are used primarily to organize contents of your webpage or act as containers. So if we save that and then refresh our page here, we can now see that it is X’s turn, and we’ve capitalized. Right? Not all caps, but just capitalized the first letter in our div tag. So that would be x, made it bigger, made it bold, and then change the background color. Now, we could make this a little bit lighter of a gray too. And you can kind of play around with those colors a little bit to make it your own as well. But, as I mentioned, we should end up that looks something like this. But this is just our static page. If we click over here, click on any of these cells over here. It’s X’s turn, but no x actually show up in our web page. So here in a little bit we’ll have another video that explains how we might actually make our webpage or Tic Tac Toe game interactive.