JSFiddle - React, Tailwind, and code Playground

by Sandhose

HTML

<div id="display">
    <div id="dispA" class="top seg"></div>
    <div class="lateral">
        <div id="dispF" class="seg"></div>
        <div id="dispB" class="seg"></div>
    </div>
    <div id="dispG" class="mid seg"></div>
    <div class="lateral">
        <div id="dispE" class="seg"></div>
        <div id="dispC" class="seg"></div>
    </div>
    <div id="dispD" class="bot seg"></div>
    <div id="binData"><span id="bin0"></span><span id="bin1"></span><span id="bin2"></span><span id="bin3"></span><span id="bin4"></span><span id="bin5"></span><span id="bin6"></span><span id="bin7"></span></div>
</div>
<div id="dispDP"></div>

CSS

#display {
    width: 100px;
    height: 200px;
    background-color: #EEE;
    padding: 20px;
    border-radius: 10px;
    border: solid 1px #CCC;
    margin: 40px;
}

.seg {
    background-color: #CCC;
    border-radius: 4px;
    -webkit-transition: background-color .1s ease;
}

.seg.active {
    background-color: green;
}

.top, .mid, .bot {
    width: 80px;
    height: 10px;
    margin: 0 10px;
}

.lateral {
    height: 80px;
    width: 100px;
}

.lateral .seg {
    width: 10px;
    height: 80px;
    float: right;
}

.lateral .seg:first-child {
    float: left;
    margin-right: 80px;
}

#binData {
    color: #CCC;
    font-size: 20px;
    font-family: mono;
    text-align: center;
}

#binData span.active {
    color: #AAA;
}

JavaScript

var seg = ["DP", "A", "B", "C", "D", "E", "F", "G"];
var digit = [126, 48, 109, 121, 51, 91, 95, 112, 127, 123];
//var digit = [96, 48, 24, 12, 6, 66];
var state = 0;
var interval = 250;

function parseBin(data) {
    var bin = [];
    if(typeof data == "object") {
        for(var i in data) {
            bin.push(data[i] ? 1 : 0);
        }
    }
    else if(typeof data == "string" && parseInt(data) > 256) {
        for(var i = 0; i < data.length; i++) {
            bin.push(data.charAt(i) == "1" ? 1 : 0);
        }
    }
    else if(typeof parseInt(data) == "number") {
        for(var i = 0; i < 8; i++) {
            bin.push(parseInt(data) & (1 << i) ? 1 : 0);
        }
    }
    else {
        console.log("Invalid input");
    }
    
    return bin.reverse();
}

function disp(data) {
    var bin = parseBin(data);
    for(var i = 0; i < seg.length; i++) {
        if(bin[i]) {
            document.getElementById("disp" + seg[i]).classList.add("active");
            document.getElementById("bin" + i).className = "active";
            document.getElementById("bin" + i).innerHTML = "1";
        }
        else {
            document.getElementById("disp" + seg[i]).classList.remove("active");
            document.getElementById("bin" + i).className = "inactive";
            document.getElementById("bin" + i).innerHTML = "0";
        }
    }
}

function next() {
    disp(digit[state % digit.length]);
    state++;
}

setInterval(next, interval);