Add files via upload

sharayuanuse · Jun 12, 2024 · e3e6cbf · e3e6cbf
1 parent 47a737e
commit e3e6cbf
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,80 @@
+let boxes = document.querySelectorAll(".box");
+let resetBtn = document.querySelector("#reset-button");
+let newBtn = document.querySelector("#new-button");
+let msgContainer = document.querySelector(".msg-container");
+let msg = document.querySelector("#msg");
+
+let turnO = true;  //playerX, playerO
+
+const winPatterns = [
+    // Horizontal
+    [0,1,2],
+    [3,4,5],
+    [6,7,8],
+    // Vertical
+    [0,3,6],
+    [1,4,7],
+    [2,5,8],
+    //Diagonal
+    [0,4,8],
+    [2,4,6]
+]; 
+
+const resetGame = () => {
+    turnO = true;
+    enableBoxes();
+    msgContainer.classList.add("hide");
+
+}
+
+boxes.forEach((box) => {
+    box.addEventListener("click", () => {
+        if(turnO){
+            box.innerText = "O";
+            box.style.color = "yellow";
+            turnO = false;
+        }
+        else{
+            box.innerText = "X";
+            box.style.color = "white";
+            turnO = true
+        }
+        box.disabled = true;
+
+        checkWinner();
+    });
+});
+
+const disableBoxes = () => {
+    for(let box of boxes){
+        box.disabled = true;
+    }
+}
+
+const enableBoxes = () => {
+    for(let box of boxes){
+        box.disabled = false;
+        box.innerText = '';
+    }
+}
+const showWinner = (winner) => {
+    msg.innerText = "Congratulations, Winner is " + winner;
+    msgContainer.classList.remove("hide");
+    disableBoxes();
+}
+const checkWinner = () => {
+    for(let pattern of winPatterns){
+        pos1 = boxes[pattern[0]].innerText;
+        pos2 = boxes[pattern[1]].innerText;
+        pos3 = boxes[pattern[2]].innerText;
+
+        if(pos1 != '' && pos2 != '' && pos3 != ''){
+            if(pos1 === pos2 && pos2 === pos3){
+                showWinner(pos1);
+            }
+        }
+    }
+}
+
+newBtn.addEventListener("click",resetGame);
+resetBtn.addEventListener("click",resetGame);
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic-Tac-Toe Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="msg-container hide">
+        <p id='msg'>Winner</p>
+        <button id="new-button">New Game</button>
+    </div>
+    <main>
+        <h1>Tic-Tac-Toe</h1>
+        <div class="container">
+            <div class="game">
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+                <button class=box></button>
+            </div>
+        </div>
+        <button id="reset-button">Reset Game</button>
+    </main>
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,75 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: rgb(251, 208, 215);
+    text-align: center;
+    padding: 2rem;
+}
+.container{
+    height: 70vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5vmin;
+}
+
+.game{
+    height: 60vmin;
+    width: 60vmin;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5vmin;
+}
+
+.box{
+    height: 18vmin;
+    width: 18vmin;
+    border-radius: 1rem;
+    border: none;
+    box-shadow: 0 0 1rem rgba(0,0,0,0.3);
+    font-size: 8vmin;
+    background-color:rgb(198, 11, 130);
+}
+
+#reset-button{
+    padding:1rem;
+    font-size: 1.25rem;
+    background-color: black;
+    color: white;
+    border-radius: 1rem;
+    border: none;
+}
+
+#new-button{
+    padding: 1rem;
+    font-size: 1.25rem;
+    background-color: black;
+    color: white;
+    border-radius: 1rem;
+    border: none;
+}
+
+#msg{
+    color:black;
+    font-size: 5vmin;
+    padding: 1rem;
+    align-items: center;
+}
+
+.msg-container{
+    height: 100vmin;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.hide{
+    display: none;
+}