Set the CSS-only clock with the HTML <time> element

<time>

<time id="time" datetime="2021-11-29T03:58">Now</time>
--setTimeHours: 3;
--setTimeMinutes: 58;

Attribute selectors

[datetime*="T03"] ~ .clock {
--setTimeHours: 3;
}
[datetime*=":58"] ~ .clock {
--setTimeMinutes: 58;
}
@for $i from 0 through 9 {
[datetime*="T0#{$i}"] ~ .clock { --setTimeHours: #{$i} }
}
@for $i from 10 through 24 {
[datetime*="T#{$i}"] ~ .clock { --setTimeHours: #{$i} }
}
@for $i from 0 through 9 {
[datetime*=":0#{$i}"] ~ .clock { --setTimeMinutes: #{$i} }
}
@for $i from 10 through 60 {
[datetime*=":#{$i}"] ~ .clock { --setTimeMinutes: #{$i} }
}

Senior Front-end Web Developer, Creative Technologist with over 12 years experience. Loves pushing the limits of HTML and CSS.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Earn Money through Coding

Creating an inline editable grid with PHP and MySql

Move to Earn! MetaTube $50,000 worth of MTT Airdrop

IaaS && PaaS && SaaS

{UPDATE} Maths champions Hack Free Resources Generator

Setup Your RaspberryPi

Introduction to AWS Serverless

Contract Law in Utah

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mate Marschalko

Mate Marschalko

Senior Front-end Web Developer, Creative Technologist with over 12 years experience. Loves pushing the limits of HTML and CSS.

More from Medium

Web apps without HTML and CSS: the support conundrum

They Say: Do Not Use Margins in CSS. How I use them anyway.

Start using these CSS pseudo-class selectors right now

How to Animate an Emoji with CSS