Finding the time and displaying it
Today I built a clock using HTML, CSS, and vanilla Javascript. It was a bit tricky to sort out some parts of it, but I had a lot of fun building it. I almost added in a simple transition that gave it a bit of a better initial transition from its static state to dynamic state, but it caused the second hand to over-animate when it hit 0.
View the code:
HTML and JS
<div class="code-block">
<div class="clock">
<div class="numerals">
<span><time>12</time></span>
<span><time>11</time></span>
<span><time>10</time></span>
<span><time>9</time></span>
<span><time>8</time></span>
<span><time>7</time></span>
<span><time>6</time></span>
<span><time>5</time></span>
<span><time>4</time></span>
<span><time>3</time></span>
<span><time>2</time></span>
<span><time>1</time></span>
</div>
<div class="hands">
<hr class="hours" />
<hr class="minutes" />
<hr class="seconds" />
</div>
</div>
</div>
<script>
// ---------
// Variables
// ---------
const handHour = document.querySelector('.hours');
const handMinute = document.querySelector('.minutes');
const handSecond = document.querySelector('.seconds');
// ---------
// Functions
// ---------
function startClock() {
timer = setInterval(() => {
let now = new Date();
let hoursCheck = now.getHours();
let minutesCheck = now.getMinutes();
let secondsCheck = now.getSeconds();
handHour.style.transform = "rotate(0deg);"
handMinute.style.transform = "rotate(0deg);"
handSecond.style.transform = "rotate(0deg);"
handHour.style.transform = `rotate(calc((${hoursCheck})*var(--default-angle, 30deg)))`;
handMinute.style.transform = `rotate(calc(${minutesCheck}*6deg)`;
handSecond.style.transform = `rotate(calc(${secondsCheck}*6deg)`;
}, 1000);
}
// ---------
// Events
// ---------
window.onload = function() {
startClock();
};
</script>CSS
/* Variables */
:root {
/* */
--main-bg: black;
--default-angle: 30deg;
}
html { box-sizing: border-box; z-index: 0; }
html * { box-sizing: inherit; }
.code-block {
width: 24em;
margin: 2em auto;
}
.clock {
width: 20em;
height: 20em;
border-radius: 50%;
border: solid 5px #222;
position: relative;
z-index: 1;
box-shadow: 1em 1em 1em 0 rgba(0, 0, 0, .1);
}
.clock::after {
content: "";
display: block;
background-color: black;
border-radius: 50%;
clip-path: circle(50% at 50% 50%);
position: absolute;
width: 1em;
height: 1em;
}
@supports (display: grid) {
.clock {
display: grid;
place-items: center;
}
.numerals {
display: flex;
flex-direction: row;
}
}
.numerals {
position: relative;
z-index: 2;
height: 18em;
width: 18em;
}
.numerals span {
display: block;
position: absolute;
min-width: 1.5em;
height: 18em;
top: 0;
left: calc(50% - .75em);
text-align: center;
}
.numerals span:nth-of-type(1) {transform: rotate(calc(0*var(--default-angle)));}
.numerals span:nth-of-type(1) > time {transform: rotate(calc(0*var(--default-angle)));}
.numerals span:nth-of-type(2) {transform: rotate(calc(-1*var(--default-angle)));}
.numerals span:nth-of-type(2) > time {transform: rotate(calc(1*var(--default-angle)));}
.numerals span:nth-of-type(3) {transform: rotate(calc(-2*var(--default-angle)));}
.numerals span:nth-of-type(3) > time {transform: rotate(calc(2*var(--default-angle)));}
.numerals span:nth-of-type(4) {transform: rotate(calc(-3*var(--default-angle)));}
.numerals span:nth-of-type(4) > time {transform: rotate(calc(3*var(--default-angle)));}
.numerals span:nth-of-type(5) {transform: rotate(calc(-4*var(--default-angle)));}
.numerals span:nth-of-type(5) > time {transform: rotate(calc(4*var(--default-angle)));}
.numerals span:nth-of-type(6) {transform: rotate(calc(-5*var(--default-angle)));}
.numerals span:nth-of-type(6) > time {transform: rotate(calc(5*var(--default-angle)));}
.numerals span:nth-of-type(7) {transform: rotate(calc(-6*var(--default-angle)));}
.numerals span:nth-of-type(7) > time {transform: rotate(calc(6*var(--default-angle)));}
.numerals span:nth-of-type(8) {transform: rotate(calc(-7*var(--default-angle)));}
.numerals span:nth-of-type(8) > time {transform: rotate(calc(7*var(--default-angle)));}
.numerals span:nth-of-type(9) {transform: rotate(calc(-8*var(--default-angle)));}
.numerals span:nth-of-type(9) > time {transform: rotate(calc(8*var(--default-angle)));}
.numerals span:nth-of-type(10) {transform: rotate(calc(-9*var(--default-angle)));}
.numerals span:nth-of-type(10) > time {transform: rotate(calc(9*var(--default-angle)));}
.numerals span:nth-of-type(11) {transform: rotate(calc(-10*var(--default-angle)));}
.numerals span:nth-of-type(11) > time {transform: rotate(calc(10*var(--default-angle)));}
.numerals span:nth-of-type(12) {transform: rotate(calc(-11*var(--default-angle)));}
.numerals span:nth-of-type(12) > time {transform: rotate(calc(11*var(--default-angle)));}
.align-right {text-align: right;}
.numerals span > time {
display: block;
text-align: center;
padding: .25em;
font-weight: 900;
}
.numerals span > time {transform: rotate(calc(-1*var(--default-angle)));}
.hands {
position: absolute;
top: 50%;
left: 9.1925em;
transform:rotate(-90deg);
}
.hands hr {
position: absolute;
top: 0%;
left: 0;
width: 7em;
padding: 0;
margin: 0;
height: 1em;
background-color: rgba(0, 0, 0, .1);
border: 0;
}
hr.hours {
transform-origin: center left;
transform:rotate(calc(9 * var(--default-angle, 30deg)));
width: 6em;
border-radius: .2em;
height: .75em;
margin: .125em 0;
background-color: #111;
z-index: 4;
}
hr.minutes{
transform-origin: center left;
transform:rotate(calc(1.625 * var(--default-angle, 30deg)));
width: 7em;
border-radius: .2em;
height: .5em;
margin: .25em 0;
background-color: #111;
z-index: 5;
}
hr.seconds {
transform-origin: center left;
transform:rotate(calc(0 * var(--default-angle, 30deg)));
width: 7.5em;
border-radius: .2em;
height: .25em;
margin: .375em 0;
background-color: red;
z-index: 6;
}