forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex copy.js
231 lines (187 loc) · 9.07 KB
/
index copy.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
// Selecteer in het document de class 'ham-menu' en 'off-screen-menu'.
const hamMenu = document.querySelector(".ham-menu");
const offScreenMenu = document.querySelector(".off-screen-menu");
// Aan hamMenu voeg je een event listener toe, dus als er wat gebeurt in dit gevallen klikken, dan ...
// dan wordt aan off-screen-menu de class 'active' getoggled. Dus aan en uit gezet.
hamMenu.addEventListener("click", () => {
hamMenu.classList.toggle("active");
offScreenMenu.classList.toggle("active");
});
// Selecteer in het document de class 'thema-btn' en 'thema-dropdown'.
const themaFilter = document.querySelector(".thema-btn");
const themaDropdown = document.querySelector(".thema-dropdown");
// Aan themaFilter voeg je een event listener toe, dus als er wat gebeurt in dit gevallen klikken, dan ...
// dan wordt aan thema-dropdown de class 'collapsed' getoggled. Dus aan en uit gezet.
themaFilter.addEventListener("click", (e) => {
themaDropdown.addEventListener('click',function(e) {
e.stopPropagation();
});
themaDropdown.classList.toggle("collapsed");
});
// Selecteer in het document de class 'locatie-btn' en 'locatie-dropdown'.
const locatieFilter = document.querySelector(".locatie-btn");
const locatieDropdown = document.querySelector(".locatie-dropdown");
// Aan locatieFilter voeg je een event listener toe, dus als er wat gebeurt in dit gevallen klikken, dan ...
// dan wordt aan locatie-dropdown de class 'collapsed' getoggled. Dus aan en uit gezet.
locatieFilter.addEventListener("click", () => {
locatieDropdown.addEventListener('click',function(e) {
e.stopPropagation();
});
locatieDropdown.classList.toggle("collapsed");
});
// checkboxes aan en uit
const lijstTitel = document.querySelector(".eventlist h3");
const checks = document.querySelectorAll(".btn-selected input");
checks.forEach(check => {
check.oninput = wijzigLijstTitel;
});
function wijzigLijstTitel(e) {
const deInput = e.target;
if (deInput.checked) {
lijstTitel.textContent = `Alle '${e.target.value}' events:`;
} else {
lijstTitel.textContent = 'Alle events:';
}
}
// Omdat de dropdown in de filter button zit klapt die in als je een cheeckbox aanvinkt.
// ^ nu zeg je als die de dropdown aanklikt hoef die niet in te klappen.
// querySelector herkend alleen de eerste dus vandaar dat we dezelfde twee keer uitschrijven.
const ux_checkbox = document.getElementById("ux")
ux_checkbox.addEventListener('change', ux_changed);
function ux_changed() {
if (ux_checkbox.checked) {
const liElementHr1 = document.querySelector('li[data-category="hr1"]');
const liElementHr2 = document.querySelector('li[data-category="hr2"]');
const liElementHr3 = document.querySelector('li[data-category="hr3"]');
const liElementHackathon1 = document.querySelector('li[data-category="hackathon1"]');
const liElementHackathon2 = document.querySelector('li[data-category="hackathon2"]');
liElementHr1.style.display = 'none';
liElementHr2.style.display = 'none';
liElementHr3.style.display = 'none';
liElementHackathon1.style.display = 'none';
liElementHackathon2.style.display = 'none';
} else {
const liElementHr1 = document.querySelector('li[data-category="hr1"]');
const liElementHr2 = document.querySelector('li[data-category="hr2"]');
const liElementHr3 = document.querySelector('li[data-category="hr3"]');
const liElementHackathon1 = document.querySelector('li[data-category="hackathon1"]');
const liElementHackathon2 = document.querySelector('li[data-category="hackathon2"]');
liElementHr1.style.display = '';
liElementHr2.style.display = '';
liElementHr3.style.display = '';
liElementHackathon1.style.display = '';
liElementHackathon2.style.display = '';
}
}
const hr_checkbox = document.getElementById("hr")
hr_checkbox.addEventListener('change', hr_changed);
function hr_changed() {
if (hr_checkbox.checked) {
const liElementUx1 = document.querySelector('li[data-category="ux1"]');
const liElementUx2 = document.querySelector('li[data-category="ux2"]');
const liElementUx3 = document.querySelector('li[data-category="ux3"]');
const liElementHackathon1 = document.querySelector('li[data-category="hackathon1"]');
const liElementHackathon2 = document.querySelector('li[data-category="hackathon2"]');
liElementUx1.style.display = 'none';
liElementUx2.style.display = 'none';
liElementUx3.style.display = 'none';
liElementHackathon1.style.display = 'none';
liElementHackathon2.style.display = 'none';
} else {
const liElementUx1 = document.querySelector('li[data-category="ux1"]');
const liElementUx2 = document.querySelector('li[data-category="ux2"]');
const liElementUx3 = document.querySelector('li[data-category="ux3"]');
const liElementHackathon1 = document.querySelector('li[data-category="hackathon1"]');
const liElementHackathon2 = document.querySelector('li[data-category="hackathon2"]');
liElementUx1.style.display = '';
liElementUx2.style.display = '';
liElementUx3.style.display = '';
liElementHackathon1.style.display = '';
liElementHackathon2.style.display = '';
}
}
const hack_checkbox = document.getElementById("hack")
hack_checkbox.addEventListener('change', hack_changed);
function hack_changed() {
if (hack_checkbox.checked) {
const liElementUx1 = document.querySelector('li[data-category="ux1"]');
const liElementUx2 = document.querySelector('li[data-category="ux2"]');
const liElementUx3 = document.querySelector('li[data-category="ux3"]');
const liElementHr1 = document.querySelector('li[data-category="hr1"]');
const liElementHr2 = document.querySelector('li[data-category="hr2"]');
const liElementHr3 = document.querySelector('li[data-category="hr3"]');
liElementUx1.style.display = 'none';
liElementUx2.style.display = 'none';
liElementUx3.style.display = 'none';
liElementHr1.style.display = 'none';
liElementHr2.style.display = 'none';
liElementHr3.style.display = 'none';
} else {
const liElementUx1 = document.querySelector('li[data-category="ux1"]');
const liElementUx2 = document.querySelector('li[data-category="ux2"]');
const liElementUx3 = document.querySelector('li[data-category="ux3"]');
const liElementHr1 = document.querySelector('li[data-category="hr1"]');
const liElementHr2 = document.querySelector('li[data-category="hr2"]');
const liElementHr3 = document.querySelector('li[data-category="hr3"]');
liElementUx1.style.display = '';
liElementUx2.style.display = '';
liElementUx3.style.display = '';
liElementHr1.style.display = '';
liElementHr2.style.display = '';
liElementHr3.style.display = '';
}
}
const ams_checkbox = document.getElementById("ams")
ams_checkbox.addEventListener('change', ams_changed);
function ams_changed() {
if (ams_checkbox.checked) {
const liElementEind1 = document.querySelector('li[data-category2="eind1"]');
const liElementEind2 = document.querySelector('li[data-category2="eind2"]');
const liElementEind3 = document.querySelector('li[data-category2="eind3"]');
liElementEind1.style.display = 'none';
liElementEind2.style.display = 'none';
liElementEind3.style.display = 'none';
} else {
const liElementEind1 = document.querySelector('li[data-category2="eind1"]');
const liElementEind2 = document.querySelector('li[data-category2="eind2"]');
const liElementEind3 = document.querySelector('li[data-category2="eind3"]');
liElementEind1.style.display = '';
liElementEind2.style.display = '';
liElementEind3.style.display = '';
}
}
const eind_checkbox = document.getElementById("eind")
eind_checkbox.addEventListener('change', eind_changed);
function eind_changed() {
if (eind_checkbox.checked) {
const liElementAms1 = document.querySelector('li[data-category2="ams1"]');
const liElementAms2 = document.querySelector('li[data-category2="ams2"]');
const liElementAms3 = document.querySelector('li[data-category2="ams3"]');
const liElementAms4 = document.querySelector('li[data-category2="ams4"]');
const liElementAms5 = document.querySelector('li[data-category2="ams5"]');
liElementAms1.style.display = 'none';
liElementAms2.style.display = 'none';
liElementAms3.style.display = 'none';
liElementAms4.style.display = 'none';
liElementAms5.style.display = 'none';
} else {
const liElementAms1 = document.querySelector('li[data-category2="ams1"]');
const liElementAms2 = document.querySelector('li[data-category2="ams2"]');
const liElementAms3 = document.querySelector('li[data-category2="ams3"]');
const liElementAms4 = document.querySelector('li[data-category2="ams4"]');
const liElementAms5 = document.querySelector('li[data-category2="ams5"]');
liElementAms1.style.display = '';
liElementAms2.style.display = '';
liElementAms3.style.display = '';
liElementAms4.style.display = '';
liElementAms5.style.display = '';
}
}
window.addEventListener('scroll', function () {
const header = document.querySelector('header');
if (window.scrollY > 100) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
});