From e3e6cbf06ab5d77ca1b266c2ac1d1d3949583320 Mon Sep 17 00:00:00 2001 From: sharayuanuse <114616759+sharayuanuse@users.noreply.github.com> Date: Wed, 12 Jun 2024 19:05:19 +0530 Subject: [PATCH] Add files via upload --- app.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 36 ++++++++++++++++++++++++ style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..2735213 --- /dev/null +++ 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); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b4e15c8 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + +
+ + +