init commit

2026-08-04 06:53:36 -06:00
commit 5df8484e8f
91 changed files with 2859 additions and 0 deletions
@@ -0,0 +1,12 @@
+* {
+
+    margin: auto;
+    position: relative;
+
+    font-family: Lato sans-serif;
+    font-size: 1em;
+
+    background-color: #4A245E;
+    color: white;
+
+}
@@ -0,0 +1,43 @@
+* {
+
+    font-family: Lato sans-serif;
+
+    background-color: #4A245E;
+    color: white;
+
+}
+
+body {
+
+    display: flex;
+    justify-content: center;
+
+}
+
+.grid {
+
+    display: grid;
+
+    grid-template-columns: 10em 10em 10em;
+    grid-template-rows: 10em 10em 10em;
+
+    width: 75%;
+
+}
+
+.box {
+
+    font-size: 5em;
+
+    border: 1px solid white;
+
+    padding: 1em;
+
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    margin: 0;
+
+}
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+  <head>
+
+    <meta name = "viewport" content = "width=device-width, initial-scale=1" charset="UTF-8">
+    <link rel="stylesheet" href="css/style.css">
+
+    <title>PLACEHOLDER</title>
+
+  </head>
+
+  <body>
+
+    <div id="output">
+
+      <h1 id="output-text"></h1>
+      <button id="clear" onclick="resetAndClear()" hidden>Clear</button>
+
+    </div>
+
+    <div class="grid">
+
+      <div class="box" id="0" onclick="clickTracker(this)"></div>
+      <div class="box" id="1" onclick="clickTracker(this)"></div>
+      <div class="box" id="2" onclick="clickTracker(this)"></div>
+
+      <div class="box" id="3" onclick="clickTracker(this)"></div>
+      <div class="box" id="4" onclick="clickTracker(this)"></div>
+      <div class="box" id="5" onclick="clickTracker(this)"></div>
+
+      <div class="box" id="6" onclick="clickTracker(this)"></div>
+      <div class="box" id="7" onclick="clickTracker(this)"></div>
+      <div class="box" id="8" onclick="clickTracker(this)"></div>
+
+    </div>
+
+  </body>
+
+  <footer>
+
+    <script src="js/script.js"></script>
+
+  </footer>
+
+</html>
@@ -0,0 +1,170 @@
+const playerX = prompt("Please enter player one's name:");
+const playerO = prompt("Please enter player two's name:");
+
+const boxes = document.getElementsByClassName("box");
+
+let currentPlayer = playerX;
+
+const posX = [];
+let indexX = 0;
+
+const posO = [];
+let indexO = 0;
+
+let marks = 0;
+
+document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn."
+document.getElementById("clear").hidden = true;
+
+function clickTracker(button) {
+
+    mark(button.id);
+
+}
+
+function mark(index) {
+
+    let winstate = false;
+
+    marks++;
+
+    if(currentPlayer === playerX) {
+
+        boxes[index].innerHTML = "X" 
+
+        posX[indexX] = index;
+        indexX++;
+
+        if(marks > 4) {
+
+            winstate = checkForWin(posX);
+
+        }
+
+        if(winstate === true) {
+
+            document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
+            document.getElementById("clear").hidden = false;
+
+        } else {
+
+            currentPlayer = playerO;
+            document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
+
+        }
+
+    } else {
+
+        boxes[index].innerHTML = "O"
+
+        posO[indexO] = index;
+        indexO++;
+
+        if(marks > 4) {
+
+            winstate = checkForWin(posO);
+
+        }
+
+        if(winstate === true) {
+
+            document.getElementById("output-text").innerHTML = currentPlayer + " WON!"
+            document.getElementById("clear").hidden = false;
+            
+        } else {
+
+            currentPlayer = playerX;
+            document.getElementById("output-text").innerHTML = currentPlayer + "'s turn."
+
+        }
+
+    }
+
+
+}
+
+function checkForWin(player) {
+
+    const winstates = [
+
+        [0,1,2],
+        [3,4,5],
+        [6,7,8],
+        [0,3,6],
+        [1,4,7],
+        [2,5,8],
+        [0,4,8],
+        [2,4,6]
+
+    ];
+
+    let count = 0;
+
+    for(let j = 0; j < winstates.length; j++) {
+
+        for(let k = 0; k < player.length; k++) {
+
+            for(let i = 0; i < winstates[j].length; i++) {
+
+                if(player[k] == winstates[j][i]) {
+
+                    count++;
+
+                }
+
+            }
+
+        }
+
+        if(count === 3) {
+
+            return true;
+
+        } else {
+
+            count = 0;
+
+        }
+
+    }
+
+    return false;
+
+}
+
+function resetAndClear() {
+
+    for(let i = 0; i < boxes.length; i++) {
+
+        boxes[i].innerHTML = ""
+
+    }
+
+    if(currentPlayer === playerX) {
+
+        currentPlayer = playerO;
+
+    } else {
+
+        currentPlayer = playerX;
+
+    }
+
+    for(let i = 0; i < posX.length; i++) {
+
+        posX[i] = -1;
+
+    }
+
+    for(let i = 0; i < posO.length; i++) {
+
+        posO[i] = -1;
+
+    }
+
+    marks = 0;
+
+    document.getElementById("output-text").innerHTML = currentPlayer + "\'s turn"
+    document.getElementById("clear").hidden = true;
+
+}