From c24253395f02a80bd39f29b765dbfff789606fbb Mon Sep 17 00:00:00 2001 From: ArshWalker Date: Fri, 18 Jun 2021 15:25:11 +0530 Subject: [PATCH 1/4] index.html updated --- Javascript/Analog Clock/index.html | 35 +++++++++++++++++------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/Javascript/Analog Clock/index.html b/Javascript/Analog Clock/index.html index aaa43bb76..ca49ea043 100644 --- a/Javascript/Analog Clock/index.html +++ b/Javascript/Analog Clock/index.html @@ -1,21 +1,26 @@ - - - - + + + Analog Clock - - - - + + + + + + -
-
-
-
+
+
+
- - - \ No newline at end of file + + + From 0a298c525272fe1aa9872a35b865438f73a369e9 Mon Sep 17 00:00:00 2001 From: ArshWalker Date: Fri, 18 Jun 2021 15:25:28 +0530 Subject: [PATCH 2/4] index.css updated --- Javascript/Analog Clock/index.css | 109 +++++++++++++++++------------- 1 file changed, 63 insertions(+), 46 deletions(-) diff --git a/Javascript/Analog Clock/index.css b/Javascript/Analog Clock/index.css index 22c31ebff..585d7d8da 100644 --- a/Javascript/Analog Clock/index.css +++ b/Javascript/Analog Clock/index.css @@ -1,65 +1,82 @@ -.container{ - - /* border: 5px solid green; */ - - height: 40vw; - width: 40vw; - position: relative; - background: url(clock.png) no-repeat center center/cover; - margin: auto; - +.container { + /* border: 5px solid green; */ + + height: 40vw; + width: 40vw; + position: relative; + background: url(clock.png) no-repeat center center/cover; + margin: auto; } -#hour,#minute,#second{ - - position: absolute; - background-color: black; - height: 30px; - width: 30px; - border-radius: 10px; - transform-origin: bottom; - +#hour, +#minute, +#second { + position: absolute; + background-color: black; + height: 30px; + width: 30px; + border-radius: 10px; + transform-origin: bottom; } -#hour{ - - /* background-color: black; +#hour { + /* background-color: black; height: 11vw; margin: 24% auto; width: 2vw; border-radius: 2rem; position: absolute; */ - height: 21%; - width: 2%; - top: 30%; - /* margin-top: 24%; */ - /* z-index: 1;*/ - - left: 48.8%; - /* display: none; */ + height: 21%; + width: 2%; + top: 30%; + /* margin-top: 24%; */ + /* z-index: 1;*/ + left: 48.8%; + /* display: none; */ } -#minute{ +#minute { + height: 30%; + width: 1.6%; + top: 21%; + /* margin-top: 24%; */ + left: 49%; + opacity: 0.8; + /* display: none; */ +} - height: 30%; - width: 1.6%; - top: 21%; - /* margin-top: 24%; */ - left: 49%; - opacity: 0.8; - /* display: none; */ +#second { + height: 38%; + width: 1%; + top: 12%; + /* margin-top: 24%; */ + left: 49.3%; + /* display: none; */ +} +html.dark { + --primary-color: #fff; + --secondary-color: #333; } -#second{ +html.dark { + background-color: #111; + color: var(--primary-color); +} - height: 38%; - width: 1%; - top: 12%; - /* margin-top: 24%; */ - left: 49.3%; - /* display: none; */ +.toggle { + cursor: pointer; + background-color: var(--primary-color); + color: var(--secondary-color); + border: 0; + border-radius: 4px; + padding: 8px 12px; + position: absolute; + top: 100px; +} -} \ No newline at end of file +.toggle:focus { + outline: none; +} From 99c5634e030b337a5bcc3abe9f7de34355fdc372 Mon Sep 17 00:00:00 2001 From: ArshWalker Date: Fri, 18 Jun 2021 15:25:46 +0530 Subject: [PATCH 3/4] index.js updated --- Javascript/Analog Clock/index.js | 34 +++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/Javascript/Analog Clock/index.js b/Javascript/Analog Clock/index.js index f7e73f3ef..aeb21b878 100644 --- a/Javascript/Analog Clock/index.js +++ b/Javascript/Analog Clock/index.js @@ -1,14 +1,26 @@ +const toggle = document.querySelector(".toggle"); +toggle.addEventListener("click", (e) => { + const html = document.querySelector("html"); + if (html.classList.contains("dark")) { + html.classList.remove("dark"); + e.target.innerHTML = "Dark mode"; + } else { + html.classList.add("dark"); + e.target.innerHTML = "Light mode"; + } +}); + setInterval(() => { - d = new Date(); - htime = d.getHours(); - mtime = d.getMinutes(); - stime = d.getSeconds(); + d = new Date(); + htime = d.getHours(); + mtime = d.getMinutes(); + stime = d.getSeconds(); - hrotation = 30 * htime + mtime / 2; - mrotation = 6 * mtime; - srotation = 6 * stime; + hrotation = 30 * htime + mtime / 2; + mrotation = 6 * mtime; + srotation = 6 * stime; - hour.style.transform = `rotate(${hrotation}deg)`; - minute.style.transform = `rotate(${mrotation}deg)`; - second.style.transform = `rotate(${srotation}deg)`; -}, 1000); \ No newline at end of file + hour.style.transform = `rotate(${hrotation}deg)`; + minute.style.transform = `rotate(${mrotation}deg)`; + second.style.transform = `rotate(${srotation}deg)`; +}, 1000); From d603b2f44a60e69797c9e9d5244bea82330db15c Mon Sep 17 00:00:00 2001 From: ArshWalker Date: Fri, 18 Jun 2021 15:26:40 +0530 Subject: [PATCH 4/4] index.css updated dark&light --- Javascript/Analog Clock/index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Javascript/Analog Clock/index.css b/Javascript/Analog Clock/index.css index 585d7d8da..73b6f04ee 100644 --- a/Javascript/Analog Clock/index.css +++ b/Javascript/Analog Clock/index.css @@ -1,3 +1,8 @@ +:root { + --primary-color: #000; + --secondary-color: #fff; +} + .container { /* border: 5px solid green; */