acesdit · Tejas-Santosh-Nalawade · Oct 31, 2025 · Oct 31, 2025
diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/README.md 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
@@ -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)
diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/index.html b/Domains/Frontend/MiniProjects/TIC-TAC-TOE/index.html
@@ -0,0 +1,37 @@
+<!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="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="msg-container hide">
+        <h1 id="winner">Winner</h1>
+        <button id="btn">New Game</button>
+    </div>
+    <main >
+        <h1>TIC TAC TOE</h1>
+        <div class="container">
+            <div class="game">
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+                <button class="box"></button>
+            </div>
+        </div>    
+    <button id="reset">Reset Game</button>
+    </main>
+</body>
+<script src="app.js"></script>
+</html>
diff --git a/Domains/Frontend/MiniProjects/TIC-TAC-TOE/style.css 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;
+}