very simple X's and O's with html/css/js

jackoconnordev · jackoconnordev · commit 87db77412bda · 2023-10-02T20:53:07.000+01:00
Does not check for winner. Does check if square used. Includes play again button.
diff --git a/classes/noughts-and-crosses/Red_TicTacToe_Icon.svg.png b/classes/noughts-and-crosses/Red_TicTacToe_Icon.svg.png
diff --git a/classes/noughts-and-crosses/index.html b/classes/noughts-and-crosses/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>X's and O's</title>
+  <link rel="icon" href="./Red_TicTacToe_Icon.svg.png">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="./style.css" rel="stylesheet">
+</head>
+
+<body>
+  <h1>Play X's and O's</h1>
+
+  <button onclick="window.location.reload(true)">Play again</button>
+
+  <div class="game-board">
+    <!--First row-->
+    <div id="1" class="grid-square"></div>
+    <div id="2" class="grid-square"></div>
+    <div id="3" class="grid-square"></div>
+    <!--Second row-->
+    <div id="4" class="grid-square"></div>
+    <div id="5" class="grid-square"></div>
+    <div id="6" class="grid-square"></div>
+    <!--Third row-->
+    <div id="7" class="grid-square"></div>
+    <div id="8" class="grid-square"></div>
+    <div id="9" class="grid-square"></div>
+  </div>
+
+  <!--Load javascript after loading website html!-->
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/classes/noughts-and-crosses/script.js b/classes/noughts-and-crosses/script.js
@@ -0,0 +1,47 @@
+// use to track if placing an X or an O next
+let placeX = true;
+
+// function to add X or O to our grid square
+function squareClicked(square) {
+  if (square.innerText != "") {
+    return;  // square is already used so do nothing
+  }
+
+  if (placeX) {
+    square.innerText = "X";  // takes our empty <div></div> and makes it <div>X</div>
+  } else {
+    square.innerText = "0";
+  }
+  // placeX = not placeX (not true = false)
+  placeX = !placeX;
+}
+
+// select elements in DOM using javascript
+// first row
+let square1 = document.getElementById("1");  // this is why we have id set in the html
+let square2 = document.getElementById("2");
+let square3 = document.getElementById("3");
+
+// second row
+let square4 = document.getElementById("4");
+let square5 = document.getElementById("5");
+let square6 = document.getElementById("6");
+
+// third row
+let square7 = document.getElementById("7");
+let square8 = document.getElementById("8");
+let square9 = document.getElementById("9");
+
+// add onclick handlers to each square
+// first row
+square1.onclick = () => squareClicked(square1);  // what happens if no "() => " before squareClicked?
+square2.onclick = () => squareClicked(square2);
+square3.onclick = () => squareClicked(square3);
+// second row
+square4.onclick = () => squareClicked(square4);
+square5.onclick = () => squareClicked(square5);
+square6.onclick = () => squareClicked(square6);
+// third row
+square7.onclick = () => squareClicked(square7);
+square8.onclick = () => squareClicked(square8);
+square9.onclick = () => squareClicked(square9);
diff --git a/classes/noughts-and-crosses/style.css b/classes/noughts-and-crosses/style.css
@@ -0,0 +1,21 @@
+.game-board {
+  height: min(90vh, 90vw);
+  width: min(90vh, 90vw);
+  margin: auto;
+
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 2px;
+  background-color: black;
+  border: 2px solid black;
+}
+
+.grid-square {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  font-size: 28vh;
+  text-align: center;
+}
+
diff --git a/index.html b/index.html
@@ -15,9 +15,10 @@ <h1>IBM CoderDojo webpages</h1>
   <nav>
     <h2>Navigation links</h2>
     <ul>
+      <li><a href="./personal-websites/">Member websites</a></p>
       <li><a href="./classes/birds-with-hands">Birds with hands</a></li>
       <li><a href="./classes/coder-dojo-homepage">CoderDojo homepage</a></li>
-      <li><a href="./personal-websites/">Member websites</a></p>
+      <li><a href="./classes/noughts-and-crosses/">X's and O's game</a></li>
     </ul>
   </nav>
 
