Timer

Code

<!DOCTYPE html>

<head>

<title>Custom Timer</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #333;

color: white;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

text-align: center;

}

.container {

background-color: #444;

padding: 40px;

border-radius: 10px;

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);

}

.timer {

font-size: 2rem;

margin-bottom: 20px;

}

.btn {

padding: 10px 20px;

background-color: #ff6f61;

color: white;

border: none;

border-radius: 30px;

font-size: 1.2rem;

cursor: pointer;

transition: background-color 0.3s ease;

}

.btn:hover {

background-color: #ff3f2f;

}

#timeUp {

display: none;

font-size: 2rem;

color: #ff6f61;

margin-bottom: 20px;

}

</style>

</head>

<body>

<h1>Set Timer</h1>

<label for="timerSelect">Choose Timer:</label>

<button class="btn" onclick="startTimer()">Start Timer</button>

<button class="btn" id="resetButton" style="display: none;" onclick="resetTimer()">Reset Time

</center>

</button>

</div>

let timer;

let timeLeft;

let timerDisplay = document.getElementById('timerDisplay');

let timeUpMessage = document.getElementById('timeUp');

let resetButton = document.getElementById('resetButton');

function startTimer() {

let selectedTime = document.getElementById('timerSelect').value;

timeLeft = selectedTime * 60; // convert minutes to seconds

timeUpMessage.style.display = 'none';

resetButton.style.display = 'none';

// Update timer every second

timer = setInterval(function() {

if (timeLeft <= 0) {

clearInterval(timer);

timerDisplay.style.display = 'none';

timeUpMessage.style.display = 'block';

resetButton.style.display = 'block';

} else {

let minutes = Math.floor(timeLeft / 60);

let seconds = timeLeft % 60;

timerDisplay.innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;

}

timeLeft--;

}, 1000);

}

function resetTimer() {

timeUpMessage.style.display = 'none';

resetButton.style.display = 'none';

timerDisplay.style.display = 'block';

timerDisplay.innerText = '0:00';

}

</script>

</body>

</html>