Whatsapp share functionality and minor changes

app.js

@@ -1,5 +1,69 @@
-import Clock, { NewYearClock } from './clock.js'
-// import { NewYearClock } from './clock.js'
+// import Clock, { NewYearClock } from './clock.js'
+// // import { NewYearClock } from './clock.js'
+  class Clock {
+    constructor(endDate) {
+        // expecting a date object
+        this.setEndDate(endDate)
+        this.countDown();
+    }
+
+    setEndDate(endDate) {
+        //set endDate to end of year
+        // todo: check endDate for validity as date
+        this.endDate = endDate ||new Date(`Jan 1, ${new Date().getFullYear() + 1} 00:00:00`)
+
+
+    }
+    countDown() {
+        // Set the date we're counting down to
+        let countDownDate = this.endDate.getTime();
+        let now = new Date().getTime();
+        var distance = countDownDate - now;
+        // account for case of the countdown being reached, reset
+        if (distance >= 0) {
+            // Time calculations for days, hours, minutes and seconds
+            this.calculateTimeValues(distance)
+        } else {
+            //reset to end of year
+            // this.setEndDate()
+            //todo: Countup from the deadline date
+            // this.calculateTimeValues(Math.abs(distance));
+
+            // clear date values
+            this.resetMethod();
+
+
+        }
+    }
+
+    resetMethod(){
+        this.clearCounter();
+    }
+
+    calculateTimeValues(distance){
+        this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
+            this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+            this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
+    }
+    countDays() {
+        //account for leap year
+        this.dayLength = ((this.endDate.getFullYear() % 4 != 0) ? 365 : 366)
+        return this.dayLength - this.days
+    }
+
+    clearCounter(){
+        this.days=this.hours=this.minutes=this.seconds=0;
+    }
+}
+
+class NewYearClock extends Clock{
+    resetMethod(){
+        //reset to New Year's for default 
+        this.setEndDate()
+        console.log(this.endDate)
+    }
+}
 
 // DOM nodes
 let icon = document.getElementById('themeToggle');
@@ -10,16 +74,16 @@ const animatedCountDuration = 800;
 // let startButton = document.getElementById('startButton');
 // let stopButton = document.getElementById('stopButton');
 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");
+var dayNumber = document.getElementById('day-num');
+var hourNumber = document.getElementById("hour-num");
+var minNumber = document.getElementById("min-num");
+var secNumber = document.getElementById("sec-num");
 // const 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");
+// 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;
@@ -30,36 +94,37 @@ let dayClock = new NewYearClock();
 
 // Initialize default Clock class
 // var myclock = new NewYearClock();
-var myclock = await setMainClock();
+var myclock =  setMainClock();
 var customClock;
 
-async function setMainClock(){
-    let mainclock = localStorage.getItem('mainClock');
-    if(mainclock !== null && mainclock != undefined){ //countdown set to main
-     mainclock = JSON.parse(mainclock)
-     myclock = new Clock(new Date(mainclock.date));
-     setMainText(mainclock.text)
+function setMainClock() {
+    let mainclock =  localStorage.getItem('mainClock');
+    if (mainclock !== null && mainclock != undefined) { //countdown set to main
+        mainclock = JSON.parse(mainclock)
+        myclock = new Clock(new Date(mainclock.date));
+        setMainText(mainclock.text)
     }
 
-    return myclock|| new NewYearClock();
+    return myclock || new NewYearClock();
 
 }
 
-function setMainText(countdownText){
+function setMainText(countdownText) {
     const textDisplay = document.getElementById('countdown-text');
     textDisplay.innerText = countdownText;
 }
 
-export async function waitForAnimation(clock, domElements, duration) {
-    await stepIncreaseAndStart(clock || myclock, domElements, duration||animatedCountDuration)
+ async function waitForAnimation(clock, domElements, duration) {
+    await stepIncreaseAndStart(clock || myclock, domElements, duration || animatedCountDuration)
     startClock(clock || myclock, domElements);
 }
 
 function startClock(clock, { dayNumber, hourNumber, minNumber, secNumber }) {
-    intervalID = setInterval(() => { startTime(clock, { dayNumber, hourNumber, minNumber, secNumber }) }, 500);
+    intervalID = setInterval(() => {  startTime(clock, { dayNumber, hourNumber, minNumber, secNumber });  }, 500);
 }
 
 function startTime(clock, { dayNumber, hourNumber, minNumber, secNumber }) {
+    // console.log(clock);
     updateDisplay(clock, dayNumber, hourNumber, minNumber, secNumber);
     if (dayCount) dayCount.innerHTML = dayClock.countDays();
     if (customClockMovement) {
@@ -126,7 +191,7 @@ function restartTime() {
 }
 */
 //stop the clock
-export function stopClock() {
+ function stopClock() {
     clearTimeout(intervalID);
     customClockMovement = false;
 }
@@ -167,6 +232,12 @@ function notifyMode() {
         notifyText = "Dark mode set";
     }
 
+    notifyUser(notifyText);
+}
+
+ function notifyUser(message) {
+    let notifyText = message;
+
     if (document.getElementsByClassName("mode-info")[0]) {
         document.getElementsByClassName("mode-info")[0].remove();
         body.insertAdjacentHTML(
@@ -181,6 +252,9 @@ function notifyMode() {
     }
 }
 
+
+
+
 //for the animated Countdown
 function animateValue(obj, start, end, duration) {
     let startTimestamp = null;
@@ -207,16 +281,31 @@ async function stepIncreaseAndStart(clockElement, domElements, speed = 50, start
 function addEventListeners() {
     icon.addEventListener("click", setMode);
     icon.addEventListener("click", notifyMode);
+    let whatsappIcon = document.getElementById('sendWhatsappButton');
+    if (whatsappIcon) {
+        whatsappIcon.addEventListener('click', exportToWhatsapp);
+    }
+
 }
 
+function exportToWhatsapp() {
+    let dayNum = dayCount.innerText;
+    window.open(`whatsapp://send?text= Day ${dayNum || 'rcountdown'}/365`);
+}
+
+function setInnerHtmlForNotNull(element, value){
+    if(element)//check for null
+        element.innerHTML = value;
+}
 //show day value before animation runs
 if (dayCount)
-  dayCount.innerHTML = dayClock.countDays();
+    dayCount.innerHTML = dayClock.countDays();
 
 // startTime();
 waitForAnimation(myclock, { dayNumber, hourNumber, minNumber, secNumber }, animatedCountDuration);
 addEventListeners();
 autoLight();
+console.log(myclock);
 // init events
 
 

authors.html

@@ -6,9 +6,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="A countdown app and day of year counter with light and dark mode auto functionality">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="themes.css">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></noscript>
     <link rel="manifest" href="/manifest.json">
     <title>Final Countdown </title>
     <link href="img/icons/favicon.png" rel="icon">

clock.js

@@ -40,6 +40,8 @@ export default class Clock {
 
     calculateTimeValues(distance){
         this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        this.years = Math.floor(this.days / this.dayLength);
+        this.days = this.days%this.dayLength
             this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
             this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
             this.seconds = Math.floor((distance % (1000 * 60)) / 1000);

countdown-list.css

@@ -54,15 +54,16 @@ body {
   color: var(--color-text);
   font-family: "Nunito", sans-serif;
   width: 100vw;
-  /* height: 100vh; */
+  height: 100vh;
 }
 main{
   width: 100vw;
-  /* height: 100vh; */
-  margin-top: 10vh;
+  height: 100%;
+  padding-top: 10vh;
+  padding-bottom: 10vh;
 }
 .container {
-  /* height: 100vh; */
+  height: 100%;
   width: 100vw;
   display: flex;
   align-items: center;

countdown-list.html

@@ -10,15 +10,16 @@
     <title>Final Countdown</title>
     <link href="img/icons/favicon.png" rel="icon">
     <meta name="Author" content="R.Djarbeng| A.Nyakotey">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="countdown-list.css">
     <link rel="stylesheet" href="themes.css">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></noscript>
     <link rel="manifest" href="manifest.json">
     <!-- ios support -->
     <link rel="apple-touch-icon" href="img/icons/favicon.png">
     <meta name="apple-mobile-web-app-status-bar" content="#7b68ee">
     <meta name="theme-color" content="#7b68ee">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="grey">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="gray">
     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#7b68ee">
 </head>
 
@@ -108,11 +109,11 @@
     </main>
     <div class="new-item"><i class="fas fa-plus fa-lg"></i></div>
 
-    <script type="module" src="app.js"></script>
+    <script  src="app.js"></script>
     <script src="sidebar.js"></script>
     <script src="loadCustomUI.js"></script>
-    <script src="form.js" type="module" ></script>
-    <script type="module" src="displayCountdowns.js"></script>
+    <script src="form.js"></script>
+    <script src="displayCountdowns.js"></script>
 </body>
 
 </html>