-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
46 lines (38 loc) · 1.42 KB
/
app.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
const sections = document.querySelectorAll(".section");
const sectBtns = document.querySelectorAll(".controlls");
const sectBtn = document.querySelectorAll(".control");
const allSections = document.querySelector(".main-content");
function PageTransitions(){
// Button click active class
for(let i = 0; i < sectBtn.length; i++){
sectBtn[i].addEventListener("click", function(){
let currentBtn = document.querySelectorAll(".active-btn");
currentBtn[0].className = currentBtn[0].className.replace("active-btn", "");
this.className += " active-btn";
});
}
// Section Active
allSections.addEventListener("click", (e) => {
const id = e.target.dataset.id;
if(id){
// Remove selected from other bnts
sectBtns.forEach((btn) => {
btn.classList.remove("active");
});
e.target.classList.add("active");
// hide other sections
sections.forEach((section) => {
section.classList.remove("active");
})
const element = document.getElementById(id);
element.classList.add("active");
}
})
// Toggle theme
const themeBtn = document.querySelector(".theme-btn");
themeBtn.addEventListener("click", () => {
let element = document.body;
element.classList.toggle("light-mode");
})
}
PageTransitions();