steak-timer/script.js at master · victoriav3/steak-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
let countdown;
let totalSeconds = 0;
let timeLeft = 0;
let flipped = false;

// 🔊 sound
const alarm = new Audio("https://actions.google.com/sounds/v1/alarms/beep_short.ogg");
const flipBeep = new Audio("https://actions.google.com/sounds/v1/alarms/beep_short.ogg");

function goToSteak(name, seconds) {
  totalSeconds = seconds;
  timeLeft = seconds;
  flipped = false;

  document.getElementById("home-screen").classList.remove("active");
  document.getElementById("steak-screen").classList.add("active");

  document.getElementById("doneness-title").textContent = name;
  document.getElementById("message").textContent = "";

  startTimer();
}

function goHome() {
  clearInterval(countdown);

  document.getElementById("steak-screen").classList.remove("active");
  document.getElementById("home-screen").classList.add("active");

  document.getElementById("timer").textContent = "00:00";
  document.getElementById("progress-bar").style.width = "0%";
  document.getElementById("message").textContent = "";
}

function startTimer() {
  clearInterval(countdown);

  updateDisplay();
  updateProgress();

  countdown = setInterval(() => {
    timeLeft--;

    updateDisplay();
    updateProgress();

    // 🔪 flip moment
    if (!flipped && timeLeft <= totalSeconds / 2) {
      flipped = true;

      const msg = document.getElementById("message");
      msg.textContent = "🔪 Flip the steak!";

      // 🔊 beep sound
      flipBeep.play();

      // ⏱️ remove message after 5 seconds
      setTimeout(() => {
        msg.textContent = "";
      }, 5000);
    }

    // 🥩 finished
    if (timeLeft <= 0) {
      clearInterval(countdown);

      document.getElementById("timer").textContent = "READY 🥩";
      document.getElementById("progress-bar").style.width = "100%";
      document.getElementById("message").textContent = "";

      alarm.play();
    }

  }, 1000);
}

function updateDisplay() {
  const mins = Math.floor(timeLeft / 60);
  const secs = timeLeft % 60;

  document.getElementById("timer").textContent =
    `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
}

function updateProgress() {
  const percent = ((totalSeconds - timeLeft) / totalSeconds) * 100;
  document.getElementById("progress-bar").style.width = percent + "%";
}