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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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;
+}