decora/index.js at dev · ooreally/decora · 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
/*index.js code for mobile view of decora*/
const hamburger = document.querySelector("#head-ham");
const hamContent = document.querySelector("#head-ham-content");

const hamClicked = () => {
    if(hamContent.style.display === "flex")
    hamContent.style.display = "none";
    else
    hamContent.style.display = "flex";
}
hamburger.addEventListener("click", hamClicked )


/*js code for navigation component to illustrate navigation bar*/
const navHamburger = document.querySelector("#hamburger-drop");
const navHamContent = document.querySelector("#ham-content");

const navHamClicked = () => {
    if(navHamContent.style.display === "flex")
    navHamContent.style.display = "none";
    else
    navHamContent.style.display = "flex";
}

if(navHamburger)
navHamburger.addEventListener("click", navHamClicked );


// js code for slider
const sliderValue = document.querySelector("#slider-value");
const sliderInput = document.querySelector("#slider-input");

const sliderChanged = () => {
    sliderValue.innerText = sliderInput.value
}

if(sliderInput)
sliderInput.addEventListener("change",sliderChanged)

// js code for Toast component
const toastBtn = document.querySelector("#see-toast-btn");
const toast = document.querySelector("#toast");
const closeToast = document.querySelector("#close-toast-btn");

const toastClickedHandler = () => {
  toast.style.visibility = "visible";
  toastTimeout = setTimeout(() => (toast.style.visibility = "hidden"), 5000);
};

const closeToastClickedHandler = () => {
    toast.style.visibility="hidden";
    clearTimeout(toastTimeout);
}

if(toastBtn)
toastBtn.addEventListener("click", toastClickedHandler);

if(closeToast)
closeToast.addEventListener("click", closeToastClickedHandler);

//jscode for Modal Component
const modalBtn = document.querySelector("#see-modal-btn");
const modal = document.querySelector("#modal");
const closemodal = document.querySelector("#close-modal-btn");

const modalClickedHandler = () => {
  modal.style.visibility = "visible";
};

const closeModalClickedHandler = () => {
    modal.style.visibility="hidden";
}

if(modalBtn)
modalBtn.addEventListener("click", modalClickedHandler);

if(closemodal)
closemodal.addEventListener("click", closeModalClickedHandler);