0

I want to ask a rather simple question: how can I code a Tic Tac Toe table using HTML5 and CSS3? Here is the code I ran:

HTML

<!DOCTYPE html>
<html>
   <head> 
      <title> Tic Tac Toe</title>
      <link rel="stylesheet" type="text/css" href="Tic Tac Toe.css" media="screen"/>
      <script type="text/javascript" src="Tic Tac Toe.js"></script>
      <meta charset= "utf-8"> 
      <meta name="viewport" content="width=device-width">
   </head>
   <body> 
      <div id="square1"></div>
      <div id="square2"></div>
      <div id="square3"></div>
      <div id="square4"></div>
      <div id="square5"></div>
      <div id="square6"></div>
      <div id="square7"></div>
      <div id="square8"></div>
      <div id="square9"></div>
   </body>
</html>

CSS

#square1 {
    background-color: yellow;
    width: 50px;
    height: 50px;
    margin-left: 700px;
    position: static;
}

#square2 {
    background-color: grey;
    width: 50px;
    height: 50px;
    margin-left: 700px;
    position: static;
}

#square3 {
    background-color: yellow;
    width: 50px;
    height: 50px;
    margin-left: 700px;
    position: static;
}

#square4 {
    background-color: grey;
    width: 50px;
    height: 50px;
    margin-bottom: -40px;
    
}

#square5 {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

#square6 {
    background-color: grey;
    width: 50px;
    height: 50px;
}

#square7 {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

#square8 {
    background-color: grey;
    width: 50px;
    height: 50px;
}

#square9 {
    background-color: yellow;
    width: 50px;
    height: 50px;
}

Can someone please tell me what to do with those divs, so I can group them like a board? I tried drawing 9 squares, then grouping them together in the form of a board. But I cannot, when I am trying to move a div near another it just disappears. I really need a hand :)))

Also, I noticed that most people code this in JavaScript. Did I make my life a lot harder trying to code it in CSS3 and HTML? :D

Thanks a lot in advance!

Daweed
  • 1,419
  • 1
  • 9
  • 24
Alexandru
  • 9
  • 2
  • 3
    You are asking several questions. Could you limit it to one specific question? For a working Tic tac toe game, you need not only the representation of the board but also the interaction with it. If it is only about showing a grid (without any content), please make this clear. Otherwise, this question may be too broad, and there are implementations to be found on this site already. – trincot Jan 30 '21 at 17:28
  • Well, I am still learning the basics, so if I was a bit vague, I'll try to get back better. Thanks for your feedback! – Alexandru Jan 30 '21 at 18:14

2 Answers2

1

Using only HTML and CSS, you will only be able to create a static tic-tac-toe board, if you want to make it into an actual tic-tac-toe game you would need to use JavaScript to handle the game logic behind it.

Assuming from your code I see you're still learning the basics. Don't sweat it too much if you need to lookup any tutorial, but if I may give you a bit of advice you can continue to learn more about CSS Flexbox / Grid to deal with your layout problem.

Best of luck.

Here's a good resource to help you learn more about it

  1. CSS Flexbox
  2. CSS Grid
nadhif
  • 46
  • 4
1

You can use CSS flexbox styling for arranging the 9 boxes in 3 rows. For alternating the background color you can use odd and even CSS keywords. It is better practice to not give each box a separate id attribute. Instead group these boxes in a container element, from where you can control the CSS styling, also of its children.

I add a little bit of JavaScript, just to illustrate how you can place X and O symbols in those div elements. But that's all:

let game = document.getElementById("game");
let moveCount = 0;
game.addEventListener("click", function (e) {
    if (e.target.textContent) return; // is already occupied;
    e.target.textContent = "XO"[moveCount++ % 2];
});
#game {
    display: flex;
    flex-wrap: wrap; 
    width: 150px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
}

#game div {
    width: 50px;
    height: 50px;
    display: inline-block;
}

#game div:nth-child(odd) {
    background-color: yellow;
}

#game div:nth-child(even) {
    background-color: grey;
}
<div id="game">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>

To add game logic, like checking whether there is a win or a draw, and to have "the computer" as opponent, have a look at some other questions on Tic Tac Toe, including one where I posted an answer.

trincot
  • 317,000
  • 35
  • 244
  • 286