Portfolio/function.js at main · ISE9218/Portfolio · 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
window.onload = function() {
    var body = document.body;
    var gridContainer = document.querySelector('.container');
    var logo = document.querySelector('.logo');
    var topleft = document.querySelector('.topleft');
    var topright = document.querySelector('.topright');
    var bottomleft = document.querySelector('.bottomleft');
    var bottomright = document.querySelector('.bottomright');
    var lines = document.querySelector('.lines');
    var top = document.querySelector('.top');
    var bottom = document.querySelector('.bottom');
    var right = document.querySelector('.right');
    var left = document.querySelector('.left');
    var sun = document.querySelector('.sun');
    var moon = document.querySelector('.moon');

      logo.addEventListener('mouseover', function() {
          gridContainer.style.gridTemplateColumns = '1fr 0.8fr 1fr';
          gridContainer.style.gridTemplateRows = '1fr 1.2fr 1fr';
          sun.style.left = '5%';
          lines.style.top = '25%';
          lines.style.right = '9%';
      });

      logo.addEventListener('mouseout', function() {
        gridContainer.style.gridTemplateColumns = '2fr 1fr 2fr';
        gridContainer.style.gridTemplateRows = '1.5fr 1fr 1.5fr';
        sun.style.left = '10%'
        lines.style.top = '33%';
        lines.style.right = '10%';
      });

      topleft.addEventListener('mouseover', function() {
          gridContainer.style.gridTemplateColumns = '5fr 1fr 2fr';
          gridContainer.style.gridTemplateRows = '2fr 1 fr 1.5fr';
          lines.style.right = '15%';
          sun.style.left = '15%';
      });

      topleft.addEventListener('mouseout', function() {
        gridContainer.style.gridTemplateColumns = '2fr 1fr 2fr';
        gridContainer.style.gridTemplateRows = '1.5fr 1fr 1.5fr';
        lines.style.right = '10%';
        sun.style.left = '10%';
      });

      topright.addEventListener('mouseover', function() {
          gridContainer.style.gridTemplateColumns = '2fr 1fr 5fr';
          gridContainer.style.gridTemplateRows = '2fr 1fr 1.5fr';
          lines.style.right = '15%';
          sun.style.left = '15%';
      });

      topright.addEventListener('mouseout', function() {
        gridContainer.style.gridTemplateColumns = '2fr 1fr 2fr';
        gridContainer.style.gridTemplateRows = '1.5fr 1fr 1.5fr';
        lines.style.right = '10%';
        sun.style.left = '10%';
      });

      bottomleft.addEventListener('mouseover', function() {
          gridContainer.style.gridTemplateColumns = '5fr 1fr 2fr';
          gridContainer.style.gridTemplateRows = '1.5fr 1fr 2fr';
          lines.style.right = '15%';
          sun.style.left = '15%';
      });

      bottomleft.addEventListener('mouseout', function() {
        gridContainer.style.gridTemplateColumns = '2fr 1fr 2fr';
        gridContainer.style.gridTemplateRows = '1.5fr 1fr 1.5fr';
        lines.style.right = '10%';
        sun.style.left = '10%';
      });

      bottomright.addEventListener('mouseover', function() {
          gridContainer.style.gridTemplateColumns = '2fr 1fr 5fr';
          gridContainer.style.gridTemplateRows = '1.5fr 1fr 2fr';
          lines.style.right = '15%';
          sun.style.left = '15%';
      });

      bottomright.addEventListener('mouseout', function() {
        gridContainer.style.gridTemplateColumns = '2fr 1fr 2fr';
        gridContainer.style.gridTemplateRows = '1.5fr 1fr 1.5fr';
        lines.style.right = '10%';
        sun.style.left = '10%';
      });

      sun.addEventListener('click', function() {
        document.querySelector("link[href='style.css']").href = "style-dark.css";
      });

      moon.addEventListener('click', function() {
        document.querySelector("link[href='style-dark.css']").href = "style.css";
      });
    };