Spaces:
Running
Running
File size: 4,809 Bytes
47df9fc |
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 132 133 134 135 136 137 |
document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
const timerDisplay = document.getElementById('timer-display');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const resetBtn = document.getElementById('reset-btn');
const hoursInput = document.getElementById('hours-input');
const minutesInput = document.getElementById('minutes-input');
const secondsInput = document.getElementById('seconds-input');
const alarmSelect = document.getElementById('alarm-select');
const volumeControl = document.getElementById('volume-control');
const testAlarmBtn = document.getElementById('test-alarm');
const alarmSound = document.getElementById('alarm-sound');
const themeToggle = document.getElementById('theme-toggle');
// Timer variables
let timer;
let totalSeconds = 0;
let remainingSeconds = 0;
let isRunning = false;
// Theme toggle
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
feather.replace();
});
// Initialize timer display
updateTimerDisplay(0);
// Start button click handler
startBtn.addEventListener('click', () => {
if (!isRunning) {
if (remainingSeconds === 0) {
const hours = parseInt(hoursInput.value) || 0;
const minutes = parseInt(minutesInput.value) || 0;
const seconds = parseInt(secondsInput.value) || 0;
totalSeconds = (hours * 3600) + (minutes * 60) + seconds;
remainingSeconds = totalSeconds;
}
if (remainingSeconds > 0) {
isRunning = true;
startBtn.disabled = true;
pauseBtn.disabled = false;
toggleInputs(true);
timer = setInterval(() => {
remainingSeconds--;
updateTimerDisplay(remainingSeconds);
if (remainingSeconds <= 0) {
clearInterval(timer);
isRunning = false;
startBtn.disabled = false;
pauseBtn.disabled = true;
playAlarm();
}
}, 1000);
}
}
});
// Pause button click handler
pauseBtn.addEventListener('click', () => {
if (isRunning) {
clearInterval(timer);
isRunning = false;
startBtn.disabled = false;
pauseBtn.disabled = true;
}
});
// Reset button click handler
resetBtn.addEventListener('click', () => {
clearInterval(timer);
isRunning = false;
remainingSeconds = 0;
updateTimerDisplay(0);
startBtn.disabled = false;
pauseBtn.disabled = true;
toggleInputs(false);
});
// Test alarm button click handler
testAlarmBtn.addEventListener('click', () => {
playAlarm();
});
// Volume control change handler
volumeControl.addEventListener('input', () => {
alarmSound.volume = volumeControl.value;
});
// Update timer display
function updateTimerDisplay(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
timerDisplay.textContent =
`${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
// Play alarm sound
function playAlarm() {
const soundFile = {
'beep': 'https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3',
'bell': 'https://assets.mixkit.co/sfx/preview/mixkit-digital-clock-digital-alarm-buzzer-992.mp3',
'digital': 'https://assets.mixkit.co/sfx/preview/mixkit-simple-digital-clock-alarm-995.mp3'
}[alarmSelect.value];
alarmSound.src = soundFile;
alarmSound.volume = volumeControl.value;
alarmSound.play();
}
// Toggle input fields disabled state
function toggleInputs(disabled) {
hoursInput.disabled = disabled;
minutesInput.disabled = disabled;
secondsInput.disabled = disabled;
}
// Input validation
function validateInput(input, max) {
if (input.value > max) {
input.value = max;
} else if (input.value < 0) {
input.value = 0;
}
}
hoursInput.addEventListener('change', () => validateInput(hoursInput, 23));
minutesInput.addEventListener('change', () => validateInput(minutesInput, 59));
secondsInput.addEventListener('change', () => validateInput(secondsInput, 59));
}); |