Project: Etch-a-Sketch

let screen = document.querySelector('.screen');

let answer = parseInt(prompt("Please enter the dimension number: "));
let resetButton = document.createElement('button');
let body = document.querySelector('.body');

resetButton.addEventListener('click', resetScreen)

resetButton.innerText = 'Reset';
body.appendChild(resetButton);

let allSquares;

function resetScreen(){
    allSquares.forEach(allSquares => allSquares.style.backgroundColor = 'white');
    answer = parseInt(prompt("Please enter the dimension number: "));
    createGrid(answer);
}

function createGrid (answer){
    gridElementWidth = 960/(answer);
    for(let i=1; i<=(answer*answer); i++){
        let gridDiv = document.createElement('div');
        gridDiv.classList.add('square');
        screen.appendChild(gridDiv);
    }
    screen.setAttribute('style',`display: grid; grid-template-rows: repeat(${answer}, ${gridElementWidth}px); grid-template-columns: repeat(${answer}, ${gridElementWidth}px)`);
    allSquares = document.querySelectorAll('.square');
}

function changeColor(e){
    const r = randomValue(0,255);
    const g = randomValue(0,255);
    const b = randomValue(0,255);
    const rgb = `rgb(${r},${g},${b})`;
    e.target.style.backgroundColor = rgb;
    console.log('OK');
}

function randomValue(min,max) {
    return Math.floor(Math.random()*(max-min+1))+min;
}

createGrid(answer);
allSquares.forEach(allSquares => {
    allSquares.addEventListener('mouseenter', changeColor);
});