javascriptProjectCountdown/script.js at master · jthinlay/javascriptProjectCountdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
constinputContainer=document.getElementById('input-container');
constcountdownForm=document.getElementById('countdownForm');
constdateEl=document.getElementById('date-picker');

constcountdownElTitle=document.getElementById('countdown-title');
constcountdownEl=document.getElementById('countdown');
constcountdownBtn=document.getElementById('reset-button');
consttimeElements=document.querySelectorAll('span');

constcompleteEl=document.getElementById('complete');
constcompleteElInfo=document.getElementById('complete-info');
constcompleteBtn=document.getElementById('complete-button');

letcountdownTitle='';
letcountdownDate='';
letcountdownValue=newDate();
letcountdownActive;
letsavedCountdown;

constsecond=1000;
constminute=second*60;
consthour=minute*60;
constday=hour*24;

// Set Date Input Min with Today's Date
consttoday=newDate().toISOString().split('T')[0];
dateEl.setAttribute('min',today);

// Populate Countdown / Complete UI
functionupdateDOM(){
countdownActive=setInterval(()=>{
constnow=newDate().getTime();
constdistance=countdownValue-now;

constdays=Math.floor(distance/day);
consthours=Math.floor((distance%day)/hour);
constminutes=Math.floor((distance%hour)/minute);
constseconds=Math.floor((distance%minute)/second);

// Hide Input
inputContainer.hidden=true;

// If the countdown has finished, show complete
if(distance<0){
countdownEl.hidden=true;
clearInterval(countdownActive);
completeElInfo.textContent=`${countdownTitle} finished on ${countdownDate}`;
completeEl.hidden=false;
}else{
// Else, show the countdown in progress
// Populate Countdown
countdownElTitle.textContent=`${countdownTitle}`;
timeElements[0].textContent=`${days}`;
timeElements[1].textContent=`${hours}`;
timeElements[2].textContent=`${minutes}`;
timeElements[3].textContent=`${seconds}`;
completeEl.hidden=true;
countdownEl.hidden=false;
}
},second);
};

// Take Values from Form Input
functionupdateCountdown(e){
e.preventDefault();
countdownTitle=e.srcElement[0].value;
countdownDate=e.srcElement[1].value;
savedCountdown={
title: countdownTitle,
date: countdownDate,
};
if(savedCountdown.title===""){
localStorage.removeItem('countdown');
}else{
localStorage.setItem('countdown',JSON.stringify(savedCountdown));
}
// Check for valid date
if(countdownDate===''){
alert("Please select a countdown date!")
}else{
// Get number version of current Date, updateDOM
countdownValue=newDate(countdownDate).getTime();
letcountdownDay=(countdownValue/24)/60;
updateDOM();
}
}

// Reset All Values
functionreset(){
// Hide Countdown, show Input
countdownEl.hidden=true;
// Hide complete
completeEl.hidden=true;
// // Show Input
inputContainer.hidden=false;
// Stop the countdown
clearInterval(countdownActive);
// Rset values
countdownTitle='';
countdownDate='';
localStorage.removeItem('countdown');
}

functionrestorePreviousCountdown(){
// Get countdown from localstorage if available
if(localStorage.getItem('countdown')){
inputContainer.hidden=true;
savedCountdown=JSON.parse(localStorage.getItem('countdown'));
countdownTitle=savedCountdown.title;
countdownDate=savedCountdown.date;
countdownValue=newDate(countdownDate).getTime();
updateDOM();
}
}

// Event Listeners
countdownForm.addEventListener('submit',updateCountdown);
countdownBtn.addEventListener('click',reset);
completeBtn.addEventListener('click',reset);

// On Load, check localstorage
restorePreviousCountdown();