From 845228263e13212cce7b36d691ee4c9b323c078f Mon Sep 17 00:00:00 2001 From: couldntfindabetterusername Date: Sat, 5 Mar 2022 21:55:48 +0530 Subject: [PATCH] day 19 completed --- my code/19-theme-clock/index.html | 34 ++++++++ my code/19-theme-clock/script.js | 90 ++++++++++++++++++++ my code/19-theme-clock/style.css | 136 ++++++++++++++++++++++++++++++ 3 files changed, 260 insertions(+) create mode 100644 my code/19-theme-clock/index.html create mode 100644 my code/19-theme-clock/script.js create mode 100644 my code/19-theme-clock/style.css diff --git a/my code/19-theme-clock/index.html b/my code/19-theme-clock/index.html new file mode 100644 index 0000000..b17e5c4 --- /dev/null +++ b/my code/19-theme-clock/index.html @@ -0,0 +1,34 @@ + + + + + + + + 19 theme clock + + + + + + + + +
+
+
+
+
+ +
+
+ +
4:00
+
Delhi, Mar
5
+
+
+ + + + + \ No newline at end of file diff --git a/my code/19-theme-clock/script.js b/my code/19-theme-clock/script.js new file mode 100644 index 0000000..78a7a5a --- /dev/null +++ b/my code/19-theme-clock/script.js @@ -0,0 +1,90 @@ +const toggle = document.querySelector(".toggle"); + +toggle.addEventListener("click", (e) => { + const html = document.querySelector("html"); + html.classList.toggle("dark"); + + if (html.classList.contains("dark")) { + e.target.innerText = "Light Mode"; + } else { + e.target.innerText = "Dark Mode"; + } +}); + +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 days = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", +]; +const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", +]; + +function setTime() { + const time = new Date(); + const month = time.getMonth(); + const day = time.getDay(); + const date = time.getDate(); + const hours = time.getHours(); + const hoursForClock = hours >= 13 ? hours % 12 : hours; + const minutes = time.getMinutes(); + const seconds = time.getSeconds(); + const ampm = hours >= 12 ? "PM" : "AM"; + + hourEl.style.transform = `translate(-50%, -100%) rotate(${scale( + hoursForClock, + 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)`; + + timeEl.innerHTML = `${hoursForClock}:${ + minutes < 10 ? `0${minutes}` : minutes + } ${ampm}`; + dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}`; +} + +// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers +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); diff --git a/my code/19-theme-clock/style.css b/my code/19-theme-clock/style.css new file mode 100644 index 0000000..e9f6ade --- /dev/null +++ b/my code/19-theme-clock/style.css @@ -0,0 +1,136 @@ +@import url("https://fonts.googleapis.com/css?family=Heebo:300&display=swap"); + +* { + 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: #333; +} + +html.dark { + background-color: #111; + color: var(--primary-color); +} + +body { + font-family: "Heebo", sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.toggle { + cursor: pointer; + background-color: var(--primary-color); + color: var(--secondary-color); + border: 0; + border-radius: 4px; + padding: 8px 12px; + position: absolute; + top: 100px; +} + +.toggle:focus { + outline: none; +} + +.clock-container { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.clock { + position: relative; + width: 200px; + height: 200px; +} + +.needle { + background-color: var(--primary-color); + position: absolute; + top: 50%; + left: 50%; + height: 65px; + width: 3px; + transform-origin: bottom center; + transition: all 0.5s ease-in; +} + +.needle.hour { + transform: translate(-50%, -100%) rotate(0deg); +} + +.needle.minute { + transform: translate(-50%, -100%) rotate(0deg); + height: 100px; +} + +.needle.second { + transform: translate(-50%, -100%) rotate(0deg); + height: 100px; + background-color: #e74c3c; +} + +.center-point { + background-color: #e74c3c; + width: 10px; + height: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.center-point::after { + content: ""; + background-color: var(--secondary-color); + width: 5px; + height: 5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.time { + font-size: 60px; +} + +.date { + color: #aaa; + font-size: 14px; + letter-spacing: 0.3px; + text-transform: uppercase; +} + +.date .circle { + background-color: var(--primary-color); + color: var(--secondary-color); + border-radius: 50%; + height: 18px; + width: 18px; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 18px; + transition: all 0.5s ease-in; + font-size: 12px; +}