Open-Space/script.js at main · Alena2020/Open-Space · 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
const correctPassword  = "TrustNo1";
const buttonOk = document.querySelector('input[type="button"].button-ok');
const buttonCheckboxes = document.querySelectorAll('input[type="checkbox"].button-checkbox');
const buttonRanges = document.querySelectorAll('input[type="range"].button-range');
const buttonLaunch = document.querySelector('input[type="button"].launch');
let rocket = document.querySelector('.rocket');
let style = getComputedStyle(rocket);


// Disabling the checkbuttons,levers and the launch button by default
function disable() {
  buttonCheckboxes.forEach(button => {
    button.setAttribute("disabled", "true");
  });
  buttonRanges.forEach(button => {
    button.setAttribute("disabled", "true");
  });
  buttonLaunch.setAttribute("disabled", "true");
}

function relevant() {
  let checkedButtonCheckboxes = true;
  let checkedButtonRanges = true;
  for (let index = 0; index < buttonCheckboxes.length; index++) {
    const element = buttonCheckboxes[index];
    if(!element.checked){
      checkedButtonCheckboxes = false;
    }
  }
  for (let index = 0; index < buttonRanges.length; index++) {
    const element = buttonRanges[index];
    if(element.value < 100) {
      checkedButtonRanges = false;
    }
  }
  if(checkedButtonCheckboxes && checkedButtonRanges) {
    buttonLaunch.removeAttribute("disabled", "false");
  } else {
    buttonLaunch.setAttribute("disabled", "true");
  }
}

// Enable the input  if the password is correct
function enable() {
  buttonCheckboxes.forEach(button => {
    button.removeAttribute("disabled", "false");
  });
  buttonRanges.forEach(button => {
    button.removeAttribute("disabled", "false");
  });

    buttonCheckboxes.forEach( button => {
      button.onchange = relevant;
    });
      buttonRanges.forEach( button => {
      button.onchange = relevant;
    });
}


// Checking password
function checkPassword() {
  let password = document.querySelector('.login').value;
  if(correctPassword === password){
    enable();
  }  else {
    console.log("incorrect password");
  }
}

// Fly
function fly() {
  setTimeout( function() {
    rocket.style.left = '350px';
    rocket.style.bottom = '200px';
  }, 1000);
  setTimeout( function() {
    rocket.style.left = '500px';
    rocket.style.bottom = '350px';
  }, 2000);
  setTimeout( function() {
    rocket.style.left = '700px';
    rocket.style.bottom = '550px';
  }, 4000);
  setTimeout( function() {
    rocket.style.left = '900px';
    rocket.style.bottom = '600px';
    rocket.style.transform = 'rotate(75deg)';
  }, 5000);
  setTimeout( function() {
    rocket.style.left = '1350px';
    rocket.style.bottom = '600px';
  }, 6000);
  setTimeout( function() {
    rocket.style.left = '50px';
    rocket.style.bottom = '600px';
  }, 7000);
  setTimeout( function() {
    rocket.style.left = '300px';
    rocket.style.bottom = '550px';
  }, 8000);
  setTimeout( function() {
    rocket.style.left = '750px';
    rocket.style.bottom = '450px';
  }, 9000);
  setTimeout( function() {
    rocket.style.left = '1250px';
    rocket.style.bottom = '400px';
  }, 10000);
}

function unCheck() {
  buttonCheckboxes.forEach(button => {
    button.checked = false;
  });
  buttonRanges.forEach(button => {
    button.value = 50;
  });
  buttonLaunch.setAttribute("disabled", "true");
}

function control() {
  //console.log('START');
  disable();
  buttonOk.addEventListener('click', () => checkPassword());
  //enable();
  unCheck();
  buttonLaunch.addEventListener('click', () => fly());
}

control();