JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<!DOCTYPE html>
<body>
    <section>
        <div class="controls">
            <label for="new-width">Enter a width greater than 1:</label>
            <input id="new-width" name="new-width" type="text" value="32" placeholder="Canvas width">
            <button id="set-width">Create New Board!</button>
            <button id="reset">Reset</button>
        </div>
        <div id='eas'>
            <p><span>MAGIC </span>Etch A Sketch<span class="reg">&reg;</span><span> SCREEN</span>

            </p>
            <div id='eas-screen'></div>
            <div class='knob left'></div>
            <div class='knob right'></div>
        </div>
    </section>
    <script src="main.js"></script>
</body>

</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Qwigley|Open+Sans:400italic,400);

 *, *:before, *:after {
    box-sizing: inherit;
}
* {
    margin: 0;
    padding: 0;
}
body, div {
    padding: 0;
    margin: 0;
}
header, .controls {
    text-align: center;
}
.controls {
    margin-bottom: 20px;
}
#new-width {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    width: 30px;
}
section {
    width: 100%;
}
#eas {
    background: red;
    padding-bottom: 40px;
    width: 680px;
    margin: 20px auto 20px;
    position: relative;
}
#eas p {
    text-align: center;
    color: gold;
    font-family:'Qwigley', cursive;
    font-size: 44px;
    padding: 5px 0;
    margin: 0;
}
#eas p span {
    font-size: 20px;
    font-family:'Open Sans', sans-serf;
    font-syle: italic;
    margin: 0 15px 20px;
}
#eas p span.reg {
    position: relative;
    margin-left: 5px;
    margin-right: 0;
    font-size: 14px;
}
#eas-screen {
    text-align: center;
    margin: 0 auto 20px;
    position: relative;
    width: 480px;
    background: #ededed;
    border-radius: 20px;
    padding: 10px;
    box-shadow: inset 0 0 5px black;
}
.row {
    display: flex;
}
.box {
    height: 15px;
    width: 15px;
    display: inline-block;
    background: #000;
    opacity: 0;
}
.knob {
    background: white;
    border-radius: 50%;
    border: 8px solid #f1f1f1;
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    bottom: 10px;
}
.right {
    right: 10px;
}
.left {
    left: 10px;
}

JavaScript

var etch = $('#eas-screen'),
    $box = $('.box');

// Grid function
function grid() {

    // Reset to empty grid
    etch.html("");

    // Create grid
    var width = $('#new-width').val(),
        boxSize = 480 / width;

    for (var i = 0; i < width; i += 1) {
        var row = $('<div class="row" id="' + i + '"></div>').css('height', boxSize + "px");
        for (var ib = 0; ib < width; ib += 1) {
            $('<span class="box"></span>').css({
                'width': boxSize + "px",
                    'height': boxSize + "px"
            }).appendTo(row);
        }
        etch.append(row);
    }

    // Color box when mouse hovers
    $('.box').mouseenter(function () {
        var curOp = parseFloat($(this).css('opacity'), 10);
        $(this).css('opacity', curOp + 0.1);
    });
}

// Set new width on click
$('#set-width').on('click', grid);

// Set new width with enter
$('#new-width').on('keydown', function (e) {
    if (e.which == 13) grid();
});

// Reset grid
$('#reset').on('click', function () {
    $('.box').css('opacity', '0');
});

$(grid);