JSFiddle - React, Tailwind, and code Playground

by Jakub Lemiszewski

HTML

<h1>JSON-WORLD</h1>
<h2></h2>
<button id="btnCreate">CREATE</button>
<button id="btnSave">SAVE</button>
<button id="btnClear">CLEAR</button>

CSS

.person{
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            border-radius: 50%;
        }

JavaScript

// Here all the people will be placed
    aPeople = [];

    $("#btnCreate").click(function () {
        $("h2").text('THE WORLD IS POPULATED');
        createPerson();
    });

    $("#btnSave").click(function () {
        saveWorld();
    });

    $("#btnClear").click(function () {
        $(".person").remove();
        $("h2").text('THE WORLD IS EMPTY');
        clearWorld();
    });



    function regenerateWorld() {

        // Check if you have something to regenerate
        if (localStorage.sWorld == undefined) {
            $("h2").text('THE WORLD IS EMPTY');
        } else {
            // Get the world from the local storage
            sWorld = localStorage.sWorld;
            // convert the world into a json object
            aWorld = JSON.parse(sWorld);
            console.log(aWorld);
            // loop through the object and rebuild the divs (people)
            for (i = 0; i < aWorld.length; i++) {
                sColor = aWorld[i].sColor;
                sPositionTop = aWorld[i].positionTop;
                sPositionLeft = aWorld[i].positionLeft;
                sTheDivPerson = '<div class="person" style="background-color:' + sColor + '; left:' + sPositionLeft + 'px; top:' + sPositionTop + 'px"></div>';
                $("body").append(sTheDivPerson);
            }
        }
        console.log("regenerating the world ...");
    }
    ;


    function saveWorld() {
        // Take the array of people        
        // make it into an string
        sPeople = JSON.stringify(aPeople);
        // save it in the localstorage
        localStorage.sWorld = sPeople;
        console.log("Saving the world state ...");
    }
    ;


    function createPerson() {
        console.log("Creating a person ...");
        aBackgroundColors = ["blue", "red", "black"];
        iRandomNumber = getRandomNumber(0, 2);
        sRandomColor = aBackgroundColors[iRandomNumber];
        iPositionTop = getRandomNumber(0, 1000);
        iPositionLeft =...