From ce684352dd0ab5ab674b20097ed9cce322f3534d Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Mon, 17 Jan 2022 22:44:54 +0000 Subject: [PATCH 001/220] add changes to clock class for custom input --- app.js | 4 +++- clock.js | 16 ++++++++++------ index.html | 32 +++++++++++++++++++------------- 3 files changed, 32 insertions(+), 20 deletions(-) diff --git a/app.js b/app.js index c87f4770..64a26a0e 100644 --- a/app.js +++ b/app.js @@ -117,6 +117,7 @@ icon.addEventListener("click", notifyMode); // endButton.addEventListener("click", stopClock); // service worker +/* if('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') @@ -124,4 +125,5 @@ if('serviceWorker' in navigator){ .catch((err)=> console.log('Service worker not registered', err)); }); -} \ No newline at end of file +} +*/ \ No newline at end of file diff --git a/clock.js b/clock.js index 3f78d692..77d2167e 100644 --- a/clock.js +++ b/clock.js @@ -1,12 +1,14 @@ export default class Clock { - constructor() { - this.setEndDate() + constructor(endDate) { + this.setEndDate(endDate) this.countDown(); } - setEndDate() { - this.endDate = new Date(`Jan 1, ${new Date().getFullYear() + 1} 00:00:00`) - //account for leap year - this.dayLength = ((this.endDate.getFullYear() % 4 != 0) ? 365 : 366) + + setEndDate(endDate) { + //set endDate to end of year + this.endDate = endDate ||new Date(`Jan 1, ${new Date().getFullYear() + 1} 00:00:00`) + + } countDown() { // Set the date we're counting down to @@ -25,6 +27,8 @@ export default class Clock { } } countDays() { + //account for leap year + this.dayLength = ((this.endDate.getFullYear() % 4 != 0) ? 365 : 366) return this.dayLength - this.days } } \ No newline at end of file diff --git a/index.html b/index.html index 7a9e0229..9f833e34 100644 --- a/index.html +++ b/index.html @@ -9,18 +9,18 @@ Final Countdown - + - + - + @@ -32,9 +32,9 @@
@@ -55,17 +55,23 @@ Seconds
- +
+
Select a new Date
+
+
+ + + +
+ +
-
- RD | Nat -
-
+
+ RD | Nat +
+ From 857e4665ae8e319e74348808a632b42bc48fc0b1 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Mon, 17 Jan 2022 23:16:00 +0000 Subject: [PATCH 002/220] working datepicker --- app.js | 53 ++++++++++++++++++++++++++++++++++++++++++++--------- index.html | 29 +++++++++++++++++++++++++---- 2 files changed, 69 insertions(+), 13 deletions(-) diff --git a/app.js b/app.js index 64a26a0e..f9edb6b7 100644 --- a/app.js +++ b/app.js @@ -6,19 +6,21 @@ import Clock from './clock.js' let icon = document.getElementById('themeToggle'); let dayCount = document.getElementById("countDay"); // let controls = document.getElementsByClassName("button"); -let startButton = document.getElementById('startButton'); -let stopButton = document.getElementById('stopButton'); +// let startButton = document.getElementById('startButton'); +// let stopButton = document.getElementById('stopButton'); let body = document.body; let dayNumber =document.getElementById('day-num'); let hourNumber =document.getElementById("hour-num"); let minNumber =document.getElementById("min-num"); let secNumber =document.getElementById("sec-num"); +let dateInput = document.getElementById('customDate') //to stop the clock let intervalID; let clockMovement = false; // Initialize Clock class var myclock = new Clock(); +var customClock; function startClock() { intervalID = setInterval(startTime, 500); @@ -42,13 +44,13 @@ function startTime() { clockMovement = true; } -function restartTime() { - if (clockMovement) { - return; - } else { - startClock(); - } -} +// function restartTime() { +// if (clockMovement) { +// return; +// } else { +// startClock(); +// } +// } // add zero in front of numbers < 10 function addZeros(time) { if (time < 10) { @@ -107,8 +109,41 @@ function notifyMode() { ); } } + +function listenForDate(){ + dateInput.addEventListener('change', function(){ + const input = this.value; + console.log(input); + customClock = new Clock(new Date(input)); + console.log(customClock); + let dayNumber =document.getElementById('day-custom'); + let hourNumber =document.getElementById("hour-custom"); + let minNumber =document.getElementById("min-custom"); + let secNumber =document.getElementById("sec-custom"); + let customRow =document.getElementById("customDisplay"); + customRow.style.display= 'block'; + + let d = customClock.days + let h = customClock.hours + let m = customClock.minutes + let s = customClock.seconds + console.log(d, h, m, s); + d= addZeros(d); + h = addZeros(h); + m = addZeros(m); + s = addZeros(s); + console.log(d, h, m, s); + dayNumber.innerHTML = `${d}`; + hourNumber.innerHTML = `${h}`; + minNumber.innerHTML = `${m}`; + secNumber.innerHTML = `${s}`; + + // console.log(); + }) +} startClock(); autoLight(); +listenForDate(); // init events icon.addEventListener("click", setMode); icon.addEventListener("click", notifyMode); diff --git a/index.html b/index.html index 9f833e34..af0a1da4 100644 --- a/index.html +++ b/index.html @@ -55,16 +55,37 @@ Seconds +
Select a new Date
-
+
- + -
-
+
+
+
+ 00 + Days +
+
+ 00 + Hours +
+
+ 00 + Minutes +
+
+ 00 + Seconds +
+
+
From 530d05ec55c159f9f9a536a3b1fbfc167df81151 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Wed, 19 Jan 2022 12:09:22 +0000 Subject: [PATCH 003/220] bigtime update! (beta) so much changes, additions and deletions with more to come. styles remove old svg, add a cool sidebar, redesign ui, improve responsiveness, customizable theme + mode!, and so many more --- app.js | 12 +-- authors.html | 7 -- img/bg-light.svg | 1 - img/bg.svg | 2 +- index.html | 67 ++++++++++++--- sidebar.js | 57 +++++++++++++ styles.css | 209 ++++++++++++++++++++++++++++++++++++++++------- themes.css | 66 +++++++++++++++ 8 files changed, 364 insertions(+), 57 deletions(-) delete mode 100644 img/bg-light.svg create mode 100644 sidebar.js create mode 100644 themes.css diff --git a/app.js b/app.js index c87f4770..ad9ed9e2 100644 --- a/app.js +++ b/app.js @@ -2,10 +2,8 @@ import Clock from './clock.js' // DOM nodes -// let icon = document.getElementsByClassName("toggleMode")[0]; let icon = document.getElementById('themeToggle'); let dayCount = document.getElementById("countDay"); -// let controls = document.getElementsByClassName("button"); let startButton = document.getElementById('startButton'); let stopButton = document.getElementById('stopButton'); let body = document.body; @@ -71,12 +69,14 @@ function autoLight() { function activateLightMode() { icon.innerHTML = ``; - body.classList.toggle("light"); + if(body.classList.contains("dark")){ + body.classList.replace("dark","light");}else{body.classList.add("light");} } function activateDarkMode() { icon.innerHTML = ``; - body.classList.toggle("light"); + if(body.classList.contains("light")){ + body.classList.replace("light","dark");}else{body.classList.add("dark");} } function setMode() { @@ -112,10 +112,6 @@ autoLight(); // init events icon.addEventListener("click", setMode); icon.addEventListener("click", notifyMode); -//Prefer this -// startButton.addEventListener("click", restartTime); -// endButton.addEventListener("click", stopClock); - // service worker if('serviceWorker' in navigator){ window.addEventListener('load', () => { diff --git a/authors.html b/authors.html index 8d365788..124cadad 100644 --- a/authors.html +++ b/authors.html @@ -62,13 +62,6 @@ - -
- - - Back to clock -
-
diff --git a/img/bg-light.svg b/img/bg-light.svg deleted file mode 100644 index 7fc619ec..00000000 --- a/img/bg-light.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/img/bg.svg b/img/bg.svg index c7071a0e..7fc619ec 100644 --- a/img/bg.svg +++ b/img/bg.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index dd6d2b24..3cd5aeea 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,9 @@ Final Countdown - - + @@ -21,12 +20,61 @@ - + + +
+ + +
+ +
+
-
+
- -
- RD | Nat -
-
+ + - - \ No newline at end of file diff --git a/sidebar.js b/sidebar.js new file mode 100644 index 00000000..1fe2236d --- /dev/null +++ b/sidebar.js @@ -0,0 +1,57 @@ +// import setMode from "./app.js"; + +const $ = (selector) => document.querySelectorAll(selector); +const featureNotReady = () => { + window.location.href = "./fallback.html"; +}; +const nav = $(".nav")[0]; +const sidebar = $(".sidebar")[0]; +const sidebarItems = $(".sidebar-list-items"); +const colorIcons = $(".pick-color-ico"); +// $(".sidebar-close")[0].onclick = () => { +// sidebar.classList.replace("sidebar-show","sidebar-hide"); +// }; +nav.addEventListener("click", () => { + if (sidebar.classList.contains("sidebar-hide")) { + // sidebar.classList.remove("sidebar-hide"); + // sidebar.classList.add("sidebar-show"); + sidebar.classList.replace("sidebar-hide", "sidebar-show"); + } + // else{sidebar.classList.contains("sidebar-show")} +}); +sidebarItems[0].onclick = featureNotReady; +sidebarItems[1].onclick = featureNotReady; +sidebarItems[2].onclick = openColorPicker; +sidebarItems[3].onclick = () => { + window.location.href = "./authors.html"; +}; +sidebarItems[4].onclick = () => { + alert("Countdown timer with dark and light mode, website"); +}; + +function setTheme(event) { + document.body.dataset.theme = event.currentTarget.dataset.settheme; +} + +function openColorPicker() { + $(".pick-color")[0].classList.toggle("show-color"); +} + +colorIcons.forEach((e) => { + e.addEventListener("click", function (e) { + // alert(e); + setTheme(e); + }); +}); + +// todo: clicking outside sidebar hides it + +nav.addEventListener("click",(e)=>{ + $(".container")[0].addEventListener("click",closeSideBarListener); +}); + +const closeSideBarListener = (event)=> { + console.log(event.target); + sidebar.classList.add("sidebar-hide"); + event.currentTarget.removeEventListener("click",closeSideBarListener); +} \ No newline at end of file diff --git a/styles.css b/styles.css index c6632713..b6c0891b 100644 --- a/styles.css +++ b/styles.css @@ -9,28 +9,33 @@ } /* mode variables */ -:root { - --color-bg: #182635; +:root,.dark { + --bg-color: #182635; --color-muted: rgba(255, 255, 255, 0.15); --color-banner: #2f8bfc; --color-text: hsl(0deg, 0%, 100%); - --timer-bg: #6a7682; + --bg-timer: #6a7682; --timer-grad: rgba(255, 255, 255, 0.5); - --bg-url: url("img/bg-light.svg"); + --bg-url: url("img/bg.svg"); + --color-sidebar: whitesmoke; + --bg-sidebar: var(--color-banner); + --bg-modeToggle: #3971b7; + --bg-sidebarListHover: #3971b7; + --color-logoName: ; + --color-sidebar: white; } .light { - --color-bg: #dfdfdf; + --bg-color: #dfdfdf; --color-muted: rgba(255, 255, 255, 0.3); --color-text: rgb(0, 23, 53); --color-text: var(--color-banner); - --timer-bg: whitesmoke; + --bg-timer: whitesmoke; --timer-grad: rgba(255, 255, 255, 0.8); --timer-box: 0 0 5px 1px rgba(0, 0, 0, 0.1); - /* --bg-url: url("img/bg-light.svg"); */ } body { - background: var(--bg-url) var(--color-bg) center no-repeat; + background: var(--bg-url) var(--bg-color) center no-repeat; background-size: cover; background-blend-mode: soft-light; transition: background-color 0.2s ease, color 0.2s ease; @@ -42,6 +47,9 @@ body { main{ width: 100vw; height: 100vh; + margin-top: 10vh; + /* top: 10vh; */ + /* position: relative; */ } .container { height: 100vh; @@ -53,11 +61,6 @@ main{ overflow-x: hidden; } -.mode-row { - position: relative; - width: 100vw; -} - .mode-info { background: #05172b; border-radius: 0.3rem; @@ -69,6 +72,7 @@ main{ left: 50%; top: -10rem; transform: translateX(-50%); + z-index: 4; } .light .mode-info { @@ -95,9 +99,10 @@ main{ } } + .toggleMode { font-size: 1.4em; - position: absolute; + /* position: absolute; */ right: 0.8rem; top: 0.3rem; width: 1.5em; @@ -106,8 +111,10 @@ main{ justify-content: center; align-items: center; border-radius: 50%; - background: #3971b7; + background: var(--bg-modeToggle); color: #f2e7ac; + z-index: 1; + margin-right: 5vmin; } .banner-row { @@ -121,11 +128,12 @@ main{ } .banner { - background-color: var(--color-banner); + /* background-color: var(--color-banner); */ padding: 0.5em 1rem; border-radius: 0.3em; min-width: 80vmin; - color: white; + color: var(--color-text); + border-bottom: 0.5rem solid var(--color-banner); } .banner-h2{ /* font-style: italic; */ @@ -163,6 +171,7 @@ main{ border-radius: .7em; background: linear-gradient(90deg,var(--color-muted) 50%, var(--timer-grad) 50%); margin-bottom: 1rem; + backdrop-filter: blur(1px); } .light .timer{ border: 2px solid rgba(255, 255, 255, 0.7); @@ -175,7 +184,7 @@ main{ content: ""; position: absolute; bottom: -1em; - background: var(--timer-bg); + background: var(--bg-timer); border-radius: 0.3em; padding: .5em; text-align: center; @@ -222,9 +231,9 @@ main{ } .author{ - position: absolute; + /* position: absolute; bottom: 15px; - left: 20px; + left: 20px; */ font-size: 0.7em; color: var(--color-text) } @@ -253,6 +262,150 @@ main{ filter: hue-rotate(80deg); } } +.header{ + position: fixed; + top: 0; + background: var(--color-banner); + width: 100vw; + height: 10vh; + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; +} +.logo{ + display: inline-flex; + gap: 1rem; + height: 7vh; +} +.logo-name{ + text-align: center; + font-size: 2rem; + color: var(--color-sidebar); + /* margin-left: 1rem; incase logo gap doesn't work on mobile browsers */ +} +.logo-ico img{ + width: 7vh; + height: 7vh; + border-radius: 0.9rem; +} +.sidebar{ + position: fixed; + top: 0; + left: -100%; + z-index: 3; + width: 65vmin; + height: 100vh; + /* background: var(--color-banner); */ + background: var(--bg-sidebar); + color: var(--color-sidebar); + box-shadow: var(--timer-box); + overflow: hidden; + /* animation: sidebar 1.5s ease-in ; */ + transition: left .02s ease-in; + backdrop-filter: blur(1px); +} +.sidebar-content{ + display: flex; + justify-content: start; + align-items: flex-start; + flex-direction: column; + width: 100%; + height: 100%; + /* padding: 5vmin 0 0 5vmin; */ + margin-left: 5vmin; +} +.sidebar-show{ + left: 0%; +} +.sidebar-hide{ + left: -100%; +} +.nav,.sidebar-close{ + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.3rem 0.4rem; + /* position: absolute; */ + border-radius: 1vmin; + border: 0.13rem solid white; +} +.sidebar-close{ + right: 0%; + position: absolute; +} +.nav{ + /* left: 2%; */ + width: 6vh; + height: 6vh; + color: var(--color-sidebar); + margin-left: 5vmin; +} +.brand{ + display: flex; + width: 100%; + margin: 3vmin 0 3vmin 4vmin; +} +.brand-name{ + align-self: center; + font-size: 1.3em; + margin-left: 2vmin; +} +.brand-logo img{ + width: 13vmin; + height: 13vmin; + border-radius: 5vmin; +} +.opt-group{ + color: rgba(255, 255, 255, 0.575); + font-size: 0.7rem; + align-self: center; + width: 90%; + margin: 5vmin 0 1vmin 0vmin; +} +hr{color:rgba(255, 255, 255, 0.2); width: 85%;} +.sidebar-list{ + width: 90%; +} +.sidebar-list-items{ + padding: 2.5vmin 0vmin 2.5vmin 4vmin; + border-radius: 2.5vmin; +} +.sidebar-list-items:hover{ + background: var(--bg-sidebarListHover); +} +.pick-color{ + justify-content: center; + align-items: flex-end; + gap: 0.4rem; + display: none; + width: 80%; + margin: 0.7rem; +} +.pick-color-ico{ + width: 1.8rem; + height: 1.8rem; + border-radius: 50%; + box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.205); +} +.pick-color-ico:nth-child(1){ + background: crimson; +} +.pick-color-ico:nth-child(2){ + background: rgb(255, 141, 160); +} +.pick-color-ico:nth-child(3){ + background: rgb(47, 255, 99); +} +.pick-color-ico:nth-child(4){ + background: midnightblue; +} +.pick-color-ico:nth-child(5){ + background: yellow; +} +.show-color{ + display: inline-flex; +} /* desktop */ @media screen and (min-width: 750px) and (orientation: landscape) { body { @@ -278,24 +431,24 @@ main{ gap: 4em; } } -/* mid-range */ -/* @media screen and (min-width: 415px) { - .banner{ - width: 90vmin; - } -} */ /* mobile and small screens */ @media screen and (max-width: 415px) { - .banner{ + /* .banner{ font-size: 1.1rem; width: 100%; border-top-right-radius: 0; border-top-left-radius: 0; - } + } .container { gap: 0; + } */ + .logo-name{ + display: none; } .timer-text{ font-size: 0.75rem; } + .sidebar{ + width: 85vmin; + } } \ No newline at end of file diff --git a/themes.css b/themes.css new file mode 100644 index 00000000..2f02cbb8 --- /dev/null +++ b/themes.css @@ -0,0 +1,66 @@ +[data-theme="blue"]{ + --color-banner: #2f8bfc; + --color-text: rgb(0, 23, 53); + --color-text: var(--color-banner); + --bg-modeToggle: #3971b7; + --bg-sidebar: rgba(47, 139, 252, 0.95); + --bg-sidebarListHover: #3971b7; +} +.dark[data-theme="blue"]{ + --bg-color: #182635; + --color-text: white; + --bg-timer: #6a7682; +} +[data-theme="green"]{ + --color-banner: #2ffc5b; + --color-text: rgb(9, 53, 0); + --color-text: var(--color-banner); + --bg-modeToggle: #39b75f; + --bg-sidebar: #2ffc5bf2; + --bg-sidebarListHover: #39b758; +} +.dark[data-theme="green"]{ + --bg-color: #353518; + --color-text: white; + --bg-timer: #6a826b; +} +[data-theme="red"]{ + --color-banner: #fc2f40; + --color-text: rgb(53, 0, 0); + --color-text: var(--color-banner); + --bg-modeToggle: #b73939; + --bg-sidebar: rgba(252, 47, 64, 0.95); + --bg-sidebarListHover: #b73939; +} +.dark[data-theme="red"]{ + --bg-color: #351818; + --color-text: white; + --bg-timer: #826a6a; +} +[data-theme="pink"]{ + --color-banner: #fc2fa0; + --color-text: rgb(53, 0, 31); + --color-text: var(--color-banner); + --bg-modeToggle: #b739b7; + --bg-sidebar: rgba(252, 47, 160, 0.95); + --bg-sidebarListHover: #b739b7; +} +.dark[data-theme="pink"]{ + --bg-color: #351827; + --color-text: white; + --bg-timer: #816a82; +} +[data-theme="yellow"]{ + --color-banner: #fcf92f; + --color-text: rgb(53, 48, 0); + --color-text: var(--color-banner); + --bg-modeToggle: #b7af39; + --bg-sidebar: rgba(252, 238, 47, 0.95); + --bg-sidebarListHover: #b7b539; +} +.dark[data-theme="yellow"]{ + --bg-color: #353518; + --color-text: white; + --bg-timer: #80826a; +} + From 5167636b06a249bf7f1fadf8957fa258e3abf7dd Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 19 Jan 2022 21:47:54 +0000 Subject: [PATCH 004/220] fixed undefined date if date is empty --- app.js | 57 ++++++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/app.js b/app.js index f9edb6b7..61df5cfc 100644 --- a/app.js +++ b/app.js @@ -110,43 +110,46 @@ function notifyMode() { } } +//todo: find a better way of checking for a valid date function listenForDate(){ - dateInput.addEventListener('change', function(){ const input = this.value; - console.log(input); - customClock = new Clock(new Date(input)); - console.log(customClock); - let dayNumber =document.getElementById('day-custom'); - let hourNumber =document.getElementById("hour-custom"); - let minNumber =document.getElementById("min-custom"); - let secNumber =document.getElementById("sec-custom"); - let customRow =document.getElementById("customDisplay"); - customRow.style.display= 'block'; - - let d = customClock.days - let h = customClock.hours - let m = customClock.minutes - let s = customClock.seconds - console.log(d, h, m, s); - d= addZeros(d); - h = addZeros(h); - m = addZeros(m); - s = addZeros(s); - console.log(d, h, m, s); - dayNumber.innerHTML = `${d}`; - hourNumber.innerHTML = `${h}`; - minNumber.innerHTML = `${m}`; - secNumber.innerHTML = `${s}`; + // console.log(input, 'run'); + if(input != ''){ + customClock = new Clock(new Date(input)); + console.log(customClock); + let dayNumber =document.getElementById('day-custom'); + let hourNumber =document.getElementById("hour-custom"); + let minNumber =document.getElementById("min-custom"); + let secNumber =document.getElementById("sec-custom"); + let customRow =document.getElementById("customDisplay"); + customRow.style.display= 'block'; + + let d = customClock.days + let h = customClock.hours + let m = customClock.minutes + let s = customClock.seconds + console.log(d, h, m, s); + d= addZeros(d); + h = addZeros(h); + m = addZeros(m); + s = addZeros(s); + console.log(d, h, m, s); + dayNumber.innerHTML = `${d}`; + hourNumber.innerHTML = `${h}`; + minNumber.innerHTML = `${m}`; + secNumber.innerHTML = `${s}`; +} + // console.log(); - }) } startClock(); autoLight(); -listenForDate(); +// listenForDate(); // init events icon.addEventListener("click", setMode); icon.addEventListener("click", notifyMode); +dateInput.addEventListener('change', listenForDate); //Prefer this // startButton.addEventListener("click", restartTime); // endButton.addEventListener("click", stopClock); From 803bf2308284e952541b61799fdbc4abd5df38fa Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 19 Jan 2022 22:06:35 +0000 Subject: [PATCH 005/220] refactor displayClock to accept a clock object --- app.js | 118 ++++++++++++++++++++++++++++++++------------------------- 1 file changed, 67 insertions(+), 51 deletions(-) diff --git a/app.js b/app.js index 61df5cfc..bbaab1e6 100644 --- a/app.js +++ b/app.js @@ -28,29 +28,11 @@ function startClock() { function startTime() { myclock.countDown(); - let d = myclock.days - let h = myclock.hours - let m = myclock.minutes - let s = myclock.seconds - d= addZeros(d); - h = addZeros(h); - m = addZeros(m); - s = addZeros(s); - dayNumber.innerHTML = `${d}`; - hourNumber.innerHTML = `${h}`; - minNumber.innerHTML = `${m}`; - secNumber.innerHTML = `${s}`; + displayClock(myclock, dayNumber, hourNumber, minNumber, secNumber); dayCount.innerHTML= myclock.countDays(); clockMovement = true; } -// function restartTime() { -// if (clockMovement) { -// return; -// } else { -// startClock(); -// } -// } // add zero in front of numbers < 10 function addZeros(time) { if (time < 10) { @@ -59,6 +41,72 @@ function addZeros(time) { return time; } +function displayClock(counter, dayDisplay, hourDisplay, minDisplay, secDisplay){ + let d = counter.days + let h = counter.hours + let m = counter.minutes + let s = counter.seconds + d= addZeros(d); + h = addZeros(h); + m = addZeros(m); + s = addZeros(s); + + dayDisplay.innerHTML = `${d}`; + hourDisplay.innerHTML = `${h}`; + minDisplay.innerHTML = `${m}`; + secDisplay.innerHTML = `${s}`; +} + + + +//todo: find a better way of checking for a valid date +/** + * Listens for a user input for date element + */ +function listenForDate(){ + const input = this.value; + // console.log(input, 'run'); + if(input != ''){ + customClock = new Clock(new Date(input)); + // console.log(customClock); + const dayNumber =document.getElementById('day-custom'); + const hourNumber =document.getElementById("hour-custom"); + const minNumber =document.getElementById("min-custom"); + const secNumber =document.getElementById("sec-custom"); + + // let customRow =document.getElementById("customDisplay"); + // show row + // customRow.style.display= 'block'; + displayClock(customClock, dayNumber, hourNumber, minNumber, secNumber); + console.log('problem'); + // let d = customClock.days + // let h = customClock.hours + // let m = customClock.minutes + // let s = customClock.seconds + // console.log(d, h, m, s); + // d= addZeros(d); + // h = addZeros(h); + // m = addZeros(m); + // s = addZeros(s); + // console.log(d, h, m, s); + // dayNumber.innerHTML = `${d}`; + // hourNumber.innerHTML = `${h}`; + // minNumber.innerHTML = `${m}`; + // secNumber.innerHTML = `${s}`; + } +} +/* restart the clock +function restartTime() { + if (clockMovement) { + return; + } else { + startClock(); + } +} +*/ + + + function stopClock() { clearTimeout(intervalID); clockMovement = false; @@ -110,39 +158,7 @@ function notifyMode() { } } -//todo: find a better way of checking for a valid date -function listenForDate(){ - const input = this.value; - // console.log(input, 'run'); - if(input != ''){ - customClock = new Clock(new Date(input)); - console.log(customClock); - let dayNumber =document.getElementById('day-custom'); - let hourNumber =document.getElementById("hour-custom"); - let minNumber =document.getElementById("min-custom"); - let secNumber =document.getElementById("sec-custom"); - let customRow =document.getElementById("customDisplay"); - customRow.style.display= 'block'; - - let d = customClock.days - let h = customClock.hours - let m = customClock.minutes - let s = customClock.seconds - console.log(d, h, m, s); - d= addZeros(d); - h = addZeros(h); - m = addZeros(m); - s = addZeros(s); - console.log(d, h, m, s); - dayNumber.innerHTML = `${d}`; - hourNumber.innerHTML = `${h}`; - minNumber.innerHTML = `${m}`; - secNumber.innerHTML = `${s}`; -} - - // console.log(); -} startClock(); autoLight(); // listenForDate(); From c00f697576397c799c9762a207cc3a13ce856fc2 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 19 Jan 2022 22:17:03 +0000 Subject: [PATCH 006/220] Added countdown functionality to custom clock --- app.js | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/app.js b/app.js index bbaab1e6..6f5d4ef3 100644 --- a/app.js +++ b/app.js @@ -14,9 +14,14 @@ let hourNumber =document.getElementById("hour-num"); let minNumber =document.getElementById("min-num"); let secNumber =document.getElementById("sec-num"); let dateInput = document.getElementById('customDate') + +const customDayNumber =document.getElementById('day-custom'); +const customHourNumber =document.getElementById("hour-custom"); +const customMinNumber =document.getElementById("min-custom"); +const customSecNumber =document.getElementById("sec-custom"); //to stop the clock let intervalID; -let clockMovement = false; +let customClockMovement = false; // Initialize Clock class var myclock = new Clock(); @@ -27,10 +32,15 @@ function startClock() { } function startTime() { - myclock.countDown(); + // myclock.countDown(); + displayClock(myclock, dayNumber, hourNumber, minNumber, secNumber); dayCount.innerHTML= myclock.countDays(); - clockMovement = true; + if(customClockMovement){ + // customClock.countDown(); + displayClock(customClock, customDayNumber, customHourNumber, customMinNumber, customSecNumber); + } + } // add zero in front of numbers < 10 @@ -42,6 +52,7 @@ function addZeros(time) { } function displayClock(counter, dayDisplay, hourDisplay, minDisplay, secDisplay){ + counter.countDown(); let d = counter.days let h = counter.hours let m = counter.minutes @@ -68,17 +79,12 @@ function listenForDate(){ // console.log(input, 'run'); if(input != ''){ customClock = new Clock(new Date(input)); - // console.log(customClock); - const dayNumber =document.getElementById('day-custom'); - const hourNumber =document.getElementById("hour-custom"); - const minNumber =document.getElementById("min-custom"); - const secNumber =document.getElementById("sec-custom"); // let customRow =document.getElementById("customDisplay"); // show row // customRow.style.display= 'block'; - displayClock(customClock, dayNumber, hourNumber, minNumber, secNumber); - console.log('problem'); + customClockMovement = true; + // let d = customClock.days // let h = customClock.hours // let m = customClock.minutes @@ -97,7 +103,7 @@ function listenForDate(){ } /* restart the clock function restartTime() { - if (clockMovement) { + if (customClockMovement) { return; } else { startClock(); @@ -109,7 +115,7 @@ function restartTime() { function stopClock() { clearTimeout(intervalID); - clockMovement = false; + customClockMovement = false; } //light mode if after 6am and after 18:00 evening From 32517d71b43398548d6d5e53e72e87dbcd789b2b Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 19 Jan 2022 22:21:12 +0000 Subject: [PATCH 007/220] use const instead of let in unchanging vars --- app.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/app.js b/app.js index 6f5d4ef3..dd5a1b39 100644 --- a/app.js +++ b/app.js @@ -2,18 +2,17 @@ import Clock from './clock.js' // DOM nodes -// let icon = document.getElementsByClassName("toggleMode")[0]; let icon = document.getElementById('themeToggle'); let dayCount = document.getElementById("countDay"); // let controls = document.getElementsByClassName("button"); // let startButton = document.getElementById('startButton'); // let stopButton = document.getElementById('stopButton'); -let body = document.body; -let dayNumber =document.getElementById('day-num'); -let hourNumber =document.getElementById("hour-num"); -let minNumber =document.getElementById("min-num"); -let secNumber =document.getElementById("sec-num"); -let dateInput = document.getElementById('customDate') +const body = document.body; +const dayNumber =document.getElementById('day-num'); +const hourNumber =document.getElementById("hour-num"); +const minNumber =document.getElementById("min-num"); +const secNumber =document.getElementById("sec-num"); +const dateInput = document.getElementById('customDate') const customDayNumber =document.getElementById('day-custom'); const customHourNumber =document.getElementById("hour-custom"); @@ -32,15 +31,11 @@ function startClock() { } function startTime() { - // myclock.countDown(); - displayClock(myclock, dayNumber, hourNumber, minNumber, secNumber); dayCount.innerHTML= myclock.countDays(); if(customClockMovement){ - // customClock.countDown(); displayClock(customClock, customDayNumber, customHourNumber, customMinNumber, customSecNumber); } - } // add zero in front of numbers < 10 From bcf3056ef88f75e99686a526b5ac424178c5f0ca Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 19 Jan 2022 22:26:57 +0000 Subject: [PATCH 008/220] change custom date to hidden at start --- app.js | 30 ++++++------------------------ styles.css | 3 +++ 2 files changed, 9 insertions(+), 24 deletions(-) diff --git a/app.js b/app.js index dd5a1b39..ee58efdf 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,3 @@ -// require('./clock') import Clock from './clock.js' // DOM nodes @@ -22,7 +21,7 @@ const customSecNumber =document.getElementById("sec-custom"); let intervalID; let customClockMovement = false; -// Initialize Clock class +// Initialize default Clock class var myclock = new Clock(); var customClock; @@ -75,28 +74,13 @@ function listenForDate(){ if(input != ''){ customClock = new Clock(new Date(input)); - // let customRow =document.getElementById("customDisplay"); + let customRow =document.getElementById("customDisplay"); // show row - // customRow.style.display= 'block'; + customRow.style.display= 'block'; customClockMovement = true; - - // let d = customClock.days - // let h = customClock.hours - // let m = customClock.minutes - // let s = customClock.seconds - // console.log(d, h, m, s); - // d= addZeros(d); - // h = addZeros(h); - // m = addZeros(m); - // s = addZeros(s); - // console.log(d, h, m, s); - // dayNumber.innerHTML = `${d}`; - // hourNumber.innerHTML = `${h}`; - // minNumber.innerHTML = `${m}`; - // secNumber.innerHTML = `${s}`; } } -/* restart the clock +/* //restart the clock function restartTime() { if (customClockMovement) { return; @@ -104,15 +88,13 @@ function restartTime() { startClock(); } } -*/ - - +//stop the clock function stopClock() { clearTimeout(intervalID); customClockMovement = false; } - +*/ //light mode if after 6am and after 18:00 evening function autoLight() { let h = new Date().getHours(); diff --git a/styles.css b/styles.css index 7fc8c3a5..80e62dcc 100644 --- a/styles.css +++ b/styles.css @@ -29,6 +29,9 @@ /* --bg-url: url("img/bg-light.svg"); */ } +#customDisplay{ + display: none; +} body { background: var(--bg-url) var(--color-bg) center no-repeat; background-size: cover; From 3471fc95515532cbe92dd75c5b4954d595454b8e Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Wed, 19 Jan 2022 22:28:16 +0000 Subject: [PATCH 009/220] added explanatory comment --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 80e62dcc..bd0462ed 100644 --- a/styles.css +++ b/styles.css @@ -28,7 +28,7 @@ --timer-box: 0 0 5px 1px rgba(0, 0, 0, 0.1); /* --bg-url: url("img/bg-light.svg"); */ } - +/* hide the custom clock at start */ #customDisplay{ display: none; } From 741c57595b7a88a425ab02da8d70affc4a11a425 Mon Sep 17 00:00:00 2001 From: Rdjarbeng Date: Sat, 22 Jan 2022 22:56:37 +0000 Subject: [PATCH 010/220] added count up effect function --- app.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app.js b/app.js index ee58efdf..7e2549ef 100644 --- a/app.js +++ b/app.js @@ -141,6 +141,17 @@ function notifyMode() { } } +function increaseInSteps(max, speed =50, start_num =0, domElement){ + let timer = setInterval(() => { + if(start_num < max){ + start_num++; + domElement.innerHTML = start_num; + }else{ + clearInterval(timer) + } + }, speed); +} + // console.log(); startClock(); autoLight(); From 3518bc7c1545670770644b5d8c3cf2bba803d676 Mon Sep 17 00:00:00 2001 From: Nathaniel <73431750+nyakotey@users.noreply.github.com> Date: Sun, 23 Jan 2022 14:33:02 +0000 Subject: [PATCH 011/220] enhance theme colors ui improvements --- index.html | 4 +-- styles.css | 39 ++++++++++++++------- themes.css | 99 +++++++++++++++++++++++++++--------------------------- 3 files changed, 77 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 3cd5aeea..9e7c2b8b 100644 --- a/index.html +++ b/index.html @@ -44,10 +44,10 @@
- + - +