Reaction-Timer/script.js at main · obdow/Reaction-Timer · 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
let timer;
let startDate;
let button = document.querySelector("#button");
let startInstructions = document.querySelector("#start-instructions");
let timerElement = document.querySelector("#timer");
let fail = document.querySelector("#fail");
let hide = document.querySelector("#hide");
let hidep = document.querySelector("#hide p");
let bar = document.querySelector("#bar");
let firstBest = document.querySelector("#best-time");
let secondBest = document.querySelector("#second-best");
let thirdBest = document.querySelector("#third-best");
let infoQuip = document.querySelector("#info");
let id;

if(localStorage.getItem("first")){
  firstBest.innerHTML = localStorage.first;
  secondBest.innerHTML = localStorage.second;
  thirdBest.innerHTML = localStorage.third;
} else {
  firstBest.innerHTML = "none";
  secondBest.innerHTML = "";
  thirdBest.innerHTML = "";
  localStorage.first = 999;
  localStorage.second = 999;
  localStorage.third = 999;
}


function start() {
  let randTime = Math.random() * 1000 + 2000;
  timer = setTimeout(changeColor, randTime);

  button.onclick = reactionClick;
  button.classList.remove("button-red");
  button.classList.add("button-red-again");

  startInstructions.style.fontSize = "0";
  startInstructions.style.color = "rgba(0, 0, 0, 0)";


  hide.style.color = "rgba(0, 0, 0, 0)";
  hide.style.flex = "0";
  hidep.style.transform = "scale(0)";
  bar.style.backgroundColor = "rgba(0, 0, 0, 0)";
  bar.style.transform = "scale(0)";

  infoQuip.style.transform = "scale(0)";

  timerElement.style.fontSize = "30px";

  timerElement.innerHTML = "0.000";

  fail.style.transform = "scale(0)";
  fail.style.color = "rgba(0, 0, 0, 0)";
}

function updateTimer() {
  let elapsedTime = (new Date() - startDate) / 1000;
  timerElement.innerHTML = elapsedTime.toFixed(3);
  id = window.requestAnimationFrame(updateTimer);
}

function changeColor() {
  button.classList.remove("button-red-again");
  button.classList.add("button-green");
  startDate = new Date();
  id = window.requestAnimationFrame(updateTimer);
}

function reactionClick() {
  window.cancelAnimationFrame(id);
  button.onclick = start;

  if (!button.classList.contains("button-green")) {
    fail.style.transform = "scale(1)";
    fail.style.color = "black";

    clearTimeout(timer);
  } else {
    let finalTime = (new Date() - startDate) / 1000;
    timerElement.innerHTML = finalTime;

    if(finalTime < localStorage.getItem("first")){
      localStorage.second = localStorage.first;
      secondBest.innerHTML = localStorage.second;

      localStorage.first = finalTime;
      firstBest.innerHTML = localStorage.first;
      console.log(localStorage.getItem("first"));
    } else if(finalTime < localStorage.getItem("second")) {
      localStorage.third = localStorage.second;
      thirdBest.innerHTML = localStorage.third;

      localStorage.second = finalTime;
      secondBest.innerHTML = localStorage.second;
    } else if(finalTime < localStorage.getItem("third")) {
      localStorage.third = finalTime;
      thirdBest.innerHTML = localStorage.third;
    }
  }

  hide.style.color = "black";
  hidep.style.transform = "scale(1)";
  hide.style.flex = "1";
  bar.style.backgroundColor = "black";
  bar.style.transform = "scale(1)";

  button.classList.remove("button-red-again");
  button.classList.remove("button-green");
  button.classList.add("button-red");

  startInstructions.style.fontSize = "20px";
  startInstructions.style.color = "black";

  timerElement.style.fontSize = "20px";
}