script.js

let color = 'black';
let click = false;

// Create the board in a grid of variable size
function populateBoard(size) {
    let board = document.querySelector(".board");
    let squares = board.querySelectorAll('div');
    squares.forEach((div) => div.remove());
    board.style.gridTemplateColumns = `repeat(${size} , 1fr)`;
    board.style.gridTemplateRows = `repeat(${size} , 1fr)`;

let amount = size * size;
for (let i = 0; i < amount; i++) {
    let square = document.createElement('div')
    square.addEventListener('mouseover', colorSquare);
    square.style.backgroundColor = 'gray';
    board.insertAdjacentElement('beforeend', square);
    }
}

populateBoard(16);

function changeSize(input) {
    if (input >= 2 && input <= 100) {
        populateBoard(input);
    } else {
        console.log("too many squares");
    }
}

function colorSquare() {
    if (click) {
        if (color === 'random') {
            this.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
        } else {
            this.style.backgroundColor = color;
        }
    }
    }

function changeColor(choice) {
    color = choice;
}

function resetBoard() {
    let board = document.querySelector(".board");
    let squares = board.querySelectorAll('div');
    squares.forEach((div) => div.style.backgroundColor = 'gray');
    click = false;
}

document.querySelector('.board').addEventListener('click', (e) => {
    if (e.target.tagName != 'BUTTON'){
    click = !click;
    if (click) {
        document.querySelector('.mode').textContent = "Mode: Drawing";
    } else {
        document.querySelector('.mode').textContent = "Mode: Not Drawing";
    }
}     
});