JSFiddle - React, Tailwind, and code Playground

by Mark Coleman

HTML

<div><input type="text" value="20" id="side"/><input id="resize" type="button" value="Resize/Reset"/>
</div>
<div>
    <div class="toolbar">
        <fieldset class="palette">
            <legend>palette</legend>
            <div style="background-color:#FFFFFF"></div>
            <div style="background-color:#C0C0C0"></div>
            <div style="background-color:#808080"></div>
            <div style="background-color:#000000"></div>
            <div style="background-color:#FF0000"></div>
            <div style="background-color:#800000"></div>
            <div style="background-color:#FFFF00"></div>
            <div style="background-color:#808000"></div>
            <div style="background-color:#00FF00"></div>
            <div style="background-color:#008000"></div>
            <div style="background-color:#808080"></div>
            <div style="background-color:#00FFFF"></div>
            <div style="background-color:#008080"></div>
            <div style="background-color:#FF00FF"></div>
            <div style="background-color:#800080"></div>
        </fieldset>
        <fieldset class="currentColor">
            <legend>Current</legend>
            <div id="currentColor"></div>
        </fieldset>
    </div>
    <div class="canvas"></div>
</div>

CSS

.pixel
{
    display:inline-block;
    height:15px;
    width:15px;
    border:solid 1px black;
    padding:0;
    margin:0;
}
.pixel:hover{
    border-color:blue;
}
.canvas
{
    line-height:8px;
    float:left;
}
.toolbar{
    float:left;
    margin:10px;
}
.palette,.currentColor{
    width:60px;
}
.palette div, .currentColor div
{
    width:15px;
    height:15px;
    cursor:pointer;
    display:inline-block;
    margin:0;
}
#currentColor{
    border:solid 1px gray;
}

JavaScript

$("#resize").click(function() {
    var numPerSide = parseInt($("#side").val(), 10);
    if (numPerSide > 50) {
        alert('to many');
        return;
    }
    var c = $("div.canvas").empty();
    for (var i = 0; i < numPerSide * numPerSide; i++) {
        $("<div/>").addClass("pixel").appendTo(c);
    }
    var total = 0;
    c.find(".pixel").slice(0, numPerSide).each(function() {
        total = $(this).outerWidth() + total;
    });
    c.css("width", total);
}).click();

var currentColor = "white";
var hold = false;
$(".canvas").delegate(".pixel", "mouseover", function() {
    $(this).css("background-color", currentColor);
}).delegate(".pixel", "mouseout", function() {
    if (!$(this).data("painted")) {
        $(this).css("background-color", "");
    }
    if ($(this).data("painted")) {
        $(this).css("background-color", $(this).data("painted"));
    }
}).delegate(".pixel", "mousedown", function() {
    hold = true;
    $(this).css("background-color", currentColor).data("painted", currentColor);
}).delegate(".pixel", "mouseup", function() {
    hold = false;
}).delegate(".pixel", "mousemove", function(e) {
    if (hold) {
        var elem = document.elementFromPoint(e.pageX, e.pageY);
        if ($(elem).is(".pixel")) {
            $(elem).css("background-color", currentColor).data("painted", currentColor);
        }
    }
});

$(".palette").delegate("div", "click", function() {
    currentColor = $(this).css("background-color");
    $("#currentColor").css("background-color", currentColor);
});