script.js

// This is like saying "We want 20 rows" - imagine 20 horizontal lines
const ROWS = 20;

// This is like saying "We want 20 columns" - imagine 20 vertical lines  
const COLS = 20;

// This waits for the webpage to finish loading before doing anything
// Think of it like waiting for a book to open before you start reading
document.addEventListener('DOMContentLoaded', () => {
    
    // Once the page is ready, call the function that builds our grid
    createGrid();
    
    // Also set up our buttons so they work when clicked
    setupButtons();
});

// This is a function - think of it like a recipe for making a grid
function createGrid() {
    
    // Find the empty div in our HTML that has id="grid"
    // It's like finding an empty box to put things in
    const grid = document.getElementById('grid');
    
    // Clear out anything that might already be in the box
    // Like emptying a toy box before putting new toys in
    grid.innerHTML = '';
    
    // Start a loop that will run 20 times (once for each row)
    // Think of it like drawing 20 horizontal lines on paper
    for (let row = 0; row < ROWS; row++) {
        
        // Create a new div element - this will be one row
        // Like drawing one horizontal line
        const rowDiv = document.createElement('div');
        
        // Give this row a special name (class) so CSS can style it
        // Like putting a label on each line saying "this is a row"
        rowDiv.classList.add('grid-row');

        // Now start another loop that runs 20 times (once for each column in this row)
        // Think of it like drawing 20 dots on each horizontal line
        for (let col = 0; col < COLS; col++) {
            
            // Create a new div element - this will be one cell (one square)
            // Like drawing one dot
            const cell = document.createElement('div');
            
            // Give this cell a special name so CSS can style it
            // Like labeling each dot as "this is a cell"
            cell.classList.add('grid-cell');
            
            // Give this cell a white background to start with
            // Like coloring each dot white
            cell.classList.add('background-white');
            
            // Give this cell coordinates so we know where it is
            // Like writing (row 0, column 0) on the first dot
            cell.dataset.row = row;
            cell.dataset.col = col;
            
            // Make this cell clickable - when someone clicks it, run toggleWall function
            // Like making each dot respond when you poke it
            cell.addEventListener('click', function() {
                toggleWall(this);
            });
            
            // Put this cell inside the row
            // Like placing the dot on the horizontal line
            rowDiv.appendChild(cell);
        }
        
        // Put this completed row inside the main grid
        // Like putting the whole horizontal line (with all its dots) into our box
        grid.appendChild(rowDiv);
    }
}

// This function gets called when someone clicks on a cell
// It changes the color from white to black or black to white
function toggleWall(cell) {
    
    // Check if the cell is currently white
    if (cell.classList.contains('background-white')) {
        
        // Remove the white color
        cell.classList.remove('background-white');
        
        // Add black color instead (making it a wall)
        cell.classList.add('background-black');
        
    // If it's not white, it must be black
    } else if (cell.classList.contains('background-black')) {
        
        // Remove the black color
        cell.classList.remove('background-black');
        
        // Add white color instead (making it empty again)
        cell.classList.add('background-white');
    }
}

// This function makes our buttons work
function setupButtons() {
    
    // Find the reset button and make it do something when clicked
    document.getElementById('reset').addEventListener('click', function() {
        
        // When reset is clicked, rebuild the entire grid from scratch
        // Like erasing your drawing and starting over
        createGrid();
    });
    
    // You can add more button functions here later!
}