<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"></script>
<title>Clock</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--primary-color: #000;
--secondary-color: #fff;
}
html{
transition: all 0.5s ease-in;
}
html.dark{
--primary-color: #fff;
--secondary-color: #000;
}
html.dark{
background-color: #111;
color: var(--primary-color);
}
body{
font-family: 'roboto', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
a{
text-decoration: none;
background-color: var(--primary-color);
color: var(--secondary-color);
}
.language{
background-color: var(--primary-color);
color: var(--secondary-color);
border: 0;
border-radius: 4px;
padding: 8px 12px;
position: relative;
top: -10%;
cursor: pointer;
}
#lang{
display: flex;
justify-content: space-between;
width: 250px;
}
.toggle{
background-color: var(--primary-color);
color: var(--secondary-color);
border: 0;
border-radius: 4px;
padding: 8px 12px;
position: absolute;
top: 100px;
cursor: pointer;
}
.toggle:focus{
outline: none;
}
.clock-container{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.clock{
position: relative;
width: 235px;
height: 235px;
border-radius: 50%;
background: #14361d;
box-shadow: 0 0 0 4px #929690,
0 0 0 6px #837f7f,
0 0 0 9px #929690,
0 0 0 30px #14361d,
0 0 0 36px #929690,
0 0 0 39px #f6f6f6;
}
.logo{
display: flex;
justify-content: center;
color: #fff;
font-size: large;
font-family: 'Times New Roman';
position: absolute;
font-style: oblique;
top: 25%;
left: 50%;
font-weight: bold;
transform: translate(-50%, -50%);
z-index: 1;
}
.rolex{
display: flex;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight:600;
position: absolute;
top: 34%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
letter-spacing: 2.4px;
}
.text{
display: flex;
justify-content: center;
color: #fff;
font-size: 7.6px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
word-spacing: 2.4px;
}
.text-bottom-top{
display: flex;
justify-content: center;
color: #fff;
font-size: 7.6px;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
word-spacing: 2.4px;
}
.text-bottom-mid{
display: flex;
justify-content: center;
color: #fff;
font-size: 5.6px;
position: absolute;
top: 69%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
word-spacing: 2.1px;
}
.text-bottom{
display: flex;
justify-content: center;
color: #fff;
font-size: 5.6px;
position: absolute;
top: 72%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
word-spacing: 2.1px;
}
.needle{
background-color: var(--primary-color);
position: absolute;
top: 50%;
left: 50%;
height: 65px;
width: 4px;
transform-origin: bottom center ;
transition: all 0.6s ease-in-out infinite;
}
.needle.hour{
transform: translate(-50%, -100%) rotate(0deg);
height: 80px;
width: 6px;
background-color: #263a2ba8;
border: 1.7px #fff solid;
z-index: 2;
border-radius: 50% 50% 40% 40%;
}
.needle.minute{
transform: translate(-50%, -100%) rotate(0deg);
height: 100px;
width: 7px;
background-color: #263a2b;
border: 1.7px #fff solid;
border-radius: 50% 50% 40% 40%;
z-index: 3;
}
.needle.second{
transform: translate(-50%, -100%) rotate(0deg) ;
height: 110px;
background-color: #263a2b;
border: .4px #fff solid;
border-radius: 50% 50% 20% 20%;
z-index: 5;
}
.clock-dial {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 230px;
}
.clock-dial .clock-indicator {
position: absolute;
width: 1px;
height: 6px;
margin: 113px 114px;
background-color: #fff;
}
.clock-indicator:nth-child(61){
transform: rotate(25deg) translateY(-98px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(62){
transform: rotate(55deg) translateY(-94px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(63){
transform: rotate(120deg) translateY(-91px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(64){
transform: rotate(153deg) translateY(-91px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(65){
transform: rotate(213deg) translateY(-98px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(66){
transform: rotate(243deg) translateY(-102px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(67){
transform: rotate(300deg) translateY(-105px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(68){
transform: rotate(328deg) translateY(-104px);
width: 15px;
height: 15px;
border: 2.4px #838e48 solid;
border-radius: 50%;
}
.clock-indicator:nth-child(69){
transform: rotate(270deg) translateY(-97px) translateX(7px);
width: 10px;
height: 22px;
border: 2px #838e48 solid;
}
.clock-indicator:nth-child(70){
transform: rotate(180deg) translateY(-88px) translateX(4px);
width: 10px;
height: 22px;
border: 2px #838e48 solid;
}
.clock-indicator:nth-child(71){
transform: rotate(360deg) translateY(-102px) translateX(-10px);
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 28px solid #fff;
background: #263a2b;
}
.clock-indicator:nth-child(72){
transform: rotate(360deg) translateY(-143px) translateX(-12px);
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 18px solid #fff;
background: #263a2b;
}
.clock-indicator:nth-child(73){
transform: rotate(360deg) translateY(-142px) translateX(-4px);
width: 11px;
height: 11px;
border-radius: 50%;
background-color: #e5f6e1;
border: 1px solid #828783;
}
.clock-indicator:nth-child(74){
transform: rotate(330deg) translateY(-143px) translateX(-1px);
width: 5px;
height: 16px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(75){
transform: rotate(270deg) translateY(-138px) translateX(4px);
width: 5px;
height: 16px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(76){
transform: rotate(210deg) translateY(-132px) translateX(4px);
width: 5px;
height: 16px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(77){
transform: rotate(150deg) translateY(-131px) translateX(0px);
width: 5px;
height: 16px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(78){
transform: rotate(90deg) translateY(-136px) translateX(-4px);
width: 5px;
height: 16px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(79){
transform: rotate(30deg) translateY(-141px) translateX(-2px);
width: 5px;
height: 16px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(80){
transform: rotate(12deg) translateY(-137px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(81){
transform: rotate(18deg) translateY(-137px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(82){
transform: rotate(24deg) translateY(-137px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(83){
transform: rotate(36deg) translateY(-137px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(84){
transform: rotate(42deg) translateY(-137px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(85){
transform: rotate(48deg) translateY(-137px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(86){
transform: rotate(72deg) translateY(-135px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(87){
transform: rotate(78deg) translateY(-135px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(88){
transform: rotate(84deg) translateY(-135px) translateX(-3px);
width: 3.4px;
height: 11px;
background-color: #e5f6e1;
}
.clock-indicator:nth-child(89){
transform: rotate(60deg) translateY(-149px) translateX(-15px);
width: 0;
color: #e5f6e1;
font-size: 20px;
font-weight: 1000;
}
.clock-indicator:nth-child(90){
transform: rotate(120deg) translateY(-149px) translateX(-13px);
width: 0;
color: #e5f6e1;
font-size: 20px;
font-weight: 1000;
}
.clock-indicator:nth-child(91){
transform: rotate(180deg) translateY(-147px) translateX(-15px);
width: 0;
color: #e5f6e1;
font-size: 20px;
font-weight: 1000;
}
.clock-indicator:nth-child(92){
transform: rotate(240deg) translateY(-147px) translateX(-15px);
width: 0;
color: #e5f6e1;
font-size: 20px;
font-weight: 1000;
}
.clock-indicator:nth-child(93){
transform: rotate(300deg) translateY(-148px) translateX(-15px);
width: 0;
color: #e5f6e1;
font-size: 20px;
font-weight: 1000;
}
/* .clock-indicator:nth-child(1) {
transform: rotate(30deg) translateY(-113px);
}
.clock-indicator:nth-child(2) {
transform: rotate(60deg) translateY(-113px);
}
.clock-indicator:nth-child(3) {
transform: rotate(90deg) translateY(-113px);
}
.clock-indicator:nth-child(4) {
transform: rotate(120deg) translateY(-113px);
}
.clock-indicator:nth-child(5) {
transform: rotate(150deg) translateY(-113px);
}
.clock-indicator:nth-child(6) {
transform: rotate(180deg) translateY(-113px);
}
.clock-indicator:nth-child(7) {
transform: rotate(210deg) translateY(-113px);
}
.clock-indicator:nth-child(8) {
transform: rotate(240deg) translateY(-113px);
}
.clock-indicator:nth-child(9) {
transform: rotate(270deg) translateY(-113px);
}
.clock-indicator:nth-child(10) {
transform: rotate(300deg) translateY(-113px);
}
.clock-indicator:nth-child(11) {
transform: rotate(330deg) translateY(-113px);
}
.clock-indicator:nth-child(12) {
transform: rotate(360deg) translateY(-113px);
} */
.clock-indicator:nth-child(1) {
transform: rotate(0deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(2) {
transform: rotate(6deg) translateY(-113px);
}
.clock-indicator:nth-child(3) {
transform: rotate(12deg) translateY(-113px);
}
.clock-indicator:nth-child(4) {
transform: rotate(18deg) translateY(-113px);
}
.clock-indicator:nth-child(5) {
transform: rotate(24deg) translateY(-113px);
}
.clock-indicator:nth-child(6) {
transform: rotate(30deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(7) {
transform: rotate(36deg) translateY(-113px);
}
.clock-indicator:nth-child(8) {
transform: rotate(42deg) translateY(-113px);
}
.clock-indicator:nth-child(9) {
transform: rotate(48deg) translateY(-113px);
}
.clock-indicator:nth-child(10) {
transform: rotate(54deg) translateY(-113px);
}
.clock-indicator:nth-child(11) {
transform: rotate(60deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(12) {
transform: rotate(66deg) translateY(-113px);
}
.clock-indicator:nth-child(13) {
transform: rotate(72deg) translateY(-113px);
}
.clock-indicator:nth-child(14) {
transform: rotate(78deg) translateY(-113px);
}
.clock-indicator:nth-child(15) {
transform: rotate(84deg) translateY(-113px);
}
.clock-indicator:nth-child(16) {
transform: rotate(90deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(17) {
transform: rotate(96deg) translateY(-113px);
}
.clock-indicator:nth-child(18) {
transform: rotate(102deg) translateY(-113px);
}
.clock-indicator:nth-child(19) {
transform: rotate(108deg) translateY(-113px);
}
.clock-indicator:nth-child(20) {
transform: rotate(114deg) translateY(-113px);
}
.clock-indicator:nth-child(21) {
transform: rotate(120deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(22) {
transform: rotate(126deg) translateY(-113px);
}
.clock-indicator:nth-child(23) {
transform: rotate(132deg) translateY(-113px);
}
.clock-indicator:nth-child(24) {
transform: rotate(138deg) translateY(-113px);
}
.clock-indicator:nth-child(25) {
transform: rotate(144deg) translateY(-113px);
}
.clock-indicator:nth-child(26) {
transform: rotate(150deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(27) {
transform: rotate(156deg) translateY(-113px);
}
.clock-indicator:nth-child(28) {
transform: rotate(162deg) translateY(-113px);
}
.clock-indicator:nth-child(29) {
transform: rotate(168deg) translateY(-113px);
}
.clock-indicator:nth-child(30) {
transform: rotate(174deg) translateY(-113px);
}
.clock-indicator:nth-child(31) {
transform: rotate(180deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(32) {
transform: rotate(186deg) translateY(-113px);
}
.clock-indicator:nth-child(33) {
transform: rotate(192deg) translateY(-113px);
}
.clock-indicator:nth-child(34) {
transform: rotate(198deg) translateY(-113px);
}
.clock-indicator:nth-child(35) {
transform: rotate(204deg) translateY(-113px);
}
.clock-indicator:nth-child(36) {
transform: rotate(210deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(37) {
transform: rotate(216deg) translateY(-113px);
}
.clock-indicator:nth-child(38) {
transform: rotate(222deg) translateY(-113px);
}
.clock-indicator:nth-child(39) {
transform: rotate(228deg) translateY(-113px);
}
.clock-indicator:nth-child(40) {
transform: rotate(234deg) translateY(-113px);
}
.clock-indicator:nth-child(41) {
transform: rotate(240deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(42) {
transform: rotate(246deg) translateY(-113px);
}
.clock-indicator:nth-child(43) {
transform: rotate(252deg) translateY(-113px);
}
.clock-indicator:nth-child(44) {
transform: rotate(258deg) translateY(-113px);
}
.clock-indicator:nth-child(45) {
transform: rotate(264deg) translateY(-113px);
}
.clock-indicator:nth-child(46) {
transform: rotate(270deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(47) {
transform: rotate(276deg) translateY(-113px);
}
.clock-indicator:nth-child(48) {
transform: rotate(282deg) translateY(-113px);
}
.clock-indicator:nth-child(49) {
transform: rotate(288deg) translateY(-113px);
}
.clock-indicator:nth-child(50) {
transform: rotate(294deg) translateY(-113px);
}
.clock-indicator:nth-child(51) {
transform: rotate(300deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(52) {
transform: rotate(306deg) translateY(-113px);
}
.clock-indicator:nth-child(53) {
transform: rotate(312deg) translateY(-113px);
}
.clock-indicator:nth-child(54) {
transform: rotate(318deg) translateY(-113px);
}
.clock-indicator:nth-child(55) {
transform: rotate(324deg) translateY(-113px);
}
.clock-indicator:nth-child(56) {
transform: rotate(330deg) translateY(-113px);
width: 2px;
height: 8px;
}
.clock-indicator:nth-child(57) {
transform: rotate(336deg) translateY(-113px);
}
.clock-indicator:nth-child(58) {
transform: rotate(342deg) translateY(-113px);
}
.clock-indicator:nth-child(59) {
transform: rotate(348deg) translateY(-113px);
}
.clock-indicator:nth-child(60) {
transform: rotate(354deg) translateY(-113px);
}
.center-point{
background-color: #b6b8b7;
width: 11px;
height:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 10;
}
.center-point::after{
content: '';
background-color: var(--primary-color);
width: 5px;
height: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 10;
}
.time{
font-size: 60px;
}
.date{
color: #aaa;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.date .square{
background-color: #fff;
color: #000;
height: 13px;
width: 20px;
border: 1.1px rgb(107, 106, 106) solid;
display: inline-flex;
align-items: center;
font-weight: 800;
justify-content: center;
line-height: 18px;
transition: all 0.5s ease-in;
font-size: 12px;
position: absolute;
top: 53%;
left: 90%;
transform: translate(-50%, -100%);
z-index: 1;
}
.year{
color: var(--primary-color);
display: flex;
flex-direction: column;
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
</style>
<button class="toggle">Dark mode</button>
<div class="clock-container">
<div class="clock">
<div class="logo"><img src="http://devcaffe.nl/wp-content/uploads/2022/11/Ontwerp-zonder-titel8.svg" alt=""></div>
<div class="rolex">ROLEX</div>
<div class="text">OYSTER PEREPTUAL DATE</div>
<div class="text-bottom-top">YACHT MASTER</div>
<div class="text-bottom-mid">SUPERLATIVE CHRONOMETER</div>
<div class="text-bottom">OFFICIALLY CERTIFIED</div>
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="date"><span class="square"></span></div>
<div class="needle second"></div>
<div class="center-point"></div>
<div class="clock-dial">
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator circle"></div>
<div class="clock-indicator square"></div>
<div class="clock-indicator square"></div>
<div class="clock-indicator triangle"></div>
<div class="clock-indicator triangle"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator"></div>
<div class="clock-indicator">10</div>
<div class="clock-indicator">20</div>
<div class="clock-indicator">30</div>
<div class="clock-indicator">40</div>
<div class="clock-indicator">50</div>
</div>
</div>
<div class="time"></div>
<div class="year"></div>
</div>
</body>
<script>
const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const secondEl = document.querySelector('.second');
const timeEl = document.querySelector('.time');
const dateEl = document.querySelector('.date');
const toggle = document.querySelector('.toggle');
const yearEl = document.querySelector('.year');
const days = ["Sunday", "Monday", "tuesday", "Wednesday", "Thursday", "Friday", "Saterday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
toggle.addEventListener('click', (e) => {
const html = document.querySelector('html');
if(html.classList.contains('dark')){
html.classList.remove('dark')
e.target.innerHTML = 'Dark mode';
} else{
html.classList.add('dark')
e.target.innerHTML = 'Light mode';
}
});
function setTime(){
const time = new Date();
const year = time.getFullYear();
const month = time.getMonth();
const day = time.getDay();
const date = time.getDate();
const hours = time.getHours();
const hoursForClock = hours % 24;
const minutes = time.getMinutes();
const seconds = time.getSeconds();
const ampm = hours >= 12 ? 'PM' : 'AM';
hourEl.style.transform=`translate(-50%, -100%) rotate(${scale(hours, 0, 12, 0, 360)}deg)`;
minuteEl.style.transform=`translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`;
secondEl.style.transform=`translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`;
// hourEl.innerHTML = `${hoursForClock < 10 ? `0${hoursForClock}`: hoursForClock}`;
// minuteEl.innerHTML = `${minutes < 10 ? `0${minutes}`: minutes}`;
// hourEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}`: minutes}:${seconds} ${ampm}`;
dateEl.innerHTML =`<span class="square">${date}</span>`;
yearEl.innerHTML = ` ${year}`;
}
const scale = (num, in_min, in_max, out_min, Out_max) => {
return(num - in_min) * (Out_max - out_min) / (in_max -in_min) + out_min;
}
setTime();
setInterval(setTime, 1000);
</script>
</html>