Intro
For my first project I decided to go with a tic tac toe board game. I want this to be a board game where you can play against another user or against the computer. This is one of the first projects I remember doing for free code camp and wanted to see if I could still do it. Today we will go over the CSS and HTML that I build for this page.
Page building
When I was building this page I wanted to start to reorganize a little bit of my code so that I can reuse it later. This led to me make a CSS for my nav bar. The next thing that I was thinking about is how am I going to make this look and how will I have this play.
Grids
Here is the main code that I used for my html and CSS. These codes combined helped make the grid system for the game.
Board HTML Code
<body>
<nav>
<h1 id='mainTitle'>Journey To Improve</h1>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='../AboutMe.html'>About Me</a></button>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='../ProjectPage.html'>Projects</a></button>
<button class='NavButton' type='button' name='button'><a Class='NavLink'href='BlogNavigation.html'>Blogs</a></button>
<button class='NavButton' type='button' name='button'> <a Class='NavLink'href='../index.html'>Home</a> </button>
</nav>
<h1>Tic Tac Toe Game</h1>
<div class='grid-container'>
<div class='side'>
<h3>Players</h3>
<button type='button' name='button'>one Player</button>
<button type='button' name='button'>Two Player</button>
<h3>Player 1's Piece</h3>
<button type='button' name='button'>X</button>
<button type='button' name='button'>O</button><br><br>
<h3>Reset Option</h3>
<button type='button' name='button'>Reset</button>
</div>
<div class='side Tac-Board'>
<div class='padding-box'>
<p class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='0' class='Game-Piece'></p>
</div>
<div class='Tac-Square'>
<p id='1' class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='2' class='Game-Piece'> </p>
</div>
<div class='padding-box'>
<p class='Game-Piece'> </p>
</div>
<div class='padding-box'>
<p class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='3' class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='4' class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='5' class='Game-Piece'> </p>
</div>
<div class='padding-box'>
<p class='Game-Piece'> </p>
</div>
<div class='padding-box'>
<p class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='6' class='Game-Piece'></p>
</div>
<div class='Tac-Square'>
<p id='7' class='Game-Piece'> </p>
</div>
<div class='Tac-Square'>
<p id='8' class='Game-Piece'> </p>
</div>
<div class='padding-box'>
<p class='Game-Piece'> </p>
</div>
</div>
<div class='side'>
<h3>Score</h3>
<p>X: <span id='x-points'>0</span></p>
<p>O: <span id='o-points'>0</span></p>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<script type='text/javascript' src='../JS/TTT.js'></script>
</body>
Board CSS Code
h1{
color: darkgreen;
text-align: center;
}
.gird-container{
display: grid;
grid-template-columns: 20% 60% 20%;
}
.Tac-Board{
background: gray;
display: grid;
grid-template-columns: 16% 20% 20% 20% 16%;
grid-column-gap: 2%;
}
body{
background: white;
}
.Tac-Square{
background-color: white;
height: 10vw;
margin: 1vw 0;
}
.Game-Piece{
text-align: center;
margin: 0;
font-size: 10vw;
position: relative;
bottom: 1vw;
}
.side{
text-align: center;
}
The hardest thing to keep in mind was the area around my grids when I was making the game. I knew that I wanted a padding but I don't really know how to add something like that in the grid system evenly. My solution to this was making padding columns. I used these in conjunction with grid-column-gap to add a gap and a padding for the game. I ended up wanting to make some controls for the game so I put them up in one of the divs that wasn't in the main game area. Also when I was making the tic tac toe boxes I made the IDs numbers so they could be used in an array. I think this has set me where I want to be for the game for now. Tomorrow we will talk about most the code and the following day we will talk about how the computer makes its moves
