JSFiddle - React, Tailwind, and code Playground

by Zack Fisch

HTML

<div id='board'>
    <button id='redo'>Reset me</button>
</div>

CSS

#board {
    height: 550px;
    width: 600px;
}
.block {
    display: inline-block;
    height: 20px;
    width:20px;
    margin-right: 5px;
    border: 2px solid black;
}

#redo {
    display: block;
}

JavaScript

$(document).ready(function () {

    var $block_number = prompt('How many blocks?');

    function writeBoard() {
        while ($.isNumeric($block_number) === false && $block_number < 150) {
            $block_number = prompt('How many blocks?');
        }
        for (var i = 0; i < $block_number; i++) {
            $('#board').prepend("<div class='block'></div>");
        }
    };

    writeBoard();

    $(".block").on("mouseover", function () {
        $(this).css("background-color", "black");
    });

    $('#redo').on('click', function () {
        $('.block').css('background-color', 'white');
        $block_number = prompt('How many blocks?');
        writeBoard();
    });

});