Spaces:

ParulPandey
/

Area_and_Perimeter

Running

App Files Files Community

Pp commited on Mar 27

Commit

120291b

verified ·

1 Parent(s): b419bd3

Update index.html

Browse files

Files changed (1) hide show

index.html +88 -92

index.html CHANGED Viewed

@@ -1,115 +1,111 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>📝 Area & Perimeter Adventure 📐</title>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="game-container">
-        <h1>📝 Area & Perimeter Adventure 📐</h1>
-        <div class="controls">
-            <button id="add-mode" class="mode-active">✏️ Add Squares</button>
-            <button id="erase-mode">🧽 Erase Squares</button>
-            <button id="reset-grid">🔄 Reset</button>
-        </div>
-        <div class="grid-wrapper">
-            <div class="grid" id="grid"></div>
-        </div>
-        <div class="stats">
-            <div class="stat-box">
-                <div>Area:</div>
-                <div class="stat-value"><span id="area">0</span> 🟩</div>
-            </div>
-            <div class="stat-box">
-                <div>Perimeter:</div>
-                <div class="stat-value"><span id="perimeter">0</span> 📏</div>
-            </div>
         </div>
     </div>
-    <script>
-        const gridSize = 15;
-        const grid = document.getElementById('grid');
-        const areaDisplay = document.getElementById('area');
-        const perimeterDisplay = document.getElementById('perimeter');
-        const addModeBtn = document.getElementById('add-mode');
-        const eraseModeBtn = document.getElementById('erase-mode');
-        const resetBtn = document.getElementById('reset-grid');
-        let mode = 'add';
-        let filledCells = new Set();
-        // Build the grid
-        function initGrid() {
-            grid.innerHTML = '';
-            for (let i = 0; i < gridSize * gridSize; i++) {
-                const cell = document.createElement('div');
-                cell.className = 'cell';
-                cell.dataset.index = i;
-                cell.addEventListener('click', handleCellClick);
-                grid.appendChild(cell);
-            }
-        }
-        // Handle clicks
-        function handleCellClick(e) {
-            const index = e.target.dataset.index;
-            if (mode === 'add' && !filledCells.has(index)) {
-                e.target.classList.add('filled');
-                filledCells.add(index);
-            } else if (mode === 'erase' && filledCells.has(index)) {
-                e.target.classList.remove('filled');
-                filledCells.delete(index);
-            }
-            updateStats();
-        }
-        // Update area and perimeter
-        function updateStats() {
-            const area = filledCells.size;
-            let perimeter = 0;
-            filledCells.forEach(index => {
-                const i = parseInt(index);
-                if (!filledCells.has((i - gridSize).toString())) perimeter++; // top
-                if (!filledCells.has((i + 1).toString()) || i % gridSize === gridSize - 1) perimeter++; // right
-                if (!filledCells.has((i + gridSize).toString())) perimeter++; // bottom
-                if (!filledCells.has((i - 1).toString()) || i % gridSize === 0) perimeter++; // left
-            });
-            areaDisplay.textContent = area;
-            perimeterDisplay.textContent = perimeter;
-        }
-        // Mode toggle
-        addModeBtn.addEventListener('click', () => {
-            mode = 'add';
-            addModeBtn.classList.add('mode-active');
-            eraseModeBtn.classList.remove('mode-active');
-        });
-        eraseModeBtn.addEventListener('click', () => {
-            mode = 'erase';
-            eraseModeBtn.classList.add('mode-active');
-            addModeBtn.classList.remove('mode-active');
-        });
-        // Reset button
-        resetBtn.addEventListener('click', () => {
-            filledCells.clear();
-            document.querySelectorAll('.cell').forEach(cell => {
-                cell.classList.remove('filled');
-            });
-            updateStats();
-        });
-        // Init
-        initGrid();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>📝 Area & Perimeter Adventure 📐</title>
+  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
+  <div class="game-container">
+    <h1>📝 Area & Perimeter Adventure 📐</h1>
+    <div class="controls">
+      <button id="add-mode" class="mode-active">✏️ Add Squares</button>
+      <button id="erase-mode">🧽 Erase Squares</button>
+      <button id="reset-grid">🔄 Reset</button>
+    </div>
+    <div class="grid-and-stats">
+      <div class="grid-wrapper">
+        <div class="grid" id="grid"></div>
+      </div>
+      <div class="stats">
+        <div class="stat-box">
+          <div>Area:</div>
+          <div class="stat-value"><span id="area">0</span> 🟩</div>
+        </div>
+        <div class="stat-box">
+          <div>Perimeter:</div>
+          <div class="stat-value"><span id="perimeter">0</span> 📏</div>
         </div>
+      </div>
     </div>
+  </div>
+  <script>
+    const gridSize = 15;
+    const grid = document.getElementById('grid');
+    const areaDisplay = document.getElementById('area');
+    const perimeterDisplay = document.getElementById('perimeter');
+    const addModeBtn = document.getElementById('add-mode');
+    const eraseModeBtn = document.getElementById('erase-mode');
+    const resetBtn = document.getElementById('reset-grid');
+    let mode = 'add';
+    let filledCells = new Set();
+    function initGrid() {
+      grid.innerHTML = '';
+      for (let i = 0; i < gridSize * gridSize; i++) {
+        const cell = document.createElement('div');
+        cell.className = 'cell';
+        cell.dataset.index = i;
+        cell.addEventListener('click', handleCellClick);
+        grid.appendChild(cell);
+      }
+    }
+    function handleCellClick(e) {
+      const index = e.target.dataset.index;
+      if (mode === 'add' && !filledCells.has(index)) {
+        e.target.classList.add('filled');
+        filledCells.add(index);
+      } else if (mode === 'erase' && filledCells.has(index)) {
+        e.target.classList.remove('filled');
+        filledCells.delete(index);
+      }
+      updateStats();
+    }
+    function updateStats() {
+      const area = filledCells.size;
+      let perimeter = 0;
+      filledCells.forEach(index => {
+        const i = parseInt(index);
+        if (!filledCells.has((i - gridSize).toString())) perimeter++; // top
+        if (!filledCells.has((i + 1).toString()) || i % gridSize === gridSize - 1) perimeter++; // right
+        if (!filledCells.has((i + gridSize).toString())) perimeter++; // bottom
+        if (!filledCells.has((i - 1).toString()) || i % gridSize === 0) perimeter++; // left
+      });
+      areaDisplay.textContent = area;
+      perimeterDisplay.textContent = perimeter;
+    }
+    addModeBtn.addEventListener('click', () => {
+      mode = 'add';
+      addModeBtn.classList.add('mode-active');
+      eraseModeBtn.classList.remove('mode-active');
+    });
+    eraseModeBtn.addEventListener('click', () => {
+      mode = 'erase';
+      eraseModeBtn.classList.add('mode-active');
+      addModeBtn.classList.remove('mode-active');
+    });
+    resetBtn.addEventListener('click', () => {
+      filledCells.clear();
+      document.querySelectorAll('.cell').forEach(cell => {
+        cell.classList.remove('filled');
+      });
+      updateStats();
+    });
+    initGrid();
+  </script>
 </body>
 </html>