forked from GarimaSingh0109/WasteManagment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
72 lines (56 loc) · 2.38 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
const themeSwitch = document.getElementById('theme-switch');
const body = document.body;
const header = document.querySelector('header');
const footer = document.querySelector('footer');
// Function to enable dark mode
function enableDarkMode() {
body.classList.add('dark-mode');
header.classList.add('dark-mode');
footer.classList.add('dark-mode');
themeSwitch.classList.add('dark-theme'); // Update the switch appearance
}
// Function to disable dark mode
function disableDarkMode() {
body.classList.remove('dark-mode');
header.classList.remove('dark-mode');
footer.classList.remove('dark-mode');
themeSwitch.classList.remove('dark-theme'); // Update the switch appearance
}
// Event listener for dark mode toggle button
themeSwitch.addEventListener('click', () => {
if (body.classList.contains('dark-mode')) {
disableDarkMode(); // Switch to light mode
} else {
enableDarkMode(); // Switch to dark mode
}
});
// Optional: Check the initial mode on page load
if (localStorage.getItem('dark-mode') === 'enabled') {
enableDarkMode();
}
// Save the mode in local storage
themeSwitch.addEventListener('click', () => {
if (body.classList.contains('dark-mode')) {
localStorage.setItem('dark-mode', 'enabled');
} else {
localStorage.removeItem('dark-mode');
}
});
// Function to update progress bar width based on scroll position
function updateProgressBar() {
const scrollTop = window.scrollY; // How far you've scrolled
const windowHeight = document.body.scrollHeight - window.innerHeight; // Total scrollable height
const progressWidth = (scrollTop / windowHeight) * 100; // Calculate the progress as a percentage
document.getElementById('progress-bar').style.width = progressWidth + '%'; // Update the width of the progress bar
}
// Attach the update function to the scroll event
window.addEventListener('scroll', updateProgressBar);
window.onscroll = function() {
updateProgressBar();
};
function updateProgressBar() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollPercent = (scrollTop / scrollHeight) * 100;
document.getElementById("progress-bar").style.width = scrollPercent + "%";
}