https://gdgcmsit.netlify.app/scriptt.js

1// NAVIGATION BAR //
2// const menubar = document.querySelector('#menubar');
3// const sidebar = document.querySelector('.sidebar');
4// const closeIcon = sidebar.querySelector('#closeBtn');
5
6// // menubar.addEventListener('click', () => {
7// //     sidebar.style.display = 'flex';
8// // });
9// menubar.addEventListener('click', () => {
10//     sidebar.style.display = 'flex';
11//     // sidebar.style.right = '0'; // Ensure it's visible
12// });
13
14
15// closeIcon.addEventListener('click', () => {
16//     sidebar.style.display = 'none';
17// });
18
19// const navLinks = document.querySelectorAll('nav li a');
20
21// navLinks.forEach(link => {
22//     link.addEventListener('click', function () {
23//         navLinks.forEach(nav => nav.classList.remove('active')); 
24//         this.classList.add('active'); 
25//     });
26// });
27
28// document.addEventListener("DOMContentLoaded", function () {
29//     console.log("DOM Loaded, script running!"); // Debugging message
30
31//     const menubar = document.querySelector('#menubar');
32//     const sidebar = document.querySelector('.sidebar');
33//     const closeIcon = document.querySelector('#closeBtn');
34
35//     if (!menubar || !sidebar || !closeIcon) {
36//         console.error("One or more elements are missing!");
37//         return;
38//     }
39
40//     menubar.addEventListener('click', (event) => {
41//         event.preventDefault();
42//         console.log("Hamburger menu clicked"); // Debugging message
43//         sidebar.classList.toggle('active');
44//     });
45
46//     closeIcon.addEventListener('click', (event) => {
47//         event.preventDefault();
48//         console.log("Close button clicked"); // Debugging message
49//         sidebar.classList.remove('active');
50//     });
51
52//     document.addEventListener('click', (event) => {
53//         if (!sidebar.contains(event.target) && event.target !== menubar) {
54//             console.log("Clicked outside, closing sidebar");
55//             sidebar.classList.remove('active');
56//         }
57//     });
58// });
59
60
61const menubar = document.querySelector("#menubar");
62const sidebar = document.querySelector(".sidebar");
63const closeIcon = sidebar.querySelector("#closeBtn");
64
65menubar.addEventListener("click", (event) => {
66  // sidebar.style.display = 'flex';
67  event.stopPropagation();
68  sidebar.classList.add("active");
69});
70
71closeIcon.addEventListener("click", (event) => {
72  // sidebar.style.display = 'none';
73  event.stopPropagation();
74  sidebar.classList.remove("active");
75});
76
77document.addEventListener("click", (event) => {
78  if (!sidebar.contains(event.target) && !menubar.contains(event.target)) {
79    sidebar.classList.remove("active");
80  }
81});
82
83const navLinks = document.querySelectorAll("nav li a");
84
85navLinks.forEach((link) => {
86  link.addEventListener("click", function () {
87    navLinks.forEach((nav) => nav.classList.remove("active"));
88    this.classList.add("active");
89  });
90});
91
92
93
94
95// SLIDER //
96const sliders = document.querySelectorAll(".slider-container");
97
98sliders.forEach((slider) => {
99    const carousel = slider.querySelector(".cards-wrapper");
100    const firstCardWidth = carousel.querySelector(".card").offsetWidth;
101    const arrowBtns = slider.querySelectorAll(".arrow");
102    const carouselChildrens = [...carousel.children];
103
104    let isDragging = false, startX, startScrollLeft;
105
106    let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);
107
108    carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
109        carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
110    });
111
112    carouselChildrens.slice(0, cardPerView).forEach(card => {
113        carousel.insertAdjacentHTML("beforeend", card.outerHTML);
114    });
115
116    carousel.classList.add("no-transition");
117    carousel.scrollLeft = carousel.offsetWidth;
118    carousel.classList.remove("no-transition");
119
120    arrowBtns.forEach(btn => {
121        btn.addEventListener("click", () => {
122            carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
123        });
124    });
125
126    const dragStart = (e) => {
127        isDragging = true;
128        carousel.classList.add("dragging");
129        startX = e.pageX;
130        startScrollLeft = carousel.scrollLeft;
131    };
132
133    const dragging = (e) => {
134        if (!isDragging) return;
135        carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
136    };
137
138    const dragStop = () => {
139        isDragging = false;

140        carousel.classList.remove("dragging");
141    };
142
143    const infiniteScroll = () => {
144        if (carousel.scrollLeft === 0) {
145            carousel.classList.add("no-transition");
146            carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
147            carousel.classList.remove("no-transition");
148        } else if (Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
149            carousel.classList.add("no-transition");
150            carousel.scrollLeft = carousel.offsetWidth;
151            carousel.classList.remove("no-transition");
152        }
153    };
154
155    carousel.addEventListener("mousedown", dragStart);
156    carousel.addEventListener("mousemove", dragging);
157    document.addEventListener("mouseup", dragStop);
158    carousel.addEventListener("scroll", infiniteScroll);
159});
160
161
162
163
164// ----------------------Toggle Button-----------------------
165
166
167let lightMode = localStorage.getItem("lightMode");
168const modeSwitch = document.querySelector(".mode-icon");
169
170const enableLightmode = () => {
171  document.body.classList.add("lightMode");
172  localStorage.setItem("lightMode", "active");
173  changeImg();
174};
175
176const disableLightmode = () => {
177  document.body.classList.remove("lightMode");
178  localStorage.setItem("lightMode", "inactive");
179  changeImg();
180};
181
182document.addEventListener("DOMContentLoaded", () => {
183  if (localStorage.getItem("lightMode") === "active") {
184    enableLightmode();
185  } else {
186    disableLightmode();
187  }
188});
189
190modeSwitch.addEventListener("click", () => {
191  lightMode = localStorage.getItem("lightMode");
192  lightMode !== "active" ? enableLightmode() : disableLightmode();
193});
194
195function changeImg() {
196  const img1 = document.getElementById("logo1");
197  const img2 = document.getElementById("logo2");
198  const img3 = document.getElementById("logo3");
199  const img4 = document.getElementById("logo4");
200  const nav = document.getElementById("nav-Img");
201  const foot = document.getElementById("foot");
202
203  if (localStorage.getItem("lightMode") === "active") {
204    if (img1) img1.src = "/image/Group 8.0.png";
205    if (img2) img2.src = "/image/Group 12.0.png";
206    if (img3) img3.src = "/image/Frame 88.0.png";
207    if (img4) img4.src = "/image/Group 11.0.png";
208    if (nav) nav.src = "/image/Group 3.0.png";
209    if (foot) foot.src = "/image/footer.png";
210  } else {
211    if (img1) img1.src = "/image/Group 8.png";
212    if (img2) img2.src = "/image/Group 12.png";
213    if (img3) img3.src = "/image/Frame 88.png";
214    if (img4) img4.src = "/image/Group 11.png";
215    if (nav) nav.src = "/image/Group 3.png";
216    if (foot) foot.src = "/image/footer.0.png";
217  }
218}
219
220
221
222
223// ----------------------Toggle Button-----------------------