Hugging Face's logo

Spaces:
ParulPandey
/
Area_and_Perimeter
Running

App Files Community
Pp commited on
Commit
4728941
·
verified ·
1 Parent(s): eae8dca

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +35 -27
index.html CHANGED
@@ -3,22 +3,23 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Area & Perimeter Adventure</title>
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
  <div class="game-container">
11
- <h1>🏰 Area & Perimeter Adventure 🏰</h1>
12
-
13
  <div class="controls">
14
  <button id="add-mode" class="mode-active">✏️ Add Squares</button>
15
  <button id="erase-mode">🧽 Erase Squares</button>
 
16
  </div>
17
-
18
  <div class="grid-wrapper">
19
  <div class="grid" id="grid"></div>
20
  </div>
21
-
22
  <div class="stats">
23
  <div class="stat-box">
24
  <div>Area:</div>
@@ -38,11 +39,12 @@
38
  const perimeterDisplay = document.getElementById('perimeter');
39
  const addModeBtn = document.getElementById('add-mode');
40
  const eraseModeBtn = document.getElementById('erase-mode');
41
-
 
42
  let mode = 'add';
43
  let filledCells = new Set();
44
-
45
- // Initialize grid
46
  function initGrid() {
47
  grid.innerHTML = '';
48
  for (let i = 0; i < gridSize * gridSize; i++) {
@@ -53,11 +55,10 @@
53
  grid.appendChild(cell);
54
  }
55
  }
56
-
57
- // Handle cell clicks
58
  function handleCellClick(e) {
59
  const index = e.target.dataset.index;
60
-
61
  if (mode === 'add' && !filledCells.has(index)) {
62
  e.target.classList.add('filled');
63
  filledCells.add(index);
@@ -65,43 +66,50 @@
65
  e.target.classList.remove('filled');
66
  filledCells.delete(index);
67
  }
68
-
69
  updateStats();
70
  }
71
-
72
- // Calculate stats
73
  function updateStats() {
74
  const area = filledCells.size;
75
  let perimeter = 0;
76
-
77
  filledCells.forEach(index => {
78
  const i = parseInt(index);
79
- // Check adjacent cells (top, right, bottom, left)
80
- if (!filledCells.has(i - gridSize)) perimeter++; // top
81
- if (!filledCells.has(i + 1) || i % gridSize === gridSize - 1) perimeter++; // right
82
- if (!filledCells.has(i + gridSize)) perimeter++; // bottom
83
- if (!filledCells.has(i - 1) || i % gridSize === 0) perimeter++; // left
84
  });
85
-
86
  areaDisplay.textContent = area;
87
  perimeterDisplay.textContent = perimeter;
88
  }
89
-
90
- // Mode switching
91
  addModeBtn.addEventListener('click', () => {
92
  mode = 'add';
93
  addModeBtn.classList.add('mode-active');
94
  eraseModeBtn.classList.remove('mode-active');
95
  });
96
-
97
  eraseModeBtn.addEventListener('click', () => {
98
  mode = 'erase';
99
  eraseModeBtn.classList.add('mode-active');
100
  addModeBtn.classList.remove('mode-active');
101
  });
102
-
103
- // Initialize
 
 
 
 
 
 
 
 
 
104
  initGrid();
105
  </script>
106
  </body>
107
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>📝 Area & Perimeter Adventure 📐</title>
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
  <div class="game-container">
11
+ <h1>📝 Area & Perimeter Adventure 📐</h1>
12
+
13
  <div class="controls">
14
  <button id="add-mode" class="mode-active">✏️ Add Squares</button>
15
  <button id="erase-mode">🧽 Erase Squares</button>
16
+ <button id="reset-grid">🔄 Reset</button>
17
  </div>
18
+
19
  <div class="grid-wrapper">
20
  <div class="grid" id="grid"></div>
21
  </div>
22
+
23
  <div class="stats">
24
  <div class="stat-box">
25
  <div>Area:</div>
 
39
  const perimeterDisplay = document.getElementById('perimeter');
40
  const addModeBtn = document.getElementById('add-mode');
41
  const eraseModeBtn = document.getElementById('erase-mode');
42
+ const resetBtn = document.getElementById('reset-grid');
43
+
44
  let mode = 'add';
45
  let filledCells = new Set();
46
+
47
+ // Build the grid
48
  function initGrid() {
49
  grid.innerHTML = '';
50
  for (let i = 0; i < gridSize * gridSize; i++) {
 
55
  grid.appendChild(cell);
56
  }
57
  }
58
+
59
+ // Handle clicks
60
  function handleCellClick(e) {
61
  const index = e.target.dataset.index;
 
62
  if (mode === 'add' && !filledCells.has(index)) {
63
  e.target.classList.add('filled');
64
  filledCells.add(index);
 
66
  e.target.classList.remove('filled');
67
  filledCells.delete(index);
68
  }
 
69
  updateStats();
70
  }
71
+
72
+ // Update area and perimeter
73
  function updateStats() {
74
  const area = filledCells.size;
75
  let perimeter = 0;
76
+
77
  filledCells.forEach(index => {
78
  const i = parseInt(index);
79
+ if (!filledCells.has((i - gridSize).toString())) perimeter++; // top
80
+ if (!filledCells.has((i + 1).toString()) || i % gridSize === gridSize - 1) perimeter++; // right
81
+ if (!filledCells.has((i + gridSize).toString())) perimeter++; // bottom
82
+ if (!filledCells.has((i - 1).toString()) || i % gridSize === 0) perimeter++; // left
 
83
  });
84
+
85
  areaDisplay.textContent = area;
86
  perimeterDisplay.textContent = perimeter;
87
  }
88
+
89
+ // Mode toggle
90
  addModeBtn.addEventListener('click', () => {
91
  mode = 'add';
92
  addModeBtn.classList.add('mode-active');
93
  eraseModeBtn.classList.remove('mode-active');
94
  });
95
+
96
  eraseModeBtn.addEventListener('click', () => {
97
  mode = 'erase';
98
  eraseModeBtn.classList.add('mode-active');
99
  addModeBtn.classList.remove('mode-active');
100
  });
101
+
102
+ // Reset button
103
+ resetBtn.addEventListener('click', () => {
104
+ filledCells.clear();
105
+ document.querySelectorAll('.cell').forEach(cell => {
106
+ cell.classList.remove('filled');
107
+ });
108
+ updateStats();
109
+ });
110
+
111
+ // Init
112
  initGrid();
113
  </script>
114
  </body>
115
+ </html>