script.js

const mainBox = document.querySelector('.main-box');
const button = document.querySelector('button');

button.addEventListener('click', () => {
    const numberBoxes = Number(prompt('Type the number of boxes per side'));
    if (numberBoxes < 100) {
        mainBox.innerHTML = '';
        renderBoxes(numberBoxes, numberBoxes);
    } else {
        alert('Type a number less than 100')
    }
})


function renderBoxes(height=16, width=16) {

    mainBox.style.height = `480px`;
    console.log(mainBox.style.height)
    mainBox.style.width = `480px`;

    for (let i = 0; i < height; i++) {
        for (let j = 0; j < width; j++) {

            const box = createBox();
            box.style.height = `${480 / height}px`;
            box.style.width = `${480 / height}px`;
            mainBox.appendChild(box);
        }
    }
}

function createBox() {
    const box = document.createElement('div');
    box.setAttribute('class', 'box');

    box.addEventListener('mouseover', () => {
        box.style.backgroundColor = `rgb(${randomNumber()}, ${randomNumber()}, ${randomNumber()})`;
    })


    return box;
}

function randomNumber() {
    return Math.floor(Math.random() * 256);
}

renderBoxes()