From 1d239a3fae4f074c2fba2a1271297952247aa9bb Mon Sep 17 00:00:00 2001 From: shravani dorle Date: Fri, 31 Oct 2025 21:05:46 +0530 Subject: [PATCH] Added tictactoe --- .../MiniProjects/TIC-TAC-TOE/README.md | 29 +++++ .../Frontend/MiniProjects/TIC-TAC-TOE/app.js | 100 ++++++++++++++++++ .../MiniProjects/TIC-TAC-TOE/index.html | 37 +++++++ .../MiniProjects/TIC-TAC-TOE/style.css | 86 +++++++++++++++ 4 files changed, 252 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/TIC-TAC-TOE/README.md create mode 100644 Domains/Frontend/MiniProjects/TIC-TAC-TOE/app.js create mode 100644 Domains/Frontend/MiniProjects/TIC-TAC-TOE/index.html create mode 100644 Domains/Frontend/MiniProjects/TIC-TAC-TOE/style.css diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/README.md b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/README.md new file mode 100644 index 00000000..a7705f2b --- /dev/null +++ b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/README.md @@ -0,0 +1,29 @@ +# 🕹ī¸ Tic-Tac-Toe Game (Mini-Project) + +**Contributor:** shravanidorle + +## Description + +This project is a classic, fully functional **Tic-Tac-Toe** game designed for two players. It is built entirely using **HTML, CSS, and vanilla JavaScript**, demonstrating core front-end logic and DOM manipulation skills. + +The game features: + +- A clear $3 \times 3$ grid interface. +- Turn-based player logic (Player O vs. Player X). +- Win detection across rows, columns, and diagonals. +- A dedicated display message to announce the winner or a draw. +- **"New Game"** and **"Reset Game"** buttons to restart the game state. + +This is an excellent example of a complete, interactive mini-project suitable for the Frontend domain. + +## 🚀 Technologies Used + +- **HTML5** (Structure) +- **CSS3** (Styling, including custom Google Fonts) +- **JavaScript (Vanilla)** (Core game logic, turn management, and win checking) + +## 🛠ī¸ How to Run + +1. **Clone the repository.** +2. Navigate to this project folder: `Domains/Frontend/MiniProjects/TicTacToe` (or your chosen project folder name). +3. Open the **`index.html`** file directly in any web browser. No local server or dependencies are required. diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/app.js b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/app.js new file mode 100644 index 00000000..3f640af3 --- /dev/null +++ b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/app.js @@ -0,0 +1,100 @@ +let box=document.querySelectorAll(".box"); +let reset=document.querySelector("#reset"); +let newgame=document.querySelector("#btn"); +let msgCon=document.querySelector(".msg-container"); +let msg=document.querySelector("#winner"); +let main=document.querySelector("main"); + +let turnO=true; + +const win=[ + [0,1,2], + [0,3,6], + [0,4,8], + [1,4,7], + [2,5,8], + [2,4,6], + [3,4,5], + [6,7,8] +]; + +const resetGame=()=>{ + turnO=true + enableBoxes(); + msgCon.classList.add("hide") +} + +const enableBoxes=()=>{ + for (let i of box){ + i.disabled=false; + i.innerHTML=""; + i.classList.remove("x", "o"); + } +} + +box.forEach((box)=>{ + box.addEventListener("click",function(){ + if(turnO===true){ + box.classList.add("o"); + box.innerHTML="O"; + turnO=false; + }else{ + box.classList.add("x"); + box.innerHTML="X"; + turnO=true; + } + box.disabled=true; + + checkWinner(); + }) +}) + +const disableBoxes=()=>{ + box.forEach((box)=>{ + box.disabled=true; + }) +} + +const showwinner=(winner)=>{ + msg.innerHTML=`Player ${winner} is winner !`; + msgCon.classList.remove("hide") + disableBoxes(); +} + + +const checkWinner =()=>{ + let filledBoxes = 0; + let winnerFound = false; + for (let i of win) + { + let val1=box[i[0]].innerHTML; + let val2=box[i[1]].innerHTML; + let val3=box[i[2]].innerHTML; + if (val1!="" && val2!="" && val3!="") + { + if(val1===val2 && val2===val3) + { + document.querySelector("h1").innerHTML=`Player ${val1} wins !`; + showwinner(val1) + winnerFound = true; + break; + } + } + } + + box.forEach((box) => { + if (box.innerHTML !== "") { + filledBoxes++; + } + }); + + if (filledBoxes === 9 && !winnerFound) { + document.querySelector("h1").innerHTML = "It's a draw!"; + msg.innerHTML = "It's a draw!"; + msgCon.classList.remove("hide"); + } +}; + + +newgame.addEventListener("click",resetGame); +reset.addEventListener("click",resetGame) \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/index.html b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/index.html new file mode 100644 index 00000000..7d8742e8 --- /dev/null +++ b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/index.html @@ -0,0 +1,37 @@ + + + + + + Tic-Tac-Toe + + + + + + + +
+

Winner

+ +
+
+

TIC TAC TOE

+
+
+ + + + + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/style.css b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/style.css new file mode 100644 index 00000000..1b992f58 --- /dev/null +++ b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/style.css @@ -0,0 +1,86 @@ +*{ + margin: 0; + padding: 0; + font-family: "Playfair Display", serif; + font-weight: 500; +} +body{ + background-color:#000000; + text-align: center; + color: white; +} +h1{ + margin: 1.5rem; + padding: 1rem; + border-radius: 0.5rem; + box-shadow: 1px 1px 8px aquamarine; + background-color:#2B2D42; +} +.container{ + height: 70vh; + display: flex; + justify-content: center; + align-items: center; + +} +.game{ + height: 60vmin; + width: 60vmin; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 1.5vmin; +} +.box{ + border-radius: 0.6rem; + height: 18vmin; + width: 18vmin; + border: 1px solid beige; + color: maroon; + padding: 10px; + + font-size: 9vmin; + background-color:#8D99AE; +} +#reset{ + border-radius: 0.6rem; + padding: 0.95rem; + color: white; + border: 1px solid aquamarine; + font-size: 3.5vmin; + border-radius: 2vmin; + background-color:#2B2D42; +} +.msg-container{ + color: white; + background-color: black; + margin: 5vmin; + height: 100vh; +} +#btn{ + margin-top: 40vmin; + border-radius: 0.6rem; + padding: 1rem; + color: white; + border: 2px solid aquamarine; + font-size: 4vmin; + border-radius: 2vmin; + background-color:#2B2D42; +} +#winner{ + margin: 1.5rem; + padding: 1rem; + border-radius: 0.5rem; + box-shadow: 1px 1px 8px aquamarine; + background-color:#2B2D42; +} +.hide{ + display: none; +} +.x{ + color: maroon; +} +.o{ + color: gold; +} \ No newline at end of file