Aden/script.js at main · muhammadmunaf/Aden · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
var projectsArray = document.getElementById("test");
var n=0;

updateButtons();

function slidePlus()
{
    // finding the current position of the projects that are showing
    for (var i = 1; i < projectsArray.childNodes.length-1; i+=2)
    {
        if (projectsArray.childNodes[i].className == "project-card active")
        {
            // i is the current position and we want it to increase so n=i+2
            n=i+2;
            break;
        }
    }
    // removing all the actives in the projects
    for (var i = 1; i < projectsArray.childNodes.length-1; i+=2)
    {
        projectsArray.childNodes[i].className = "project-card unactive";
    }

    // addings actives only to the ones that are now needed, which is n and its consecutive 2 projects
    projectsArray.childNodes[n].className = "project-card active";
    projectsArray.childNodes[n+2].className = "project-card active";
    projectsArray.childNodes[n+4].className = "project-card active";

    updateButtons(n-2); // -2 because we did +2 earlier
}

function slideMinus()
{
    // finding the current position of the projects that are showing
    for (var i = 1; i < projectsArray.childNodes.length-1; i+=2)
    {
        if (projectsArray.childNodes[i].className == "project-card active")
        {
            // i is the current position and we want it to decrease so n=i-2
            n=i-2;
            break;
        }
    }

    // removing all the actives in the projects
    for (var i = 1; i < projectsArray.childNodes.length-1; i+=2)
    {
        projectsArray.childNodes[i].className = "project-card unactive";
    }

    // addings actives only to the ones that are now needed, which is n and its consecutive 2 projects
    projectsArray.childNodes[n].className = "project-card active";
    projectsArray.childNodes[n+2].className = "project-card active";
    projectsArray.childNodes[n+4].className = "project-card active";

    updateButtons(n+2); // +2 because we did -2 earlier
}

function updateButtons(n)
{
    // disables left arrow if first project is reached else enable it
    if(projectsArray.childNodes[1].className == "project-card active")
    {
        var temp = document.getElementById("projectArrowPrevious");
        temp.style.pointerEvents = "none";
        temp.style.opacity = "0.4";
    }
    else
    {
        var temp = document.getElementById("projectArrowPrevious");
        temp.style.pointerEvents = "auto";
        temp.style.opacity = "1";
    }

    // disables right arrow if last project is reached else enable it
    if(projectsArray.childNodes[projectsArray.childNodes.length-2].className == "project-card active")
    {
        var temp = document.getElementById("projectArrowNext");
        temp.style.pointerEvents = "none";
        temp.style.opacity = "0.4";
    }
    else
    {
        var temp = document.getElementById("projectArrowNext");
        temp.style.pointerEvents = "auto";
        temp.style.opacity = "1";
    }
}

// for nav bar, to change selected icon as user scrolls
document.addEventListener('scroll', () => {

    if (window.scrollY >= document.querySelector('#home').getBoundingClientRect().top)
    {
        document.getElementById('home-icon').setAttribute('src','Icons/Selected/Home button.png');

        document.getElementById('projects-icon').setAttribute('src','Icons/Projects button.png');
        document.getElementById('contact-icon').setAttribute('src','Icons/Contact button.png');
        document.getElementById('about-icon').setAttribute('src','Icons/About me button.png');
    }

    if (window.scrollY >= document.querySelector('#projects').getBoundingClientRect().top)
    {
        document.getElementById('projects-icon').setAttribute('src','Icons/Selected/Projects button.png');

        document.getElementById('home-icon').setAttribute('src','Icons/Home button.png');
        document.getElementById('contact-icon').setAttribute('src','Icons/Contact button.png');
        document.getElementById('about-icon').setAttribute('src','Icons/About me button.png');
    }

    if (window.scrollY >= document.querySelector('#aboutme').getBoundingClientRect().top+200)
    {
        document.getElementById('about-icon').setAttribute('src','Icons/Selected/About me button.png');

        document.getElementById('projects-icon').setAttribute('src','Icons/Projects button.png');
        document.getElementById('contact-icon').setAttribute('src','Icons/Contact button.png');
        document.getElementById('home-icon').setAttribute('src','Icons/Home button.png');
    }

    if (window.scrollY >= document.querySelector('footer').getBoundingClientRect().bottom)
    {
        document.getElementById('contact-icon').setAttribute('src','Icons/Selected/Contact button.png');

        document.getElementById('projects-icon').setAttribute('src','Icons/Projects button.png');
        document.getElementById('about-icon').setAttribute('src','Icons/About me button.png');
        document.getElementById('home-icon').setAttribute('src','Icons/Home button.png');
    }


})