JSFiddle - React, Tailwind, and code Playground

by sosegon

HTML

<input id="colorPicker" type="text" value="#122112" />
<input id="sizePicker" type="number" value="12"/>
<input id="inputHeight" type="number" value="50"/>
<input id="inputWidth" type="number" value="50"/>
<canvas id="pixelCanvas" width=100 height=100 />

JavaScript

// Select color input

var colorPicker = document.getElementById('colorPicker');

// Select size input

var sizePicker = document.getElementById('sizePicker');

// When size is submitted by the user, call makeGrid()

function makeGrid() {

    var canvas = document.getElementById('pixelCanvas');

    var height = document.getElementById('inputHeight').value;

    var width = document.getElementById('inputWidth').value;

    for (var x = 0; x < height; x++) {

        var row = document.createElement('tr');

        canvas.appendChild(row);

        for (var y = 0; y < width; y++) {

            var column = document.createElement('td');

            canvas.appendChild(column);

            // Add color to selected cell

            column.addEventListener('click', function(event) {

                    var color = colorPicker.value;

                    event.target.style.backgroundColor = color;

                }

            );

        }

    }
}

makeGrid();

sizePicker.addEventListener('submit', function(event) {

    event.preventDefault();

    makeGrid();

});