JSFiddle - React, Tailwind, and code Playground

by Derek Fermaint

HTML

<body>
    <button type="button" class="button">Mutli-Color Sketch Pad</button>
    <button type="button" class="button2">Monochrome Sketch Pad</button>
    <div id="gridWrap">
        <div id="basicGrid"></div>
    </div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}
button, button2, button3 {
    margin: 1em;
    padding: 0.5em;
    opacity: 0.8;
    border: 0.1em solid gray;
    background-color: white;
    border-radius: 0.5em;
    box-shadow: 0.4em 0.4em 0.5em rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-decoration: none;
}
#gridWrap {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    text-align: center;
    background-color: white;
    box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.1);
    border: 0.1em solid gray;
}
.style {
    margin-right: auto;
    margin-left: auto;
    width: 1em;
    height: 1em;
    display: inline-block;
}
.onHover {
    background-color: lightgray;
}
.offHover {
    background-color: white;
}

JavaScript

var color = 0,
    monochrome = 1;


$(document).ready(function () {
    createNew();
    button();
});

function promptCommand() {
    cells = prompt('Size grid (hint: 960 = 960 x 960 grid):', '960'),
    time = prompt('Time sketch fades (in seconds)', '20') * 1000;
};

function createSketchPad(cells, time) {
    cells = cells * 2;
    i = 0;
    $div = "<div class='style newDiv'></div>";
    while (i < cells) {
        $("#gridWrap").append($div);
        i++;
    }
    if (color === 1) {
        $('.newDiv').mouseenter(hoverChangeColor);
    } else if (monochrome === 1) {
        $('.newDiv').mouseenter(hoverChange);
    };
};

function createNew() {
    promptCommand();
    createSketchPad(cells, time);
}

function hoverChangeColor() {
    var rand = '#' + (0x000000 + (Math.random()) * 0xffffff);
    $(this).animate({
        backgroundColor: rand
    }, 'slow').mouseleave(function () {
        $(this).animate({
            backgroundColor: '#E6E6E6'
        }, time);
    });
};

function hoverChange() {
    $(this).animate({
        backgroundColor: 'black'
    }, 'slow').mouseleave(function () {
        $(this).animate({
            backgroundColor: 'white'
        }, time);
    });
};

function button() {
    $('.button').click(function () {
        $('.newDiv').remove();
        monochrome = 0;
        color = 1;
        createNew();
    });
    $('.button2').click(function () {
        $('.newDiv').remove();
        color = 0;
        monochrome = 1;
        createNew();
    });
};