Ayushparikh-code · rohaanmd · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025
diff --git a/Index.md b/Index.md
@@ -111,3 +111,4 @@
 | [Pomodoro Timer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Pomodoro-Timer)         | A simple Pomodoro Timer using React.js, where you can track the time spent on work and break.  |
 | [TravelPro](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/TravelPro)         | A simple static website to enhance HTML & CSS skills  |
 |[Audio Visualization with three.js](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Audio%20Visualization%20with%20three.js) | audio visualization using the powerful 3D graphics library, three.js |
+|[LIGHTS OUT PUZZLE](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/puzzle-lights-out) | A simple Lights out puzzle using HTML, CSS & JS.  |
diff --git a/puzzle-lights-out/README.md b/puzzle-lights-out/README.md
@@ -0,0 +1,84 @@
+# 🌟 Lights Out Puzzle Game
+
+## 🎮 Game Overview
+
+Lights Out is an engaging puzzle game that challenges your strategic thinking. Your mission is to turn off all the lights on a 5x5 grid by cleverly toggling lights.
+
+## 🎯 Objective
+
+Turn off ALL lights on the game board in the fewest moves possible!
+
+## 📷Screenshots
+ ![Image 1](/puzzle-lights-out/assets/Lights-Out-Puzzle1.png "screenshot-1")
+ ![Image 2](/puzzle-lights-out/assets/Lights-Out-Puzzle2.png "screenshot-2")
+
+## 💻Tech Stack
+<br>
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+<br>
+
+## 🕹️ How to Play
+
+### Basic Rules
+- Click on any light to toggle it and its adjacent lights (up, down, left, right)
+- Your goal is to turn off every single light
+- The game tracks your moves, so try to solve the puzzle efficiently
+
+### Gameplay Mechanics
+1. When you click a light, it changes state:
+   - Lit lights turn off
+   - Unlit lights turn on
+2. Clicking a light also affects its neighboring lights
+3. Keep clicking until all lights are off
+
+### Winning the Game
+- Successfully turn off ALL lights
+- The fewer moves you use, the better your performance
+- A congratulations message will appear when you win
+
+## 🚀 Game Features
+- Responsive 5x5 light grid
+- Move counter
+- Reset game functionality
+- Intuitive, clean interface
+- Challenging puzzle mechanics
+
+## 💡 Strategies
+- Think ahead before clicking
+- Observe how lights interact
+- Some moves will be more effective than others
+- There's always a solution!
+
+
+## 📜 License
+Open-source project. Feel free to fork and modify!
+
+## 🤝 Contributions
+Suggestions and improvements are welcome! 
+Open an issue or submit a pull request.
+
+
+### How to get the website on your local machine:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+```
+cd Band Website
+````
+ - Run the index.html file and see the results
+
+<br>
+
+
+## Happy Coding!
diff --git a/puzzle-lights-out/assets/Lights-Out-Puzzle1.png b/puzzle-lights-out/assets/Lights-Out-Puzzle1.png
diff --git a/puzzle-lights-out/assets/Lights-Out-Puzzle2.png b/puzzle-lights-out/assets/Lights-Out-Puzzle2.png
diff --git a/puzzle-lights-out/assets/text.txt b/puzzle-lights-out/assets/text.txt
@@ -0,0 +1 @@
+images files uploaded
diff --git a/puzzle-lights-out/index.html b/puzzle-lights-out/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lights Out Puzzle</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Lights Out Puzzle</h1>
+
+        <!-- Instructions Modal -->
+        <div id="instructions-modal" class="modal">
+            <div class="modal-content">
+                <span class="close-btn">&times;</span>
+                <h2>How to Play Lights Out</h2>
+                <div class="instructions-section">
+                    <h3>Objective</h3>
+                    <p>Turn off all the lights on the grid!</p>
+                </div>
+                <div class="instructions-section">
+                    <h3>Game Rules</h3>
+                    <ul>
+                        <li>Clicking a light toggles that light and its adjacent lights (up, down, left, right).</li>
+                        <li>Your goal is to turn off all lights on the board.</li>
+                        <li>The fewer moves you use, the better!</li>
+                    </ul>
+                </div>
+                <div class="instructions-section">
+                    <h3>Tips</h3>
+                    <ul>
+                        <li>Each click changes multiple lights at once.</li>
+                        <li>Think strategically about which lights to click.</li>
+                        <li>There's always a solution - keep trying!</li>
+                    </ul>
+                </div>
+                <div class="instructions-section">
+                    <h3>Winning</h3>
+                    <p>When all lights are off, you win the game! A congratulations message will appear.</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="game-header">
+            <button id="instructions-btn">How to Play</button>
+            <div id="moves-counter">Moves: 0</div>
+        </div>
+
+        <div id="game-board"></div>
+        <div class="controls">
+            <button id="reset-btn">Reset Game</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/puzzle-lights-out/script.js b/puzzle-lights-out/script.js
@@ -0,0 +1,138 @@
+class LightsOutGame {
+    constructor(size = 5) {
+        this.size = size;
+        this.board = [];
+        this.moves = 0;
+        this.initializeBoard();
+        this.renderBoard();
+        this.addEventListeners();
+    }
+
+    initializeBoard() {
+        // Create a random initial board state
+        this.board = Array.from({ length: this.size }, () => 
+            Array.from({ length: this.size }, () => Math.random() < 0.5)
+        );
+    }
+
+    renderBoard() {
+        const gameBoard = document.getElementById('game-board');
+        gameBoard.innerHTML = '';
+        gameBoard.style.gridTemplateColumns = `repeat(${this.size}, 1fr)`;
+
+        for (let row = 0; row < this.size; row++) {
+            for (let col = 0; col < this.size; col++) {
+                const light = document.createElement('div');
+                light.classList.add('light');
+                light.dataset.row = row;
+                light.dataset.col = col;
+                if (this.board[row][col]) {
+                    light.classList.add('on');
+                }
+                gameBoard.appendChild(light);
+            }
+        }
+    }
+
+    addEventListeners() {
+        const gameBoard = document.getElementById('game-board');
+        gameBoard.addEventListener('click', this.handleLightClick.bind(this));
+
+        const resetBtn = document.getElementById('reset-btn');
+        resetBtn.addEventListener('click', this.resetGame.bind(this));
+    }
+
+    handleLightClick(event) {
+        const light = event.target.closest('.light');
+        if (!light) return;
+
+        const row = parseInt(light.dataset.row);
+        const col = parseInt(light.dataset.col);
+
+        this.toggleLight(row, col);
+        this.toggleAdjacentLights(row, col);
+
+        this.moves++;
+        document.getElementById('moves-counter').textContent = `Moves: ${this.moves}`;
+
+        this.checkWinCondition();
+    }
+
+    toggleLight(row, col) {
+        if (row >= 0 && row < this.size && col >= 0 && col < this.size) {
+            this.board[row][col] = !this.board[row][col];
+            this.updateLightDisplay(row, col);
+        }
+    }
+
+    toggleAdjacentLights(row, col) {
+        const directions = [
+            [0, 1],   // right
+            [0, -1],  // left
+            [1, 0],   // down
+            [-1, 0]   // up
+        ];
+
+        directions.forEach(([dx, dy]) => {
+            this.toggleLight(row + dx, col + dy);
+        });
+    }
+
+    updateLightDisplay(row, col) {
+        const light = document.querySelector(`.light[data-row="${row}"][data-col="${col}"]`);
+        light.classList.toggle('on');
+    }
+
+    checkWinCondition() {
+        const allLightsOff = this.board.every(row => 
+            row.every(light => !light)
+        );
+
+        if (allLightsOff) {
+            setTimeout(() => {
+                alert(`Congratulations! You solved the puzzle in ${this.moves} moves!`);
+                this.resetGame();
+            }, 100);
+        }
+    }
+
+    resetGame() {
+        this.initializeBoard();
+        this.renderBoard();
+        this.moves = 0;
+        document.getElementById('moves-counter').textContent = 'Moves: 0';
+    }
+}
+
+// Initialize the game when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new LightsOutGame();
+});
+
+// Add to existing script.js, at the end of the file
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize the game
+    const game = new LightsOutGame();
+
+    // Modal functionality
+    const modal = document.getElementById('instructions-modal');
+    const instructionsBtn = document.getElementById('instructions-btn');
+    const closeBtn = document.querySelector('.close-btn');
+
+    // Open modal
+    instructionsBtn.addEventListener('click', () => {
+        modal.style.display = 'block';
+    });
+
+    // Close modal when clicking X
+    closeBtn.addEventListener('click', () => {
+        modal.style.display = 'none';
+    });
+
+    // Close modal if clicked outside of it
+    window.addEventListener('click', (event) => {
+        if (event.target === modal) {
+            modal.style.display = 'none';
+        }
+    });
+});