From 74aab2347898c8c19805d8d4e6d03fda60296a47 Mon Sep 17 00:00:00 2001 From: Eiva Date: Wed, 5 Jun 2024 04:12:36 +0530 Subject: [PATCH] first commit --- app.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 31 ++++++++++++++++++++++ style.css | 60 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 168 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..b8abd30 --- /dev/null +++ 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); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..66831d2 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + Tic Tac Toe + + + +
+

TIC-TAC-TOE

+
+ +
+
+ + + + + + + + + +
+
+ +
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..5fdf084 --- /dev/null +++ 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; +} \ No newline at end of file