CodePen Embed - Binary clock with light bulbs

<div class="title">Binary clock with light bulbs</div>
<div id="container">
    <div id="hours">
        <div class="top-bar"></div>
        <div class="lights">
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">16</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">8</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">4</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">2</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">1</div>
                </div>
            </div>
        </div>
        <div class="group-text">Hours</div>
    </div>
    <div id="minutes">
        <div class="top-bar"></div>
        <div class="lights">
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">32</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">16</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">8</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">4</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">2</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">1</div>
                </div>
            </div>
        </div>
        <div class="group-text">Minutes</div>
    </div>
    <div id="seconds">
        <div class="top-bar"></div>
        <div class="lights">
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">32</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">16</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">8</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">4</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">2</div>
                </div>
            </div>
            <div class="lamp">
                <div class="cable"></div>
                <div class="socket"></div>
                <div class="lamp-bottom">
                    <div class="bulb"></div>
                    <div class="lamp-text">1</div>
                </div>
            </div>
        </div>
        <div class="group-text">Seconds</div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

body {
    background: linear-gradient(#555, #888);
    background-repeat: no-repeat;
    box-sizing: border-box;
    min-width: 100vw;
    min-height: 100vh;
    margin: 0 0 5rem 0;
    padding: 0;
    font-family: 'Indie Flower', cursive;
    font-size: 16px;
    overscroll-behavior: none;
}

#container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#hours, #minutes, #seconds {
    margin: 0 15px 30px 15px;
}

.bulb {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: relative;
    background: rgba(255, 255, 255, 1);
    box-shadow: 17px -8px 22px 0 rgba(0, 0, 0, 0.1) inset, 
                -2px -5px 21px 0 rgba(0, 0, 0, 0.3) inset,
                0 0 21px 0 rgba(255, 255, 0, 0);
}

.bulb:before {
    content: "";
    position: absolute;
    width: 65px;
    height: 12px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
    top: 90px;
    left: -7px;
    border-radius: 100%;
}

.bulb-on {
    background: rgba(255, 255, 167, 0.5);
    box-shadow: 17px -8px 22px 0 rgba(0, 0, 0, 0.1) inset, 
                -2px -5px 21px 0 rgba(255, 255, 0, 0.3) inset;
}

.bulb-on:before {
    background: rgba(255, 255, 0, 0.1);
    box-shadow: 0 0 16px rgba(255, 255, 0, 0.3);
}

.socket {
    background: linear-gradient(to left, #666, #999, #666);
    border-radius: 40% 40% 0% 0%;
    width: 30px;
    height: 40px;
    left: 20px;
    position: relative;
}

.cable {
    background: linear-gradient(to left, #333, #666, #333);
    width: 6px;
    height: 100px;
    left: 32px;
    position: relative;
}

.lamp {
}

.lamp-on {
    background: rgba(255, 255, 167, 1);
    box-shadow: 17px -8px 22px 0 rgba(0, 0, 0, 0.1) inset, 
                -2px -5px 21px 0 rgba(0, 0, 0, 0.3) inset,
                0 0 21px 0 rgba(255, 255, 0, 1);
}

.lamp-bottom {
    border-radius: 50px 50px 30px 30px / 150px 150px 15px 15px;
    padding: 0 10px 20px 10px;
    position: relative;
    top: -5px;
}

.lights {
    display: flex;
}

.top-bar {
    background: linear-gradient(to bottom, #333, #666, #333);
    width: 100%;
    height: 15px;
    border-radius: 7px;
}

.title {
    text-align: center;
    text-shadow: 0 0 0.25rem #fff;
    font-size: 3rem;
    margin-bottom: 20px;
}

.group-text {
    text-align: center;
    text-shadow: 0 0 0.2rem #fff, 0 0.3rem 0.1rem #333;
    font-size: 1.75rem;
}

.lamp-text {
    text-align: center;
    text-shadow: 0 0 0.2rem #fff, 0 0.3rem 0.1rem #333;
    font-size: 1.5rem;
    position: relative;
    top: 20px;
}

const hoursLightBulbElems = document.querySelectorAll('#hours .lights .lamp .lamp-bottom');
const minutesLightBulbElems = document.querySelectorAll('#minutes .lights .lamp .lamp-bottom');
const secondsLightBulbElems = document.querySelectorAll('#seconds .lights .lamp .lamp-bottom');

function updateTime() {
    const currTime = new Date();
    
    const hours = currTime.getHours();
    const minutes = currTime.getMinutes();
    const seconds = currTime.getSeconds();

    hoursLightBulbElems.forEach((lamp, index) => {
        const bulb = lamp.querySelector('.bulb');
        const bit = hours & (2 ** (hoursLightBulbElems.length - index - 1));
        bit ? lamp.classList.add('lamp-on') : lamp.classList.remove('lamp-on');
        bit ? bulb.classList.add('bulb-on') : bulb.classList.remove('bulb-on');
    });
    
    minutesLightBulbElems.forEach((lamp, index) => {
        const bulb = lamp.querySelector('.bulb');
        const bit = minutes & (2 ** (minutesLightBulbElems.length - index - 1));
        bit ? lamp.classList.add('lamp-on') : lamp.classList.remove('lamp-on');
        bit ? bulb.classList.add('bulb-on') : bulb.classList.remove('bulb-on');
    });
    
    secondsLightBulbElems.forEach((lamp, index) => {
        const bulb = lamp.querySelector('.bulb');
        const bit = seconds & (2 ** (secondsLightBulbElems.length - index - 1));
        bit ? lamp.classList.add('lamp-on') : lamp.classList.remove('lamp-on');
        bit ? bulb.classList.add('bulb-on') : bulb.classList.remove('bulb-on');
    });
    
    setTimeout(updateTime, 1000);
}
updateTime();

This Pen is owned by Angela Galliat on CodePen.

See more by @agalliat on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.