Pomodoro-Timer/script.js at main · Devjack404/Pomodoro-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
const timerDisplay = document.getElementById("timerDisplay");
const startBtn = document.getElementById("startBtn");
const modeButtons = document.querySelectorAll(".mode-btn");

const modes = {
  pomodoro: 25 * 60,
  short: 5 * 60,
  long: 15 * 60,
};

let currentMode = "pomodoro";
let secondsLeft = modes[currentMode];
let timer;
let running = false;

function updateDisplay() {
  const min = String(Math.floor(secondsLeft / 60)).padStart(2, "0");
  const sec = String(secondsLeft % 60).padStart(2, "0");
  timerDisplay.textContent = `${min}:${sec}`;
}

function setMode(mode) {
  currentMode = mode;
  secondsLeft = modes[mode];
  updateDisplay();
  stopTimer();
  startBtn.textContent = "Start";

  modeButtons.forEach((btn) => btn.classList.remove("active"));
  const index = ["pomodoro", "short", "long"].indexOf(mode);
  if (index >= 0) modeButtons[index].classList.add("active");
}

function startTimer() {
  if (running) {
    stopTimer();
    startBtn.textContent = "Start";
  } else {
    running = true;
    timer = setInterval(() => {
      if (secondsLeft <= 0) {
        stopTimer();
        playAlarm();        // 🔔 Play ding.mp3
        showNotification(); // 🔔 Optional browser notif
        return;
      }
      secondsLeft--;
      updateDisplay();
    }, 1000);
    startBtn.textContent = "Pause";
  }
}

function stopTimer() {
  running = false;
  clearInterval(timer);
}

function resetTimer() {
  stopTimer();
  secondsLeft = modes[currentMode];
  updateDisplay();
  startBtn.textContent = "Start";
}

// 🔊 Suara ding saat selesai
function playAlarm() {
  const sound = document.getElementById("alarmSound");
  if (sound) {
    sound.currentTime = 0;
    sound.play().catch(() => {
      console.warn("Autoplay dicegah browser.");
    });
  }
}

// 🎵 Musik manual (lofi)
const music = document.getElementById("bgMusic");
const musicStatus = document.getElementById("musicStatus");

function toggleMusic() {
  if (!music) return;
  if (music.paused) {
    music.play();
    musicStatus.textContent = "Musik: ON";
  } else {
    music.pause();
    musicStatus.textContent = "Musik: OFF";
  }
}

// 🛎️ Notifikasi (opsional)
function showNotification() {
  if ("Notification" in window) {
    if (Notification.permission === "granted") {
      new Notification("⏰ Waktu Habis!", {
        body: "Waktunya istirahat atau lanjut kerja 💪",
        icon: "https://cdn-icons-png.flaticon.com/512/5956/5956551.png",
      });
    } else if (Notification.permission !== "denied") {
      Notification.requestPermission().then((perm) => {
        if (perm === "granted") showNotification();
      });
    }
  }
}

// 🔄 GSAP Animasi
gsap.to("#title", { opacity: 1, y: 0, duration: 1, delay: 0.3 });
gsap.to("#modeButtons", { opacity: 1, y: 0, duration: 1, delay: 0.5 });
gsap.to("#timerDisplay", { opacity: 1, y: 0, duration: 1, delay: 0.7 });
gsap.to("#controlButtons", { opacity: 1, y: 0, duration: 1, delay: 0.9 });

updateDisplay();