Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>📝 Learning about Area & Perimeter 📐</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="main-layout"> | |
| <div class="definitions"> | |
| <h2>What’s Area?</h2> | |
| <p>Area is the number of squares inside a shape. Count all the filled tiles!</p> | |
| <h2>What’s Perimeter?</h2> | |
| <p>Perimeter is the number of edges touching the outside. Like tracing the shape’s border!</p> | |
| </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> | |
| </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++; | |
| if (!filledCells.has((i + 1).toString()) || i % gridSize === gridSize - 1) perimeter++; | |
| if (!filledCells.has((i + gridSize).toString())) perimeter++; | |
| if (!filledCells.has((i - 1).toString()) || i % gridSize === 0) perimeter++; | |
| }); | |
| 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> | |