Binary Clock

the HTML:


<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <title>Binary Clock</title>
        <link rel="stylesheet" href="binary_clock.css">
        <script src="binary_clock.js"></script>  
            <h1>Binary Clock</h1>
        <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>

the 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:


function displayBinaryClockUnit(unit, unitNum){
    let binValue = 32;
    while (binValue >= 1){
        if (unitNum >= binValue){
            document.getElementById(unit + binValue).style.
                backgroundColor = "white";
            unitNum -= binValue;
            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);

by yetimach 02/04/2023