https://equinox2023.netlify.app/main.js

1/*==================== SHOW MENU ====================*/
2const showMenu = (toggleId, navId) =>{
3    const toggle = document.getElementById(toggleId),
4    nav = document.getElementById(navId)
5    
6    // Validate that variables exist
7    if(toggle && nav){
8        toggle.addEventListener('click', ()=>{
9            // We add the show-menu class to the div tag with the nav__menu class
10            nav.classList.toggle('show-menu')
11        })
12    }
13}
14showMenu('nav-toggle','nav-menu')
15
16/*==================== REMOVE MENU MOBILE ====================*/
17const navLink = document.querySelectorAll('.nav__link')
18
19function linkAction(){
20    const navMenu = document.getElementById('nav-menu')
21    // When we click on each nav__link, we remove the show-menu class
22    navMenu.classList.remove('show-menu')
23}
24navLink.forEach(n => n.addEventListener('click', linkAction))
25
26/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
27const sections = document.querySelectorAll('section[id]')
28
29function scrollActive(){
30    const scrollY = window.pageYOffset
31
32    sections.forEach(current =>{
33        const sectionHeight = current.offsetHeight
34        const sectionTop = current.offsetTop - 50;
35        const sectionId = current.getAttribute('id')
36
37        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
38            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
39        }else{
40            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
41        }
42    })
43}
44window.addEventListener('scroll', scrollActive)
45
46/*==================== CHANGE BACKGROUND HEADER ====================*/ 
47function scrollHeader(){
48    const nav = document.getElementById('header')
49    // When the scroll is greater than 200 viewport height, add the scroll-header class to the header tag
50    if(this.scrollY >= 200) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header')
51}
52window.addEventListener('scroll', scrollHeader)
53
54/*==================== SHOW SCROLL TOP ====================*/ 
55function scrollTop(){
56    const scrollTop = document.getElementById('scroll-top');
57    // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class
58    if(this.scrollY >= 560) scrollTop.classList.add('show-scroll'); else scrollTop.classList.remove('show-scroll')
59}
60window.addEventListener('scroll', scrollTop)
61
62/*==================== DARK LIGHT THEME ====================*/ 
63const themeButton = document.getElementById('theme-button')
64const darkTheme = 'dark-theme'
65const iconTheme = 'bx-toggle-right'
66
67// Previously selected topic (if user selected)
68const selectedTheme = localStorage.getItem('selected-theme')
69const selectedIcon = localStorage.getItem('selected-icon')
70
71// We obtain the current theme that the interface has by validating the dark-theme class
72const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
73const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-toggle-left' : 'bx-toggle-right'
74
75// We validate if the user previously chose a topic
76if (selectedTheme) {
77  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
78  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
79  themeButton.classList[selectedIcon === 'bx-toggle-left' ? 'add' : 'remove'](iconTheme)
80}
81
82// Activate / deactivate the theme manually with the button
83themeButton.addEventListener('click', () => {
84    // Add or remove the dark / icon theme
85    document.body.classList.toggle(darkTheme)
86    themeButton.classList.toggle(iconTheme)
87    // We save the theme and the current icon that the user chose
88    localStorage.setItem('selected-theme', getCurrentTheme())
89    localStorage.setItem('selected-icon', getCurrentIcon())
90})
91
92/*==================== SCROLL REVEAL ANIMATION ====================*/
93const sr = ScrollReveal({
94    distance: '30px',
95    duration: 1800,
96    
97});
98
99sr.reveal(`.home__data, .home__img, .team__head, .team-card,
100           .decoration__data,
101           .accessory__content,

102           .footer__content`, {
103    origin: 'top',
104    interval: 200,
105})
106
107sr.reveal(`.share__img, .send__content`, {
108    origin: 'left'
109})
110
111sr.reveal(`.share__data, .send__img`, {
112    origin: 'right'
113})
114
115let getStarted = document.querySelector(".home__data .button");
116getStarted.addEventListener("click", getStartedHandler);
117
118function getStartedHandler(){
119    window.location.href = "/signIn"
120}
121
122let learnMore = document.querySelector(".share__container a");
123learnMore.addEventListener("click", learnMoreHandler);
124
125function learnMoreHandler(){
126    window.location.href = "/learnMore"
127}
128
129let goShopping = document.querySelectorAll(".decoration__data a");
130for(let i=0;i<goShopping.length;i++){
131    goShopping[i].addEventListener("click", goShoppingHandler);
132}
133function goShoppingHandler(){
134    window.location.href = "/productsPage"
135}