Binary Clock

Here is how this displays the time: The first row is the hour. The second row is the minute. The third row is the second.

Each square has a specific value: 32 16 8 4 2 1. If the square is white, that value is counted. If it is black, it is not. Watch the seconds for a while to try to figure out how this works if it isn't clear by this description.

Below is the code that displays it:


the HTML:

binary_clock.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Binary Clock</title>
        <link rel="stylesheet" href="binary_clock.css">
        <script src="binary_clock.js"></script>  
    </head>
    <body>
        <header>
            <h1>Binary Clock</h1>
        </header>
        <div class="grid_container">
            <div class="grid_item" id="hour32"></div>
            <div class="grid_item" id="hour16"></div>
            <div class="grid_item" id="hour8"></div>
            <div class="grid_item" id="hour4"></div>
            <div class="grid_item" id="hour2"></div>
            <div class="grid_item" id="hour1"></div>
            <div class="grid_item" id="minute32"></div>
            <div class="grid_item" id="minute16"></div>
            <div class="grid_item" id="minute8"></div>
            <div class="grid_item" id="minute4"></div>
            <div class="grid_item" id="minute2"></div>
            <div class="grid_item" id="minute1"></div>
            <div class="grid_item" id="second32"></div>
            <div class="grid_item" id="second16"></div>
            <div class="grid_item" id="second8"></div>
            <div class="grid_item" id="second4"></div>
            <div class="grid_item" id="second2"></div>
            <div class="grid_item" id="second1"></div>
        </div> 
    </body>
</html>



the CSS:

binary_clock.css

body {
    background: black;
    color: orange;
    text-align: center;
}

.grid_container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 1px;
    width: 50%;
    margin: auto;
}

.grid_container > div {
    border: 1px solid darkgray;
}

.grid_item {
    min-height: 25px;
}


the JavaScript:

binary_clock.js

function displayBinaryClockUnit(unit, unitNum){
    let binValue = 32;
    while (binValue >= 1){
        if (unitNum >= binValue){
            document.getElementById(unit + binValue).style.
                backgroundColor = "white";
            unitNum -= binValue;
        }else{
            document.getElementById(unit + binValue).style.
                backgroundColor = "black";
        }
        binValue /= 2;
    } 
}

function displayAllBinaryClockUnits(){
    const d = new Date();
    let hours = d.getHours();
    let minutes = d.getMinutes();
    let seconds = d.getSeconds();
    displayBinaryClockUnit("hour", hours);
    displayBinaryClockUnit("minute", minutes);
    displayBinaryClockUnit("second", seconds);
}

setInterval(displayAllBinaryClockUnits, 1000);