JSFiddle - React, Tailwind, and code Playground

by Zack Fisch

HTML

<div id='board'></div>

<button id='redo'>Reset</button>

CSS

#board {
    height: 500px;
    width: 500px;
}

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

JavaScript

$(document).ready(function() {
    
    var $block_number = prompt('How many blocks?');
    
     function writeBoard() {
        while ($.isNumeric($block_number) === false) {
            $block_number = prompt('How many blocks?');
    }  
         for (var i = 0; i < $block_number; i++) {
            $('#board').append("<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();
    });

});