Hugging Face's logo

Spaces:
ParulPandey
/
Area_and_Perimeter
Running

App Files Community
Pp commited on
Commit
0b63f64
·
verified ·
1 Parent(s): 022573b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +107 -19
index.html CHANGED
@@ -1,19 +1,107 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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="styles.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>
25
+ <div class="stat-value"><span id="area">0</span> 🟩</div>
26
+ </div>
27
+ <div class="stat-box">
28
+ <div>Perimeter:</div>
29
+ <div class="stat-value"><span id="perimeter">0</span> 📏</div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+ <script>
35
+ const gridSize = 15;
36
+ const grid = document.getElementById('grid');
37
+ const areaDisplay = document.getElementById('area');
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++) {
49
+ const cell = document.createElement('div');
50
+ cell.className = 'cell';
51
+ cell.dataset.index = i;
52
+ cell.addEventListener('click', handleCellClick);
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);
64
+ } else if (mode === 'erase' && filledCells.has(index)) {
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>