<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi Timer</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
padding: 40px 20px;
background: linear-gradient(to right, #f8f9fd, #e2ecf7);
color: #333;
text-transform: uppercase;
}
h1 {
text-align: center;
margin-bottom: 40px;
color: #2a2a2a;
font-size: 2.5rem;
}
.input-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.input-container input,
.input-container button {
padding: 10px 15px;
border-radius: 8px;
border: 1px solid #ccc;
font-size: 16px;
}
.input-container button {
background: #4b7bec;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.3s;
}
.input-container button:hover {
background: #3867d6;
}
#timersContainer {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.timer {
width: 90%;
max-width: 500px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
padding: 15px 20px 20px;
position: relative;
transition: transform 0.2s;
}
.timer:hover {
transform: scale(1.01);
}
.close-icon {
position: absolute;
top: 10px;
right: 12px;
font-size: 18px;
font-weight: bold;
color: #d33;
cursor: pointer;
background: transparent;
border: none;
}
.timer-row {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to right, #e6ffe6, #b3ffb3);
border-radius: 8px;
padding: 12px 16px;
font-weight: bold;
font-size: 20px;
color: #333;
margin-bottom: 15px;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
}
.timer-controls {
display: flex;
justify-content: center;
gap: 10px;
}
.timer-controls button {
padding: 7px 12px;
font-size: 14px;
border: none;
border-radius: 6px;
background-color: #4b7bec;
color: white;
cursor: pointer;
transition: background 0.3s;
}
.timer-controls button:hover {
background-color: #3867d6;
}
</style>
</head>
<body>
<h1>Multi Countdown Timers</h1>
<div class="input-container">
<input type="text" id="timerName" placeholder="Timer Name">
<input type="number" id="minutes" placeholder="Min" min="0">
<input type="number" id="seconds" placeholder="Sec" min="0" max="59">
<button onclick="addTimer()">Add Timer</button>
</div>
<div id="timersContainer"></div>
<script>
let timerId = 0;
const timers = {};
function formatTime(seconds) {
const mins = String(Math.floor(seconds / 60)).padStart(2, '0');
const secs = String(seconds % 60).padStart(2, '0');
return `${mins}:${secs}`;
}
function updateDisplay(id) {
document.getElementById(`display-${id}`).textContent = formatTime(timers[id].timeLeft);
}
function addTimer() {
const name = document.getElementById('timerName').value || 'Timer';
const minutes = parseInt(document.getElementById('minutes').value) || 0;
const seconds = parseInt(document.getElementById('seconds').value) || 0;
const totalSeconds = minutes * 60 + seconds;
if (totalSeconds <= 0) {
alert("Please enter a valid time.");
return;
}
const timerDiv = document.createElement('div');
timerDiv.className = 'timer';
timerDiv.id = `timer-${timerId}`;
timerDiv.innerHTML = `
<button class="close-icon" onclick="deleteTimer(${timerId})">×</button>
<div class="timer-row">
<span class="timer-name">${name}</span>
<span id="display-${timerId}">${formatTime(totalSeconds)}</span>
</div>
<div class="timer-controls">
<button onclick="startTimer(${timerId})">Start</button>
<button onclick="pauseTimer(${timerId})">Pause</button>
<button onclick="resetTimer(${timerId})">Reset</button>
</div>
`;
document.getElementById('timersContainer').appendChild(timerDiv);
timers[timerId] = {
timeLeft: totalSeconds,
initialTime: totalSeconds,
interval: null
};
timerId++;
}
function startTimer(id) {
if (timers[id].interval) return;
timers[id].interval = setInterval(() => {
if (timers[id].timeLeft > 0) {
timers[id].timeLeft--;
updateDisplay(id);
} else {
clearInterval(timers[id].interval);
timers[id].interval = null;
alert(`"${document.querySelector(`#timer-${id} .timer-name`).textContent}" is done!`);
}
}, 1000);
}
function pauseTimer(id) {
clearInterval(timers[id].interval);
timers[id].interval = null;
}
function resetTimer(id) {
pauseTimer(id);
timers[id].timeLeft = timers[id].initialTime;
updateDisplay(id);
}
function deleteTimer(id) {
pauseTimer(id);
const timerDiv = document.getElementById(`timer-${id}`);
if (timerDiv) timerDiv.remove();
delete timers[id];
}
</script>
</body>
</html>
