first commit

eiva078 · Jun 4, 2024 · 74aab23 · 74aab23
commit 74aab23
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,77 @@
+let btn = document.querySelectorAll(".btn");
+let rstbtn = document.querySelector("#rstbtn");
+const game = document.querySelector(".container");
+let msg = document.querySelector("#msg");
+const newgame = document.querySelector("#newgme")
+
+let turnX=true;
+let count = 0;
+const Winner = document.querySelector("#msg");
+
+const winPattern = [
+    [0,1,2],
+    [3,4,5],
+    [6,7,8],
+    [0,3,6],
+    [1,4,7],
+    [2,5,8],
+    [0,4,8],
+    [2,4,6]
+];
+const resetgame = ()=>{
+    msg.classList.add("hide");
+    newgame.classList.add("hide");
+    game.classList.remove("hide");
+    rstbtn.classList.remove("hide");
+    enablebtn();
+    count = 0;
+};
+const enablebtn = ()=>{
+    for(let box of btn){
+        box.disabled=false;
+        box.innerText="";
+        box.classList.remove("clr");
+    }
+};
+const checkwinner = ()=>{
+    count++;
+    for(let pattern of winPattern){
+        let one = btn[pattern[0]].innerText;
+        let snd = btn[pattern[1]].innerText;
+        let thr = btn[pattern[2]].innerText;
+        if(one !="" && snd != "" && thr != ""){
+            if(one===snd && snd ===thr){
+                msg.innerText = `Congratulations!! Winner is ${one}`;
+                msg.classList.remove("hide");
+                newgame.classList.remove("hide");
+                game.classList.add("hide");
+                rstbtn.classList.add("hide");
+            }
+        }
+    }
+    if(count===9){
+        msg.innerText = `The match ended in a draw.`;
+        msg.classList.remove("hide");
+                newgame.classList.remove("hide");
+                game.classList.add("hide");
+                rstbtn.classList.add("hide");
+    }
+};
+btn.forEach ((box)=>{
+    box.addEventListener("click", () =>{
+        console.log("Button was clicked");
+        if(turnX){
+            box.innerText = "X";
+            turnX = false;
+        }else{
+            box.innerText= "O";
+            turnX = true;
+            box.classList.add("clr");
+        }
+        box.disabled=true;
+        checkwinner();
+    });
+});
+
+newgame.addEventListener(("click"),resetgame);
+rstbtn.addEventListener(("click"),resetgame);
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!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</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <main>
+      <h1>TIC-TAC-TOE</h1>
+      <div id="msg" class="hide"></div>
+      <button id="newgme" class="rstbtn hide">New Game</button>
+      <div class="container">
+        <div class="game">
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        <button class="btn"></button>
+        </div>
+      </div>
+      <button id="rstbtn" class="rstbtn">Reset Game</button>
+    </main>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,60 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: cadetblue;
+    text-align: center;
+}
+h1{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 15px;
+}
+#msg {
+    font-size: 80px;
+    padding: 200px;
+}
+.container{
+    height: 70vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.game{
+    height: 60vmin;
+    width:60vmin;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+.btn{
+    height: 18vmin;
+    width:18vmin;
+    font-size: 10vmin;
+    border-radius: 1rem;
+    border: none;
+    background-color: rgb(204 215 126);
+    color:#2c8c14;
+    cursor: pointer;
+}
+.clr{
+    color: #451cc6;
+}
+.rstbtn{
+    padding: 15px;
+    font-size: medium;
+    background-color: black;
+    color: white;
+    border-radius: 15px;
+    border: none;
+    margin-bottom: 50px;
+    cursor: pointer;
+}
+.hide{
+    display: none;
+}