JSFiddle - React, Tailwind, and code Playground

by Nikita Elsakov

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="input_height" name="height" min="1" max="50" value="1">
        Grid Width:
        <input type="number" id="input_width" name="width" min="1" max="50" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixel_canvas"></table>

    <script src="designs.js"></script>
</body>
</html>

CSS

body {
    text-align: center;
}

h1 {
    font-family: Monoton;
    font-size: 70px;
    margin: 0.2em;
}

h2 {
    margin: 1em 0 0.25em;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

JavaScript

// Select color input
var colorPicker = document.getElementById( 'colorPicker' );
let color = colorPicker.value;
colorPicker.onchange = function(e) {
    color = this.value;
}
// Select size input

// When size is submitted by the user, call makeGrid()
var pixel_canvas = document.getElementById( 'pixel_canvas' );
document.getElementById( 'sizePicker' ).onsubmit = function(e) {
    e.preventDefault();
    if ( pixel_canvas.childNodes.length !== 0 ) {
        clearGrid( pixel_canvas );
    }
    makeGrid(e);
}

// pixel_canvas.onclick = function(e) {
//     e.target.style.backgroundColor = color;
// }

pixel_canvas.onmousedown = function( e ) {
    pixel_canvas.addEventListener( "mousemove", handleMouseMove);
}

pixel_canvas.onmouseup = function( e ) {
    pixel_canvas.removeEventListener( "mousemove", handleMouseMove );
}

function handleMouseMove( e ) {
    let x = e.clientX;
    let y = e.clientY;
    let cell = document.elementFromPoint( x, y );
    cell.style.backgroundColor = color;
}

function makeGrid(e) {
    
    // Your code goes here!
   var grid = {
       width: parseInt(e.srcElement[1].value, 10),
       height: parseInt(e.srcElement[0].value, 10)
   };

   for (let i = 0; i < grid.height; i++) {
       let row = document.createElement( 'tr' );

       for (let j = 0; j < grid.width; j++) {
           let cell = document.createElement( 'td' );
           row.appendChild( cell );
       }

       pixel_canvas.appendChild( row );
   }
}

function clearGrid( grid ) {
    grid.innerHTML = '';
}