Search code examples
javascripthtmlcsstic-tac-toe

The 3x3 grid is not showing for my tic tac toe in CSS

I'm starting another project for beginner coding: TicTacToe.

I was following a how-to tutorial on YouTube but some of my results came out differently and I'm having trouble pinpointing where I've made the error.

Problem

Below would be my code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's now connected to CSS file-->
<link rel="stylesheet" href="tictactoe.css"
<title>Tic Tac Toe </title>
</head>
<body>
<div class="container"> 
    <h1 class="title">Tic <span>Tac</span> Toe</h1>

    <div class="status-action">
        <div class="status"> x is next </div>
        <div class=" reset"> Reset </div>
    </div>
<!-- put "div.etc-etc" then press "tab" and it'll automatically give you the whole tag-->
    <div class="game-grid"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        
</div>
<!-- It's now connected to JS file-->
<script src="tictactoe.js"></script>
</body>
</html>

CSS

* {
box-sizing: border-box; 
margin: 0;
padding: 0; 
}


body {  
color: #545454;
display: flex; 
font-family: sans-serif;
justify-content: center;
}

.container {
background-color: #14BDAC;
margin: 50px;
padding: 50px;
border-radius: 25px;
width: 500px;
height: 500px;
}

.title {
text-align: center;}
.title span{
color: #F2EBD3;
}


.status-action {
 display: flex; 
margin-top: 25px;
font-size: 25px;
justify-content: space-around; 
}

.reset {
cursor: pointer; 
.reset:hover {
color: #F2EBD3;
}

.game-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px; 
}

.game-cell {
height: 200px;
width: 200px;
background: aquamarine;
}

This would be the video I'm following for additional resource: enter link description here
(hopefully the video starts at 16:20 and ends around 20:40)

Again, if the way I posted the question is incorrect please edit and let me know where I've gone wrong so that I can do better next time.
Thank you!

I don't know why it's showing, "Tic Tac Toe Tic Tac Toe" under "!DOCTYPE HTML"
I tried figuring that out as well but was unable to find out the problem.

Solution

  • You are getting Tic Tac Toe twice as you have not closed the link tag in the head section: <link rel="stylesheet" href="tictactoe.css"></link>

    Also your grid is properly displayed as some of the closing tags are not on the proper places.

    CSS:

    * {
box-sizing: border-box; 
margin: 0;
padding: 0; 
}


body {  
color: #545454;
display: flex; 
font-family: sans-serif;
justify-content: center;
}

.container {
background-color: #14BDAC;
margin: 50px;
padding: 50px;
border-radius: 25px;
width: 500px;
height: 500px;
}

.title {
text-align: center;
}
.title span{
color: #F2EBD3;
}


.status-action {
 display: flex; 
margin-top: 25px;
font-size: 25px;
justify-content: space-around; 
}

.reset {
cursor: pointer; 
}
.reset:hover {
color: #F2EBD3;
}

.game-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px; 
}

.game-cell {
height: 200px;
width: 200px;
background: aquamarine;
}

    HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's now connected to CSS file-->
<link rel="stylesheet" href="tictactoe.css"></link>
<title>Tic Tac Toe </title>
</head>
<body>
<div class="container"> 
    <h1 class="title">Tic <span>Tac</span> Toe</h1>

    <div class="status-action">
        <div class="status"> x is next </div>
        <div class=" reset"> Reset </div>
    </div>
<!-- put "div.etc-etc" then press "tab" and it'll automatically give you the whole tag-->
    <div class="game-grid">
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
    </div>
</div>
<!-- It's now connected to JS file-->
<script src="tictactoe.js"></script>
</body>
</html>