-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
47 lines (38 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
42
43
44
45
46
47
const newAppointmentButton = document.getElementById('new-appointment');
const newAppointmentOptions = document.querySelectorAll('.menu-new-appointment__option');
const openFormButton = document.getElementById('open-form-button');
const addAppointmentDiv = document.getElementById('add-appointment-div');
const darkLayer = document.createElement('div');
darkLayer.style.position = 'fixed';
darkLayer.style.top = '0';
darkLayer.style.left = '0';
darkLayer.style.width = '100%';
darkLayer.style.height = '100%';
darkLayer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
newAppointmentButton.addEventListener('click', () => {
newAppointmentOptions.forEach(element => {
element.classList.toggle('hidden');
element.classList.add('animate-button');
});
const existingDarkLayer = document.body.contains(darkLayer);
if (existingDarkLayer) {
document.body.removeChild(darkLayer);
} else {
document.body.appendChild(darkLayer);
}
});
darkLayer.addEventListener('click', () => {
newAppointmentOptions.forEach(element => {
element.classList.toggle('hidden');
element.classList.remove('animate-button');
});
document.body.removeChild(darkLayer);
})
openFormButton.addEventListener('click', function() {
if (addAppointmentDiv.style.transform === 'translateY(-600px)') {
addAppointmentDiv.style.transform = '';
}
else {
addAppointmentDiv.style.transform = 'translateY(-600px)'
}
})