JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <link rel="stylesheet" href="myCss.css">
    <title>Etch-A-Sketch</title>
</head>
<body>
    <div class="buttonContainer">
        <button class="restartButton">Reset Colors</button>
    </div>
    
    <div class="container">

    </div>

    <script src ='main.js'></script>    

</body>

CSS

body {
    background-color: bisque;
}

.container {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: #80cbc4;
}

.gridItem {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 2px solid black;
}

.buttonContainer {
    display:flex;
    justify-content: center;
    justify-items: center;
    padding: 10px;
}

.buttonContainer button {
    padding: 12px 28px;
    font-size: 15;
}

JavaScript

document.body.onload = loadPrompt;

function loadPrompt() {
    let prompt = window.prompt("Please enter a number betweeen 1 and 100:", "4");
    if (prompt == null || isNaN(prompt)) {
        loadPrompt();
    } else if (prompt > 100 || prompt < 1 ) {
        loadPrompt();
    } else if (!isNaN(prompt)) {
        gridCreator(prompt);
    }
}

function gridCreator(gridNum) {
    let gridSize = gridNum;
    let masterGrid = document.querySelector('.container');

    for (let i = 1; i<= gridSize; i++) {
        let gridItem = document.createElement("div");
        document.body.appendChild(gridItem);
        gridItem.classList.add(`gridItem`);
        gridItem.textContent = `${i}`;
        masterGrid.appendChild(gridItem);
    }
    hoverEffect();
}

function hoverEffect() {

    let randomColor = Math.floor(Math.random()*16777215).toString(16);
    let gridElement = document.querySelectorAll('.gridItem');

    gridElement.forEach(item => {
        item.addEventListener('mouseover', event => {
            item.style.backgroundColor = '#' + randomColor;
            console.log(item);

        })
        item.addEventListener('mouseout', event => {
            randomColor = Math.floor(Math.random()*16777215).toString(16);
        })
    })
}

function resetButton() {
    let buttonPressed = document.querySelector('.restartButton');
    buttonPressed.addEventListener('click', () => {
        location.reload();
    })
}

resetButton();