JSFiddle - React, Tailwind, and code Playground

by Spero Koulouras

HTML

<script>
    var devDB; // The Device Database
    var roomDB = new Array();

    function loadDB() {

        var txt = '{"node":[' +
            '{"bdaddr":"11:22:33:44:55:66", "name":"Sconce","roomName":"Library","lightswitch":"on","dimmer":"45","privacy":"False","power": "12.45", "rssi": "-65" },' +
            '{"bdaddr":"12:22:33:44:55:66", "name":"Lamp1","roomName":"Bedroom","lightswitch":"off","dimmer":"55","privacy":"False", "power": "3.60", "rssi": "-127" },' +
            '{"bdaddr":"13:22:33:44:55:66", "name":"Chandelier","roomName":"Dining Room","lightswitch":"on","dimmer":"65","privacy":"False", "power": "8.47", "rssi": "-55" },' +
            '{"bdaddr":"14:22:33:44:55:66", "name":"Ceiling","roomName":"Kitchen","lightswitch":"off","dimmer":"75","privacy":"False", "power": "9.62", "rssi": "-45" },' +
            '{"bdaddr":"15:22:33:44:55:66", "name":"Sconce","roomName":"Library","lightswitch":"on","dimmer":"45","privacy":"False","power": "12.45", "rssi": "-65" },' +
            '{"bdaddr":"16:22:33:44:55:66", "name":"Lamp2","roomName":"Library","lightswitch":"off","dimmer":"55","privacy":"False", "power": "3.60", "rssi": "-127" },' +
            '{"bdaddr":"17:22:33:44:55:66", "name":"Sconce","roomName":"Dining Room","lightswitch":"on","dimmer":"65","privacy":"False", "power": "8.47", "rssi": "-55" },' +
            '{"bdaddr":"18:22:33:44:55:66", "name":"UnderCabinet","roomName":"","lightswitch":"off","dimmer":"75","privacy":"False", "power": "9.62", "rssi": "-45" } ]}';

        devDB = JSON.parse(txt);
        console.log("Loaded Database");
    }

    // Reorganize the devDB by Rooms

    function updateRoomDB(i) {
        var t = devDB.node[i].roomName;
        if (t == "") {
            t = "Unassigned";
            devDB.node[i].roomName = t;
        }
        
        if (roomDB.indexOf(t) == -1) {
            roomDB.push(t);
        }
    }


    function createRoomContainer(i) {
        var newDiv = document.createElement("div");
       ...

CSS

#homescreen {
    background-color: rgb(42, 42, 42);
    color: white;
}
.logoblock {
    width: 90%;
    min-width:350px;;
    height: 3em;
    font-size: large;
    padding: .1em;
    color: white;
    background-color: rgb(42, 42, 42);
    border: none;
    letter-spacing: .5em;
    text-align: right;
}

.testdata {
    display: none;
}

.room {
    position: relative;
    width: 24em;
    color: darkgray;
    float: left;
    margin-left: 1em;
    margin-bottom: 1em;
    font: .8em Tahoma;
}

.logotext {
    transition: color .5s ease;
    font-family: Verdana;
    color: #E0E0E0;
}
.logoblock:hover .logotext {
    color: #808080;
}
.logoblock .outsidebrackets {
    transition: color .5s ease;
    color: #CCCCCC;
}
.logoblock .insidebrackets {
    transition: color .5s ease;
    color: #3FA9F5;
}
.logoblock:hover .outsidebrackets {
    color: #3FA9F5;
}
.logoblock:hover .insidebrackets {
    color: #CCCCCC;
}
.bulbcontainer {
    display: block;
    background-color: black;
    float: left;
    position: relative;
    width: 23em;
    margin-top: .3em;
    margin-bottom: .5em;
    border-radius: .3em;
}

.power {
    font: .9em Tahoma;
    display: inline-block;
    position: absolute;
    top: .25em;
    right: .25em;
    color: rgb(112, 111, 111);
}

.turnOff {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 17%;
    height: 2em;
    z-index: 9;
    opacity: .08;
}
.bulblabel {
    color: White;
    font:  1.1em Tahoma;
    border: none;
    background-color: Black
}
.bulblabel:focus {
    outline: none;
    color: #71bfeb;
}
.bulb {
    -webkit-appearance: none;
    width: 20em;
    display: block;
    margin: .5em auto;
    height: .8em;
    border-radius: .2em;
}
.bulb:focus {
    outline: none;
}
.bulb.on {
}
.bulb.off {
    background: gray;
    background-image: none;
}
.bulb.out-of-range {
    opacity: 0.2;
    background-image: none;
}
.bulb:hover {
    -webkit-appearance: none;
}
.bulb::-webkit-slider-thumb {
   ...