my_static_portfolio/script.js at main · matanrotgolz/my_static_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
97
98
let pythonbar = document.getElementById('python');
let pythonPre = document.getElementById('python-pre');
let CPlusBar = document.getElementById('C++');
let cPlusPre = document.getElementById('Cplus-pre')
let cBar = document.getElementById('C');
let Cpre = document.getElementById('C-pre');
let htmlBar = document.getElementById('HTML');
let htmlPre = document.getElementById('HTML-pre');
let vhdlBar = document.getElementById('vhdl');
let vhdlPre = document.getElementById('vhdl-pre');
let cssBar = document.getElementById('css');
let cssPre = document.getElementById('css-pre');
let arduinoBar = document.getElementById('Arduino');
let arduinoPre = document.getElementById('arduino-pre');
let JsBar = document.getElementById('JS');
let JsPre = document.getElementById('js-pre');
const arrayBar = [pythonbar,CPlusBar,cBar,htmlBar,vhdlBar,cssBar];
const arrayPre = [pythonPre,cPlusPre,Cpre,htmlPre,vhdlPre,cssPre];
let i = 0;
let x = 0;
let y = 0;
function move(event) {
  if (i == 0) {
    i = 1;
    x = 1;
    y = 1;
    let elem15 = JsPre;
    let elem14 = JsBar;
    let elem13 = arduinoPre;
    let elem12 = arduinoBar;
    let elem11 = cssPre;
    let elem10 = cssBar;
    let elem9 = vhdlPre;
    let elem8 = vhdlBar;
    let elem7 = htmlPre;
    let elem6 = htmlBar;
    let elem5 = Cpre;
    let elem4 = cBar;
    let elem3 = cPlusPre;
    let elem2 = CPlusBar;
    let elem1 = pythonPre;
    let elem = pythonbar;
    let width3 = 1;
    let width2 = 1;
    let width1 = 1;
    let id = setInterval(frame, 10);
    let id2 = setInterval(frame2, 10);
    let id3 = setInterval(frame3, 10);
    function frame() {
      if (width1 >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width1++;
        elem15.innerHTML = width1 +"%";
        elem14.style.width = width1 +"%";
        elem13.innerHTML = width1 + "%";
        elem12.style.width = width1 + "%";
        elem11.innerHTML = width1 + "%";
        elem10.style.width = width1 + "%";
        elem7.innerHTML =  width1 + "%";
        elem6.style.width = width1 + "%";
        elem1.innerHTML = width1 + "%";
        elem.style.width = width1 + "%";
      }
    }
    function frame2() {
        if (width2 >= 50) {
          clearInterval(id2);
          x = 0;
        } else {
          width2++;
          elem5.innerHTML = width2+"%";
          elem4.style.width = width2 + "%";
          elem3.innerHTML = width2 + "%";
          elem2.style.width = width2 + "%";
        }
      }
      function frame3() {
        if (width3 >= 80) {
          clearInterval(id3);
          y = 0;
        } else {
          width3++;
          elem9.innerHTML = width3+"%";
          elem8.style.width = width3 + "%";
        }
      }
  }
  prog.removeEventListener('mouseover',move);
}


let prog = document.getElementById('prograssbar-container');
prog.addEventListener('mouseover',move);