MESSI_MANIA/app.js at main · stringer1000/MESSI_MANIA · GitHub

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
const navIcon = document.getElementById("nav-icon");
const navBar = document.querySelector(".navbar");
const ball = document.querySelector(".ball");
const moon = document.querySelector(".fa-moon");
const sun = document.querySelector(".fa-sun");
const _switch = document.querySelector(".switch-container");
const box = document.querySelector(".box");

navIcon?.addEventListener("click", () => {
  navBar.classList.toggle("navBarMobile");
  navIcon.classList.toggle("open");
});

let ltheme = localStorage.getItem("theme");
console.log(ltheme);
let theme = ltheme === null ? "light" : ltheme;

_switch?.addEventListener("click", () => {
  console.log("listener ran bruv");
  if (theme === "light") {
    sun.style.transform = "translateX(45px) rotate(250deg) ";
    sun.style.opacity = "0";
    moon.style.transform = "translateX(-45px) rotate(350deg)";
    moon.style.opacity = "1";
    theme = "dark";
  } else {
    sun.style.transform = "translateX(0)";
    sun.style.opacity = "1";
    moon.style.transform = "translateX(0)";
    moon.style.opacity = "0";
    theme = "light";
  }
});

setInterval(() => {
  document.body.className = localStorage.getItem("theme");
  localStorage.setItem("theme", theme);
}, 1);
window.onload = () => {
  if (ltheme === "light") {
    sun.style.transform = "translateX(0)";
    sun.style.opacity = "1";
    moon.style.transform = "translateX(0)";
    moon.style.opacity = "0";
  }
  if (ltheme === "dark") {
    sun.style.transform = "translateX(45px) ";
    sun.style.opacity = "0";
    moon.style.transform = "translateX(-45px)";
    moon.style.opacity = "1";
  }
};