JS: Analog clock refinement

sadanandpai · Jul 10, 2024 · ba693c7 · ba693c7
1 parent cf4cf28
commit ba693c7
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 35 deletions.
diff --git a/apps/javascript/src/challenges/analog-clock/index.html b/apps/javascript/src/challenges/analog-clock/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -13,6 +13,7 @@
     <div class="container text-center">
       <div class="clock relative">
         <div class="digits"></div>
+        <div class="ticks"></div>
         <div class="center-connector"></div>
         <div class="hours-hand"></div>
         <div class="minutes-hand"></div>

diff --git a/apps/javascript/src/challenges/analog-clock/index.js b/apps/javascript/src/challenges/analog-clock/index.js
@@ -1,31 +1,41 @@
 const clock = document.querySelector('.clock');
+const ticks = document.querySelector('.ticks');
 const hoursHand = document.querySelector('.hours-hand');
 const minutesHand = document.querySelector('.minutes-hand');
 const secondsHand = document.querySelector('.seconds-hand');
 const clockDigitsEl = document.querySelector('.digits');
-const clockDigits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
+const clockDigits = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+const ticksCount = 60;
+
+// add ticks to the clock
+for (let i = 0; i < ticksCount; i++) {
+  const tick = document.createElement('div');
+  tick.classList.add('tick');
+  tick.style.left = 50 + Math.sin(((Math.PI * 2) / ticksCount) * i) * 50 + '%';
+  tick.style.top = 50 - Math.cos(((Math.PI * 2) / ticksCount) * i) * 50 + '%';
+  tick.style.transform = `rotate ${i * 6}deg`; // rotate the tick by 6deg for every second
+  ticks.appendChild(tick);
+}
+
+// add digits to the clock
 for (let i = 0; i < clockDigits.length; i++) {
   const digitsEl = document.createElement('div');
   digitsEl.textContent = clockDigits[i];
   digitsEl.classList.add('digit');
-  digitsEl.style.left = 50 + Math.sin(((Math.PI * 2) / clockDigits.length) * i + 0.5) * 45 + '%';
-  digitsEl.style.top = 50 - Math.cos(((Math.PI * 2) / clockDigits.length) * i + 0.5) * 45 + '%';
-
+  digitsEl.style.left = 50 + Math.sin(((Math.PI * 2) / clockDigits.length) * i) * 50 + '%';
+  digitsEl.style.top = 50 - Math.cos(((Math.PI * 2) / clockDigits.length) * i) * 50 + '%';
   clockDigitsEl.appendChild(digitsEl);
 }
 
-const getTimeInAngles = (date) => {
-  return {
-    seconds: (clockDigits.length / 2) * date.getSeconds(),
-    minutes: (clockDigits.length / 2) * date.getMinutes() + date.getSeconds() / 10,
-    hours: date.getMinutes() / 2 + (date.getHours() % clockDigits.length) * 30,
-  };
-};
+const getTimeInAngles = (date) => ({
+  seconds: (clockDigits.length / 2) * date.getSeconds(),
+  minutes: (clockDigits.length / 2) * date.getMinutes() + date.getSeconds() / 10,
+  hours: date.getMinutes() / 2 + (date.getHours() % clockDigits.length) * 30,
+});
 
 const setClockHands = () => {
-  const date = new Date();
-  const angles = getTimeInAngles(date);
+  const angles = getTimeInAngles(new Date());
   hoursHand.style.transform = `rotate(${angles.hours}deg)`;
   minutesHand.style.transform = `rotate(${angles.minutes}deg)`;
   secondsHand.style.transform = `rotate(${angles.seconds}deg)`;

diff --git a/apps/javascript/src/challenges/analog-clock/style.css b/apps/javascript/src/challenges/analog-clock/style.css
@@ -1,24 +1,50 @@
+:root {
+  --clock-size: min(100vh - 140px, 90vw);
+  --clock-border: min(2vh, 2vw);
+  --hand-color: black;
+  --tick-color: black;
+  --clock-color: black;
+  --digit-color: brown;
+}
+
 .clock {
-  height: min(80vh, 80vw);
-  width: min(80vh, 80vw);
-  margin: 2rem auto 0;
-  border-radius: 50%;
-  border: 2px solid black;
   display: flex;
   justify-content: center;
   align-items: center;
-  box-shadow: 0px 0px 0 5px black,
-  0px 5px 50px 0 rgba(0, 0, 0, 0.25);
+  margin: 2rem auto 0;
+  height: var(--clock-size);
+  width: var(--clock-size);
+  border: min(2vh, 2vw) solid var(--clock-color);
+  border-radius: 50%;
+}
+
+.ticks {
+  position: absolute;
+  width: 99%;
+  height: 99%;
+}
+
+.tick {
+  position: absolute;
+  height: 1%;
+  border: 1px solid var(--tick-color);
+  transform: translate(-50%, -50%);
+  transform-origin: top left;
+  background-color: var(--tick-color);
+}
+
+.tick:nth-child(5n + 1) {
+  width: 4px;
+  height: 1.5%;
 }
 
 .digits {
-  width: 100%;
-  height: 100%;
+  width: 93%;
+  height: 93%;
   position: absolute;
-  transform-origin: center;
-  color: brown;
+  color: var(--digit-color);
   font-weight: 600;
-  font-size: 1rem;
+  font-size: min(3vh, 3vw);
 }
 
 .digit {
@@ -29,7 +55,7 @@
 
 .center-connector {
   border-radius: 50%;
-  background-color: black;
+  background-color: var(--clock-color);
   height: 5%;
   width: 5%;
 }
@@ -38,38 +64,38 @@
 .minutes-hand,
 .hours-hand {
   position: absolute;
-  background-color: black;
+  background-color: var(--hand-color);
   transform-origin: 50% 100%;
 }
 
 .hours-hand {
-  width: 5px;
+  width: 0.5%;
   height: 30%;
   top: 20%;
   left: calc(50% - 2.5px);
 }
 
 .minutes-hand {
-  width: 3px;
+  width: 0.3%;
   height: 45%;
   top: 5%;
   left: calc(50% - 1.5px);
 }
 
 .seconds-hand {
-  width: 1px;
+  width: 0.1%;
   height: 55%;
   top: 15%;
   left: calc(50% - 0.5px);
   transform-origin: 50% 63.5%;
 }
 
 .seconds-hand::before {
-  content: "";
+  content: '';
   position: absolute;
-  height: 25%;
-  width: 600%;
-  background-color: black;
   bottom: 0;
   left: -250%;
+  height: 25%;
+  width: 600%;
+  background-color: var(--hand-color);
 }