javascript.js

const header = document.querySelector(".header");
const gridButton = document.createElement('button');
const colorMode = document.createElement('button');
gridButton.classList.add('gridsize');
colorMode.classList.add('colorMode');
gridButton.textContent = "Grid Size";
colorMode.textContent = "Colorful Mode"
header.appendChild(gridButton);
header.appendChild(colorMode);
let modeFlag = false;

colorMode.addEventListener('click', () => {
    modeFlag = !modeFlag;
});

gridButton.addEventListener('click', () => {
    const userInput = prompt("Enter value (0-100) for grid size:");
    let gridValue = parseInt(userInput, 10);

    createGrid(gridValue);

    const squares = document.querySelectorAll('.col');
    squares.forEach(square => {
        
        let alpha = 0.0;
        square.addEventListener('mouseenter', () => {
            if (alpha < 1.0) {
                alpha += .1;
            }

            let setColor = `rgba(0,0,0, ${alpha})`;
            if (modeFlag == true) {
                let randomColor = Math.floor(Math.random() * 3);
                if (randomColor === 0) {
                    setColor = `rgba(255,0,0, ${alpha})`;
                } else if (randomColor == 2) {
                    setColor = `rgba(0,255,0, ${alpha})`;
                } else {
                    setColor = `rgba(0,0,255, ${alpha})`;
                }
            }
            square.style.backgroundColor = setColor;
        });
    });
});

const container = document.querySelector('.container');
function createGrid(reqGrid) {
    container.innerHTML = "";

    for (let i = 0; i < reqGrid; i++) {
        let row = document.createElement('div');
        row.classList.add('row');
        for (let j = 0; j < reqGrid; j++) {
            let col = document.createElement('div');
            col.classList.add('col');
            row.appendChild(col);
        }
        container.appendChild(row);
    }
}