-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
114 lines (98 loc) · 3.45 KB
/
script.js
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
const inputContainer = document.getElementById('input-container');
const countdownForm = document.getElementById('countdownForm');
const dateEl = document.getElementById('date-picker');
const countdownEl = document.getElementById('countdown');
const countdownElTitle = document.getElementById('countdown-title');
const countdownBtn = document.getElementById('countdown-button');
const timeElements = document.querySelectorAll('span');
const completeEl = document.getElementById('complete');
const completeElInfo = document.getElementById('complete-info');
const completeBtn = document.getElementById('complete-button');
let countdownTitle = '';
let countdownDate = '';
let countdownValue = new Date();
let countdownActive;
let savedCountdown;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const today = new Date().toISOString().split('T')[0];
dateEl.setAttribute('min', today);
// Populate Countdown / Complete UI
function updateDOM() {
countdownActive = setInterval(() => {
const now = new Date().getTime();
const distance = countdownValue - now;
const days = Math.floor(distance / day);
const hours = Math.floor((distance % day) / hour);
const minutes = Math.floor((distance % hour) / minute);
const seconds = Math.floor((distance % minute) / second);
// Hide Input
inputContainer.hidden = true;
if (distance < 0) {
countdownEl.hidden = true;
clearInterval(countdownActive);
completeElInfo.textContent = `${countdownTitle} finished on ${countdownDate}`;
completeEl.hidden = false;
} else {
// Else, show the countdown in progress
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
function updateCountdown(e) {
e.preventDefault();
countdownTitle = e.srcElement[0].value;
countdownDate = e.srcElement[1].value;
savedCountdown = {
title: countdownTitle,
date: countdownDate,
};
localStorage.setItem('countdown', JSON.stringify(savedCountdown));
// Check for valid date
if (countdownDate === '') {
alert('Please select a date for the countdown.');
} else {
// Get number version of current Date, updateDOM
countdownValue = new Date(countdownDate).getTime();
updateDOM();
}
}
// Reset All Values
function reset() {
// Hide Countdowns, show Input
countdownEl.hidden = true;
completeEl.hidden = true;
inputContainer.hidden = false;
// Stop the countdown
clearInterval(countdownActive);
// Reset values
countdownTitle = '';
countdownDate = '';
localStorage.removeItem('countdown');
}
function restorePreviousCountdown() {
// 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 = new Date(countdownDate).getTime();
updateDOM();
}
}
// Event Listeners
countdownForm.addEventListener('submit', updateCountdown);
countdownBtn.addEventListener('click', reset);
completeBtn.addEventListener('click', reset);
// On Load, check localStorage
restorePreviousCountdown();