-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
115 lines (101 loc) · 3.82 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
115
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 timeElement = document.querySelectorAll('span');
const countdownBtn = document.getElementById('countdown-button');
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;
// Set date input min with today's date
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 the countdown has ended, 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
countdownElTitle.textContent = countdownTitle;
timeElement[0].textContent = `${days}`;
timeElement[1].textContent = `${hours}`;
timeElement[2].textContent = `${minutes}`;
timeElement[3].textContent = `${seconds}`;
completeEl.hidden = true;
countdownEl.hidden = false;
}
}, second);
}
// Take values from form input
function updateCountdown(event) {
event.preventDefault();
countdownTitle = event.target[0].value;
countdownDate = event.target[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, update DOM
countdownValue = new Date(countdownDate).getTime();
updateDOM();
}
}
// Reset all values
function reset() {
// Hide countdowns & complete, show input
countdownEl.hidden = true;
completeEl.hidden = true;
inputContainer.hidden = false;
// Stop the countdown
clearInterval(countdownActive);
// Reset values
countdownForm.setAttribute('type', 'reset');
// countdownTitle.value = '';
// countdownDate.value = '';
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 listener
countdownForm.addEventListener('submit', updateCountdown);
countdownBtn.addEventListener('click', reset);
completeBtn.addEventListener('click', reset);
// On load, check localStorage
restorePreviousCountdown();