-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
41 lines (39 loc) · 1.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
const onButton = document.getElementById("on");
const offButton = document.getElementById("off");
const fadeElements = document.querySelectorAll(".fade");
const lamps = document.querySelectorAll(".lamp");
const sizeRange = document.getElementById("size");
const durationRange = document.getElementById("duration");
// Create an array of random delays
const delays = [3, 4, 1, 2, 6, 5];
sizeRange.addEventListener("change", changeSize);
durationRange.addEventListener("change", changeDurantion);
onButton.addEventListener("click", startAnimation);
offButton.addEventListener("click", stopAnimation);
function stopAnimation() {
fadeElements.forEach((fade) => {
fade.style.removeProperty("animation");
fade.style.display = "none";
});
}
function startAnimation() {
// Loop through elements and assign a random delay to each element
fadeElements.forEach((fade) => {
const randomDelay = delays[Math.floor(Math.random() * delays.length)];
fade.style.animation = "fade ease-in-out 2s infinite alternate";
fade.style.display = "block";
// Set the delay on the element's style object
fade.style.animationDelay = `${randomDelay}s`;
});
}
function changeSize(e) {
lamps.forEach((lamp) => {
lamp.style.setProperty("width", `${e.target.value}px`);
lamp.style.setProperty("height", `${e.target.value}px`);
});
}
function changeDurantion(e) {
fadeElements.forEach((fade) => {
fade.style.animationDuration = `${e.target.value}s`;
});
}