diff --git a/apps/javascript/src/challenges/analog-clock/index.html b/apps/javascript/src/challenges/analog-clock/index.html index 7a0b44dcf..ada0dea2a 100644 --- a/apps/javascript/src/challenges/analog-clock/index.html +++ b/apps/javascript/src/challenges/analog-clock/index.html @@ -1,4 +1,4 @@ - + @@ -13,6 +13,7 @@
+
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); }