Currently, I'm in the process of developing an analog clock for a project using Angular.
My challenge is figuring out how to dynamically update the sec/min/hour handlers on the clock based on the current time by manipulating the style.transform property for each element.
This snippet features my progress so far:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-clock',
templateUrl: './clock.component.html',
styleUrls: ['./clock.component.css']
})
export class ClockComponent implements OnInit {
constructor() { }
ngOnInit() { }
}body {
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.clock {
width: 150px;
height: 150px;
background-color: #20b7af;
border: 12px solid white;
box-shadow: 0 0 30px rgb(202, 202, 202);
border-radius: 50%;
position: relative;
}
#sec-hand {
width: 1px;
height: 50%;
background-color: rgb(255, 255, 255);
transform-origin: 50% 80%;
position: absolute;
top: 10%;
left: 50%;
}
#min-hand {
width: 5px;
height: 40%;
background-color: rgb(255, 255, 255);
transform-origin: 50% 80%;
position: absolute;
top: 18%;
left: calc(50% - 1px);
}
#hr-hand {
width: 3px;
height: 25%;
background-color: rgb(255, 255, 255);
transform-origin: 50% 80%;
position: absolute;
top: 30%;
left: calc(50% + -2px);
}
.num {
height: 100%;
position: absolute;
left: calc(50% - 0.5em);
font-size: 10px;
}
/* Repeat rotation and counter-rotation transformation for indicating numbers */
.num1 {
transform: rotate(30deg);
}
.num1 div {
transform: rotate(-30deg);
}
...
.num12 {
transform: rotate(0deg);
}
.num12 div {
transform: rotate(-0deg);
}
.as-console-wrapper {
display: none !important;
}