Add files via upload

shishir085 · Dec 27, 2023 · 495b079 · 495b079
1 parent 6e0a8b5
commit 495b079
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -7,11 +7,15 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <div class="msgcontainer hide">
+        <p id="msg">Winner</p>
+        <button id="newgame">New Game</button>
+    </div>
 <h1>Tic Tac Toe</h1>
 <div class="container">
 <div class="game">
-    <button class="box ">X</button>
-    <button class="box ">O</button>
+    <button class="box "></button>
+    <button class="box "></button>
     <button class="box "></button>
     <button class="box "></button>
     <button class="box "></button>

diff --git a/script.js b/script.js
@@ -1,5 +1,80 @@
-let boxes=document.querySelectorAll(".box")
-let reset=document.querySelector("#reset")
+let boxes = document.querySelectorAll(".box")
+let reset = document.querySelector("#reset")
+let newgamebtn = document.querySelector("#newgame")
+let msgcontainer = document.querySelector(".msgcontainer");
+let msg = document.querySelector("#msg")
 
 
-let  
+let turnO = true;
+
+let win = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8]
+]
+
+const resetgame = () => {
+    turnO = true;
+    enablebox(); 
+    msgcontainer.classList.add("hide");
+}
+
+boxes.forEach((box) => {
+    box.addEventListener('click', () => {
+
+        if (turnO) {
+            box.innerText = "O"
+            turnO = false
+        }
+        else {
+            box.innerText = "X"
+            turnO = true
+        }
+        box.disabled = true
+        checkwinner();
+    })
+})
+
+const disblebox = () => {
+    for (let box of boxes) {
+        box.disabled = true;
+    }
+
+};
+const enablebox = () => {
+    for (let box of boxes) {
+        box.disabled = false;
+        box.innerText="";
+    }
+};
+
+const showwinner = (winner) => {
+    msg.innerText = `Congrulations, Winner is ${winner}`;
+    msgcontainer.classList.remove("hide");
+    disblebox();
+};
+
+const checkwinner = () => {
+    for (let pattern of win) {
+
+        let pos1value = boxes[pattern[0]].innerText;
+        let pos2value = boxes[pattern[1]].innerText;
+        let pos3value = boxes[pattern[2]].innerText;
+
+        if (pos1value != "" && pos2value != "" && pos3value != "") {
+            if (pos1value === pos2value && pos2value === pos3value) {
+
+                showwinner(pos1value);
+            }
+        }
+    }
+
+}
+
+newgamebtn.addEventListener("click", resetgame)
+reset.addEventListener("click", resetgame)
diff --git a/styles.css b/styles.css
@@ -5,8 +5,8 @@
 }
 
 body {
-    background-color: #00877E;
-    font-family: Arial, sans-serif;
+    background-color:#3C91E6;
+    font-family: 'Poppins', sans-serif;
 
     text-align: center;
 }
@@ -22,12 +22,12 @@ body {
 .game {
     height: 60vmin;
     width: 60vmin;
-    
+
     display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5vmin;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5vmin;
 
 
 }
@@ -36,22 +36,47 @@ body {
     height: 17vmin;
     width: 17vmin;
     border-radius: 14px;
-    border: none ;
-    box-shadow: 0 0 16px rgba(0, 0, 0, .2) ;
-    font-size:50px ;
+    border: none;
+    box-shadow: 0 0 16px rgba(0, 0, 0, .2);
+    font-size: 50px;
     color: #ff0000;
-
+    background-color: #d4d4d4;
+
+}
+
+#reset {
+    height: 45px;
+    width: 140px;
+    padding: 9px;
+    border-radius: 15px;
+    border: none;
+    background-color:  #00877E;
+    color: white;
+    font-size: 19px;
+}
+
+#reset:hover,
+.box:hover ,#newgame:hover{
+    cursor: pointer;
 }
-#reset{
+
+#newgame{
     height: 45px;
-    width: 120px;
+    width: 140px;
     padding: 9px;
     border-radius: 15px;
     border: none;
-    background-color: #525252;
+    background-color:  #00877E;
     color: white;
-    font-size: 18px;
+    font-size: 19px;
 }
-#reset:hover ,  .box:hover{
-cursor: pointer;
+#msg{
+    color: #ffffff;
+    font-size:30px ;
+
+
+}
+
+.hide{
+    display:none ;
 }