+
diff --git a/apps/javascript/src/challenges/analog-clock/index.js b/apps/javascript/src/challenges/analog-clock/index.js
index 16e6e0bd7..207b38083 100644
--- 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
index b16fdd86e..ddb4fc771 100644
--- 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,26 +64,26 @@
.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);
@@ -65,11 +91,11 @@
}
.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);
}