des157b/script.js at main · rhythm0708/des157b · 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
(function() {
    'use strict';

    // HTML elements.
    const button = document.querySelector('button');
    const body = document.querySelector('body');
    const banner = document.querySelector('#banner');
    const sections = document.querySelectorAll('section')
    const footer = document.querySelector('footer');
    const fillers = document.querySelectorAll('.filler');

    // Content changes.
    const buttonState = document.querySelector("#button-state");
    const sweetImage = document.querySelector("#sweet-image");
    const spicyImage = document.querySelector("#spicy-image");
    const sweetText = document.querySelector("#sweet");
    const spicyText = document.querySelector("#spicy");

    // Variables.
    let mode = 'sweet';

    // Switch styles.
    button.addEventListener('click', function() {
        if (mode === 'sweet') {
            body.className = 'switch';
            banner.className = 'switch';
            button.className = 'switch';
            footer.className = 'switch';
            sweetImage.className = 'switch';
            spicyImage.className = 'switch';
            sweetText.className = 'switch';
            spicyText.className = 'switch';

            for (const section of sections) {
                section.className = 'switch';
            }

            for (const filler of fillers) {
                filler.classList.add('switch');
            }

            buttonState.innerHTML = "sweet";

            mode = 'spicy';
        } else {
            body.removeAttribute('class');
            banner.removeAttribute('class');
            button.removeAttribute('class');
            footer.removeAttribute('class');
            sweetImage.removeAttribute('class');
            spicyImage.removeAttribute('class');
            sweetText.removeAttribute('class');
            spicyText.removeAttribute('class');

            for (const section of sections) {
                section.removeAttribute('class');
            }

            for (const filler of fillers) {
                filler.classList.remove('switch');
            }

            buttonState.innerHTML = "spicy";
            mode = 'sweet'
        }
    })

    // Fill elements on hover.
    for (let section of sections) {
        let links = section.querySelectorAll('li a');
        let fillbox = section.querySelector('.filler');
        for (let link of links) {
            link.addEventListener('mouseenter', function(){
                let height = Math.abs(link.getBoundingClientRect().bottom - section.getBoundingClientRect().bottom);
                fillbox.style.height = `${height}px`;
            });

            link.addEventListener('mouseleave', function(){
                fillbox.style.height = "0px";
            });
        }
    }
})()