break_timer/app.js at master · marcinszablowski/break_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
118
document.addEventListener('DOMContentLoaded', function () {

  let countdown;
  let overtime;
  let audio = new Audio("./audio/bell.mp3")
  const display = document.querySelector(".display");
  const timeDisplay = document.querySelector(".display-time");
  const hourDisplay = document.querySelector(".display-hour");
  const buttons = document.querySelectorAll("[data-time]");

  function time(seconds) {
    // Clear any existing timers
    timeDisplay.style.color = "black";
    clearInterval(countdown);
    clearInterval(overtime);

    const now = Date.now();
    const then = now + seconds * 1000;
    displayTimeLeft(seconds);
    displayEndHour(then);


    countdown = setInterval(() => {
      // Time left in seconds
      const secondsLeft = Math.round((then - Date.now()) / 1000);

      // Check if it should stop and go over
      if (secondsLeft <= 0) {
        timeDisplay.style.color = "white";
        hourDisplay.style.color = "white";
        display.style.backgroundColor = "#e60000";
      }

      if (secondsLeft <= 0) {
        clearInterval(countdown);
        displayTimeOver();
        return;
      }

      // Display
      displayTimeLeft(secondsLeft);

      if (secondsLeft < 10) {
        timeDisplay.style.color = "red";
      }

      if (secondsLeft === 0) {
        audio.play();
      }
    }, 1000);
  }


  function displayTimeOver() {

    let minutesOver = 0;
    let secondsOver = 0;

    timeDisplay.textContent = "0:00";

    overtime = setInterval(() => {
      secondsOver++;
      if (secondsOver === 60) {
        secondsOver = 0;
        minutesOver++;
      }
      console.log({ minutesOver, secondsOver });
      let display = `-${minutesOver}:${((secondsOver < 10) ? "0" : "")}${secondsOver}`
      timeDisplay.textContent = display;
    }, 1000)

  }

  function displayTimeLeft(seconds) {

    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;

    console.log({ minutes, remainderSeconds });
    let display = `${minutes}:${((remainderSeconds < 10 && remainderSeconds >= 0) ? "0" : "")}${remainderSeconds}`;
    document.title = display;
    timeDisplay.textContent = display;

    if (remainderSeconds <= 0) {
      timeDisplay.style.color = "white";
      hourDisplay.style.color = "white";
      // display.style.backgroundColor = "#e60000";
    }
  }

  function displayEndHour(timestamp) {
    const end = new Date(timestamp);
    const hour = end.getHours();
    const minutes = end.getMinutes();
    hourDisplay.textContent = `Koniec przerwy ${hour}:${minutes < 10 ? "0" : ""}${minutes}`;
  }

  function startTimer() {
    const seconds = parseInt(this.dataset.time);
    time(seconds);
    display.style.backgroundColor = "white";
    timeDisplay.style.color = "black";
    hourDisplay.style.color = "black";
  }

  buttons.forEach(button => button.addEventListener("click", startTimer));

  document.customForm.addEventListener("submit", function (e) {
    e.preventDefault();
    const minutes = this.minutes.value;
    time(minutes * 60);
    this.reset();
    display.style.backgroundColor = "white";
    timeDisplay.style.color = "black";
    hourDisplay.style.color = "black";
  })

});