JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<div class="app">
        <div class="display a">
            
            <div class="segment segment-h top-0 left-0 a"></div>
            <div class="segment segment-v top-0 right-0 b"></div>
            <div class="segment segment-v top-50 right-0 c"></div>
            <div class="segment segment-h bottom-0 left-0 d"></div>
            <div class="segment segment-v bottom-0 left-0 e"></div>
            <div class="segment segment-v top-0 left-0 f"></div>
            <div class="segment segment-h top-50-m-h left-0 g"></div>

        </div>
        <div class="display b">
            <div class="segment segment-h top-0 left-0 a"></div>
            <div class="segment segment-v top-0 right-0 b"></div>
            <div class="segment segment-v top-50 right-0 c"></div>
            <div class="segment segment-h bottom-0 left-0 d"></div>
            <div class="segment segment-v bottom-0 left-0 e"></div>
            <div class="segment segment-v top-0 left-0 f"></div>
            <div class="segment segment-h top-50-m-h left-0  g"></div>
        </div>
        <div class="seperator">:</div>
        <div class="display c">
            <div class="segment segment-h top-0 left-0 a"></div>
            <div class="segment segment-v top-0 right-0 b"></div>
            <div class="segment segment-v top-50 right-0 c"></div>
            <div class="segment segment-h bottom-0 left-0 d"></div>
            <div class="segment segment-v bottom-0 left-0 e"></div>
            <div class="segment segment-v top-0 left-0 f"></div>
            <div class="segment segment-h top-50-m-h left-0  g"></div>
        </div>
        <div class="display d">
            <div class="segment segment-h top-0 left-0 a"></div>
            <div class="segment segment-v top-0 right-0 b"></div>
            <div class="segment segment-v top-50 right-0 c"></div>
            <div class="segment segment-h bottom-0 left-0 d"></div>
            <div class="segment segment-v bottom-0 left-0 e"></div>
          ...

CSS

body {
    margin: 0;
    padding: 0;
    background-color: black;
}

.app{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.display{
    position: relative;
    width:75px;
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    display: insegment-block;
}
.seperator{
    margin-left:10px;
    margin-right: 10px;
    color: greenyellow;
    font-size: 60px;
}

.top-0{
    top:0;
}
.bottom-0{
    bottom:0;
}
.left-0{
    left:0;
}
.right-0{
    right:0;
}
.top-50{
    top:50%;
}
.top-50-m-h{
    top: calc(50% - 6px);
}


.segment{
    position:absolute;

}
.segment.active{
    
    background-color: greenyellow;
    border:2px solid greenyellow;
    z-index: 100;
}
.segment-h{
    width: 71px;
    height: 6px;
}
.segment-v{
    height: 71px;
    width: 6px;
}

JavaScript

const pabcdefgObj = {
    '0' : '1111110',
    '1' : '0110000',
    '2' : '1101101',
    '3' : '1111001',
    '4' : '0110011',
    '5' : '1011011',
    '6' : '1011111',
    '7' : '1110000',
    '8' : '1111111',
    '9' : '1111011',
}

const segmentsArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const displaysAvailable = ['a', 'b', 'c', 'd', 'e', 'f'];
const displaysArr = {};
displaysAvailable.forEach(function(segment){
    displaysArr[segment] = {};
    displaysArr[segment]['element'] =  document.querySelector(".display."+segment);
    displaysArr[segment]['value'] = '';
});

let now, hours, hoursFormatted, hoursPadded, minutes, minutesPadded, secondsPadded;

now = new Date();
updateSeconds(now);
updateMinutes(now);
updateHours(now);


setInterval(function(){
    now = new Date();
    updateSeconds(now);
}, 1000)

function updateSeconds(now){
    seconds = now.getSeconds();
    if(!seconds){
        updateMinutes(now);
    }
    secondsPadded = seconds.toString().padStart(2, 0);
    displaysArr['e']['value'] = pabcdefgObj[secondsPadded[0]].split('');
    displaysArr['f']['value'] = pabcdefgObj[secondsPadded[1]].split('');
    updatedisplays(['e', 'f']);
}
function updateMinutes(now){
    minutes = now.getMinutes();
    if(!minutes){
        updateHours(now);
    }
    minutesPadded = minutes.toString().padStart(2, 0);
    displaysArr['c']['value'] = pabcdefgObj[minutesPadded[0]].split('');
    displaysArr['d']['value'] = pabcdefgObj[minutesPadded[1]].split('');
    updatedisplays(['c', 'd']);
}

function updateHours(now){
    hours = now.getHours();
    hoursFormatted = hours < 12?hours: (hours  - 12);
    hoursPadded = hoursFormatted.toString().padStart(2, 0);
    displaysArr['a']['value'] = pabcdefgObj[hoursPadded[0]].split('');
    displaysArr['b']['value'] = pabcdefgObj[hoursPadded[1]].split('');
    updatedisplays(['a', 'b']);

}

function updatedisplays(displays){
    displays.forEach(function(display){
        segmentsArr.forEach(function(segment, index){
    ...