-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
129 lines (105 loc) · 3.23 KB
/
index.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const date = new Date();
date.setDate(date.getDate() + 14);
function getCardElements(card) {
const cardElementTop = card.querySelector('.card-element__top');
const cardElementBottom = card.querySelector('.card-element__bottom');
const cardElementFlip = card.querySelector('.card-element-flip');
const cardElementFlipTop = card.querySelector('.card-element-flip__top');
const cardElementFlipBottom = card.querySelector('.card-element-flip__bottom');
return {
cardElementTop,
cardElementBottom,
cardElementFlip,
cardElementFlipTop,
cardElementFlipBottom
};
}
function updateCardValues(
cardElement,
cardElementFlip,
value
) {
cardElement.textContent = value;
cardElementFlip.textContent = value;
}
function updateDateElement(cardElement, cardElementValue) {
const cardElements =
getCardElements(cardElement);
if (parseInt(cardElements.cardElementTop.textContent, 10) === cardElementValue) {
return;
}
cardElements.cardElementFlip.classList.add('anim');
updateCardValues(
cardElements.cardElementTop,
cardElements.cardElementFlipBottom,
cardElementValue
);
function endAnimation() {
cardElements.cardElementFlip.classList.remove('anim');
updateCardValues(
cardElements.cardElementBottom,
cardElements.cardElementFlipTop,
cardElementValue
);
this.removeEventListener(
'animationend',
endAnimation
);
}
cardElements.cardElementFlip.addEventListener(
'animationend',
endAnimation
);
}
function updateDateElementValue(elementId, elementValue) {
const firstNumber = Math.floor(elementValue / 10) || 0;
const secondNumber = elementValue % 10 || 0;
const cards = document.getElementById(elementId);
const cardElements = cards.querySelectorAll('.card-element');
updateDateElement(cardElements[0], firstNumber);
updateDateElement(cardElements[1], secondNumber);
}
function getRemainingTime(target) {
const currentTime = Date.now();
const complete = currentTime >= target;
if (complete) {
return {
complete,
seconds: 0,
minutes: 0,
hours: 0,
days: 0
};
}
const secondsRemaining = Math.floor(
(target - currentTime) / 1000
);
const days = Math.floor(secondsRemaining / 24 / 60 / 60);
const hours = Math.floor(secondsRemaining / 60 / 60) - days * 24;
const minutes = Math.floor(secondsRemaining / 60) - days * 24 * 60 - hours * 60;
const seconds = secondsRemaining % 60;
return {
complete,
seconds,
minutes,
hours,
days
};
}
function updateAllElements() {
const timeRemainingForUpdate = getRemainingTime(
new Date(date).getTime()
);
updateDateElementValue('seconds', timeRemainingForUpdate.seconds);
updateDateElementValue('minutes', timeRemainingForUpdate.minutes);
updateDateElementValue('hours', timeRemainingForUpdate.hours);
updateDateElementValue('days', timeRemainingForUpdate.days);
return timeRemainingForUpdate.complete;
}
const countdownInterval = setInterval(() => {
const isComplete = updateAllElements();
if (isComplete) {
clearInterval(countdownInterval);
}
}, 1000);
updateAllElements();