-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
108 lines (79 loc) · 2.83 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
const MINIMUM_ADDITIONAL_ITERATION_COUNT = 2;
const config = {
additionalIterationCount: Math.max(MINIMUM_ADDITIONAL_ITERATION_COUNT, 3),
transitionDuration: 3000,
prize: 698459,
digits: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
const USD = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
const getPrizeText = () => document.getElementById("prize-text"),
getTracks = () => document.querySelectorAll(".digit > .digit-track");
const getFormattedPrize = () => USD.format(config.prize),
getPrizeDigitByIndex = index => parseInt(config.prize.toString()[index]),
determineIterations = index => index + config.additionalIterationCount;
const createElement = (type, className, text) => {
const element = document.createElement(type);
element.className = className;
if(text !== undefined) element.innerText = text;
return element;
}
const createCharacter = character => createElement("span", "character", character);
const createDigit = (digit, trackIndex) => {
const digitElement = createElement("span", "digit"),
trackElement = createElement("span", "digit-track");
let digits = [],
iterations = determineIterations(trackIndex);
for(let i = 0; i < iterations; i++) {
digits = [...digits, ...config.digits];
}
trackElement.innerText = digits.join(" ");
trackElement.style.transitionDuration = `${config.transitionDuration}ms`;
digitElement.appendChild(trackElement);
return digitElement;
}
const setup = () => {
let index = 0;
const prizeText = getPrizeText();
for(const character of getFormattedPrize()) {
const element = isNaN(character)
? createCharacter(character) : createDigit(character, index++);
prizeText.appendChild(element);
}
}
const animate = () => {
getTracks().forEach((track, index) => {
const digit = getPrizeDigitByIndex(index),
iterations = determineIterations(index),
activeDigit = ((iterations - 1) * 10) + digit;
track.style.translate = `0rem ${activeDigit * -10}rem`;
});
}
const resetTrackPosition = track => {
track.style.transitionDuration = "0ms";
track.style.translate = "0rem 0rem";
track.offsetHeight;
track.style.transitionDuration = `${config.transitionDuration}ms`;
}
const resetAnimation = () => {
for(const track of getTracks()) resetTrackPosition(track);
}
window.onload = () => {
setup();
setTimeout(animate);
};
const handleRedo = () => {
resetAnimation();
animate();
}
const updateTheme = theme => {
document.documentElement.style.setProperty("--theme-rgb", `var(--${theme})`);
for(const button of document.querySelectorAll(".theme-button")) {
button.dataset.selected = theme === button.dataset.theme;
}
}
const handleChangeTheme = e => updateTheme(e.currentTarget.dataset.theme);
updateTheme("green");