the bones of a clock

i was reading about dyscalculia at https://accessiblenumbers.com trying to understand how tables can be improved for folks with low numeracy. there was mention of time blindness which is a thing that can happen deep in interactive programming sessions. i thought it would be fun to start thinking about clocks and styling them and having fun. heres my sketch of a clock.

    time_stuff = operator.attrgetter(*(keys := "year month day hour minute second".split()))
    df = (
        pandas.to_datetime(["now"])
        .to_series()
        .apply(time_stuff)
        .apply(list)
        .series()
        .rename(columns=dict(enumerate(keys))).reset_index(drop=True)
        .set_index(Index(["value"]))
        .rename_axis(columns=["key"])
    ); df

key	year	month	day	hour	minute	second
value	2024	4	18	22	57	28

%%
<script>
function setTime(){
    let now = new Date();
    let parts = {
        year: now.getFullYear(), month: now.getMonth() + 1,
        day: now.getDate(), hour: now.getHours(), 
        minute: now.getMinutes(), second: now.getSeconds()};
    for (clock of document.getElementsByClassName("clock")) {
        for (key of {{df.columns.to_list()}}){
            for (td of clock.getElementsByClassName(key)) {
                td.textContent = parts[key];
            }
        }
    }
}
setTime();
setInterval(setTime, 1000);
</script>
<style>
{%- for k in df.columns -%}
.{{k}} {--this: --{{k}};}
{%- endfor -%}
</style>
<table ".join,="" ";="" "{};".format)}}"="" %s".__mod__),="" class="clock" id="A" map("--%s:="" style="{{pipe(df.T[" value"].items(),="">
<caption>a clock</caption>
<thead>
         {%- for k in df.columns -%}
            <th>{{k}}</th>
         {%- endfor -%}
    </thead>
<tbody>
<tr>
            {%- for k in df.columns -%}
            <td class="{{k}}">{{df.loc["value", k]}}</td>
            {%- endfor -%}
        </tr>
</tbody>
</table>

a clock

year	month	day	hour	minute	second
2024	4	18	22	57	28

%%html
<style>
#A {
    thead {
        display: none;
    }
    tr, td {
        display: inline;
    }
    .hour {
        font-size: larger;
    }
    .year, .month {
        &::after {
            content: ".";
        }
    }
    .minute::before {
        content: ":"; 
    }
    .second {
        font-size: smaller;
        &::before {
            content: ":";
        }
    }
}
</style>