JS - pixel-art-creator-01

        <div>
            <div class="navbar">
                <button class="btn">Reset</button>
                <input type="color" value="#00eeff" class="color">
                <input type="number" value="30" class="size">
            </div>
            <div class="container"></div>
        </div>
        <style>
            *{margin: 0; padding: 0; box-sizing: border-box;}
            html, body{height: 100%;}
            .navbar, .container{background-color: rgb(28, 28, 29); width: 40vw;
                border-radius: 3px;
            }
            .navbar{margin-left: 1vw; padding: 0.5vw; margin-bottom: 0.5vw; display: flex; 
                justify-content: center; align-items: center;}
            .btn, input{height: 2vw; padding: 0 1vw;}
            .color{padding: 0 .25vw; width: 6vw; margin: 0 1vw;}
            .container{margin-left: 1vw; --size: 4; height: 40vw; display: grid; 
                grid-template-columns: repeat(var(--size), 1fr);grid-template-rows: 
                repeat(var(--size), 1fr); gap: 0.15vw;padding: 0.1vw;}
            .pixel{background-color: grey;border-radius: 0.1vw;}
        </style>
        <script>
            const container = document.querySelector('.container')
            const sizeEl = document.querySelector('.size')
            let size = sizeEl.value
            const color = document.querySelector('.color')
            const resetBtn = document.querySelector('.btn')
    
            let draw = false
    
            function populate(size) {
            container.style.setProperty('--size', size)
            for (let i = 0; i < size * size; i++) {
                const div = document.createElement('div')
                div.classList.add('pixel')
    
                div.addEventListener('mouseover', function(){
                    if(!draw) return
                    div.style.backgroundColor = color.value
                })
                div.addEventListener('mousedown', function(){
                    div.style.backgroundColor = color.value
                })
    
                container.appendChild(div)
            }
            }
    
            window.addEventListener("mousedown", function(){
                draw = true
            })
            window.addEventListener("mouseup", function(){
                draw = false
            })
    
            function reset(){
                container.innerHTML = ''
                populate(size)
            }
    
            resetBtn.addEventListener('click', reset)
    
            sizeEl.addEventListener('keyup', function(){
                size = sizeEl.value
                reset()
            })
    
            populate(size)
        </script>
    

code:
        <div style="margin-left: 1vw";>
            <h3>choose grid size</h3>
            <form id="sizePicker">
                grid height:
                <input type="number" id="inputHeight" name="height" min="1" value="1">
                grid width:
                <input type="number" id="inputWidth" name="width" min="1" value="1">
                <input type="submit">
            </form>
    
            <h3>pick a color</h3>
            <input type="color" id="colorPicker">
            <h3>design canvas</h2>
            <table id="pixelCanvas"></table>
        </div>
        <style>
            h3 { margin: 1vw 0 0.25vw;}
            h3:first-of-type {margin-top: 0.5vw;}
            table, tr, td {border: 1px solid black;}
            table {border-collapse: collapse; margin: 0 auto;}
            tr {height: 2vw;}
            td {width: 2vw;}
            input[type=number]{width: 6vw;}
            input[type=color]{width: 6vw;}
        </style>
        <script>
            // Select color input, select size from height & width input, select the table element
    
            var inputColor = document.querySelector('#colorPicker');
            var inputWidth = document.querySelector('#inputWidth');
            var inputHeight = document.querySelector('#inputHeight');
            var pixelCanvas = document.querySelector("#pixelCanvas");
    
            // Add a listener for when users 'submit' each form
            // clearGrid function is included to reset table when 'submit' form is submitted
    
            document.addEventListener('submit', function (event) {
                event.preventDefault();
                var width = inputWidth.value; 
                var height = inputHeight.value; 
                clearGrid();
                makeGrid(height, width);
            });
    
            // Since cells are based off rows, remove the child until there are no rows left
            // Output remove all existing children creating blank 
    
            function clearGrid(){
                while (pixelCanvas.firstChild){
                    pixelCanvas.removeChild(pixelCanvas.firstChild);
                }
            }
    
            // When size is submitted by the user, call makeGrid(); this function will create the table 
            given desired dimentions
            // Function also allows user to color each cell given color input
    
            function makeGrid(height, width) {
                for (var a = 1; a <= height; a++) {
                    var tableRow = document.createElement('tr');
                    pixelCanvas.appendChild(tableRow);
                    for (var b = 1; b <= width; b++) {
                        var tableData = document.createElement('td');
                        tableRow.appendChild(tableData);
                        tableData.addEventListener('click', function (event) {
                            var color = inputColor.value;
                            event.target.style.backgroundColor = color;
                        });
                    }
                }
            }
        </script>