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