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 @@
-
Day X / 365
+
Day X / 365
CountDown to New Year
-
+
@@ -55,17 +55,23 @@
Seconds
-
+
-
- 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
+
+
+
+
+ 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
-
-
+
+
+