Project9_MyPortfolio/app.js at main · NikhilanshSisodia/Project9_MyPortfolio · 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
//Cursor Animation

const cursor = document.querySelector('.cursor');
let timeout;

//Follow Cursor on mousemove
document.addEventListener('mousemove',function (e){
    let x = e.clientX;
    let y = e.clientY;

    cursor.style.top = y + 'px';
    cursor.style.left = x + 'px';
    cursor.style.display = 'block';

    //Cursor effect on mouse stopped
    function mouseStopped(){
        cursor.style.display = "none";
    }
    clearTimeout(timeout);
    timeout = setTimeout(mouseStopped, 800);
});

//Cursor effects on mouseout
document.addEventListener('mouseout', ()=>{
    cursor.style.display = "none";
});

//Menu

const toggleBtn = document.querySelector('.menu');
const cross = document.querySelector('.cross');
const menu = document.querySelector('.nav-links');
const body = document.querySelector('body');
const abtSection = document.querySelectorAll('.ContainerHidder');
const inputs = document.querySelectorAll('input');

toggleBtn.addEventListener('click',callMenu);
cross.addEventListener('click',callMenu);

for(i=0; i<inputs.length; i++){
    inputs[i].addEventListener('click', function(event) {
        event.preventDefault();
    });
}

function callMenu(){
    if(menu.getAttribute('id')=='null'){
        menu.setAttribute('id','flex');
        toggleBtn.style.display = 'none';
        cross.style.display = 'block';
        body.setAttribute('id','flex');
        abtSection[0].style.display = 'none';
        abtSection[1].style.display = 'none';
    }
    else if(menu.getAttribute('id')=='flex'){
        menu.setAttribute('id','null');
        toggleBtn.style.display = 'block';
        cross.style.display = 'none';
        body.setAttribute('id','null');
        abtSection[0].style.display = 'block';
        abtSection[1].style.display = 'block';
    }
}

//Links

const links = document.querySelectorAll('.link');

for(let i = 0; i<links.length; i++){
    links[i].addEventListener('click', callLink);
}

const media = () => {
    let q = matchMedia('(orientation: portrait)');
    if(q.matches){
        toggleBtn.style.display = 'block';
    }else{
        toggleBtn.style.display = 'none';
    }
}

function callLink(){
    menu.setAttribute('id','null');
    cross.style.display = 'none';
    toggleBtn.style.display = 'block';
    body.setAttribute('id','null');
    abtSection[0].style.display = 'block';
    abtSection[1].style.display = 'block';

    const media = () => {
        let q = matchMedia('(orientation: portrait)');
        if(q.matches){
            toggleBtn.style.display = 'block';
        }else{
            toggleBtn.style.display = 'none';
        }
    }

    media();
}

function reload(){
    window.location.reload()
}

onresize = media;
onload = media;