HackaDev-TryCatchMe/script.js at main · IsaacFranzen/HackaDev-TryCatchMe · 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
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
const wrapper = document.querySelector(".wrapper");
const loginLink = document.querySelector(".login-link");
const cadastroLink = document.querySelector(".cadastro-link");
const recuperacaoLink = document.querySelector(".recupera-link");
const termoseServicos = document.querySelector(".termos-servico-link");
const criarConta = document.querySelector(".criar-conta");
const btnPopup = document.querySelector(".login-popup");
const iconClose = document.querySelector(".icon-close");
const backLogin = document.querySelector(".back-login");
const backLoginCadastro = document.querySelector(".back-login-cadastro");
const desfoqueHome = document.querySelector(".home");
const btnDarkMode = document.querySelector("#darkmode-btn");
const bodyhtml = document.querySelector(".home");
const divLogin = document.querySelector("#loginPopUp");
let darkModeOnFalse = false;

cadastroLink.addEventListener("click", () => {
  wrapper.classList.add("active");
});
loginLink.addEventListener("click", () => {
  wrapper.classList.remove("active");
});
loginLink.addEventListener("click", () => {
  wrapper.classList.remove("active-popup-recup");
});
recuperacaoLink.addEventListener("click", () => {
  wrapper.classList.add("active-popup-recup");
});
termoseServicos.addEventListener("click", () => {
  wrapper.classList.add("active-termos-servicos");
});
termoseServicos.addEventListener("click", () => {
  wrapper.classList.remove("active-popup-recup");
});
termoseServicos.addEventListener("click", () => {
  wrapper.classList.remove("active");
});
iconClose.addEventListener("click", () => {
  wrapper.classList.remove("active-popup");
  desfoqueHome.style.backdropFilter = "none";
});
iconClose.addEventListener("click", () => {
  wrapper.classList.remove("active");
  desfoqueHome.style.backdropFilter = "none";
});
iconClose.addEventListener("click", () => {
  wrapper.classList.remove("active-popup-recup");
  desfoqueHome.style.backdropFilter = "none";
});
iconClose.addEventListener("click", () => {
  wrapper.classList.remove("active-termos-servicos");
  desfoqueHome.style.backdropFilter = "none";
});

backLogin.addEventListener("click", () => {
  wrapper.classList.remove("active-popup-recup");
});
backLogin.addEventListener("click", () => {
  wrapper.classList.add("active-popup");
});

backLoginCadastro.addEventListener("click", () => {
  wrapper.classList.remove("active-termos-servicos");
});
backLoginCadastro.addEventListener("click", () => {
  wrapper.classList.add("active");
});

btnPopup.addEventListener("click", () => {
  wrapper.classList.add("active-popup");
  desfoqueHome.style.backdropFilter = "brightness(60%)";
});

criarConta.addEventListener("click", () => {
  wrapper.classList.add("active");
  desfoqueHome.style.backdropFilter = "brightness(60%)";
});

criarConta.addEventListener("click", () => {
  wrapper.classList.add("active-popup");
  desfoqueHome.style.backdropFilter = "brightness(60%)";
});

btnDarkMode.addEventListener("click",()=>{
  if(darkModeOnFalse === false){
    divLogin.classList.add("dark-mode")
    btnDarkMode.classList.remove("dark-mode-off");
    btnDarkMode.classList.add("dark-mode-on");
    bodyhtml.classList.add("dark-mode");
    darkModeOnFalse = true;
  }else{
    bodyhtml.classList.remove("dark-mode");
    divLogin.classList.remove("dark-mode")
    btnDarkMode.classList.remove("dark-mode-on");
    btnDarkMode.classList.add("dark-mode-off");
    darkModeOnFalse = false;
  }
})