Scribd
Upload
7 views3 pages

Week 10 - Int219

This document contains an HTML code for a Countdown Timer application. It includes a user interface with an input field for seconds and a button to start the countdown, along with JavaScript functionality to manage the timer. The timer updates every second and displays 'Time's up!' when the countdown reaches zero.

Uploaded by

skilsoftwares
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views3 pages

Week 10 - Int219

This document contains an HTML code for a Countdown Timer application. It includes a user interface with an input field for seconds and a button to start the countdown, along with JavaScript functionality to manage the timer. The timer updates every second and displays 'Time's up!' when the countdown reaches zero.

Uploaded by

skilsoftwares
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

NAME: Sumanth kuna

week:10
Roll no:41
INT:219

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-green-700 flex justify-center items-center h-screen">
<div class="bg-white rounded-lg shadow-lg p-6 w-80 text-center">
<h1 class="text-xl font-bold text-green-700 mb-4">Countdown Timer</h1>
<input type="number" id="timeInput" placeholder="Enter Seconds"
class="w-full p-2 border border-green-800 rounded-md text-center text-
lg focus:outline-green-900">
<button onclick="startCountdown()"
class="w-full bg-green-800 text-white py-2 mt-3 rounded-md
hover:bg-green-700 transition shadow-lg shadow-gray-500
">
Start Countdown
</button>
<div id="timer" class="mt-4 p-2 text-2xl font-bold text-gray-
700">00:00</div>
</div>

<script>
let countdown;
function startCountdown() {
clearInterval(countdown);
const input = document.getElementById("timeInput").value;
let timeLeft = parseInt(input, 10);

if (isNaN(timeLeft) || timeLeft <= 0) {


document.getElementById("timer").innerText = "Invalid input";
return;
}

function updateTimerDisplay() {
let minutes = Math.floor(timeLeft / 60);
let seconds = timeLeft % 60;
document.getElementById("timer").innerText =
String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2,
"0");
}

updateTimerDisplay();

countdown = setInterval(() => {


if (timeLeft <= 0) {
clearInterval(countdown);
document.getElementById("timer").innerText = "Time's up!";
} else {
timeLeft--;
updateTimerDisplay();
}
},1000);
}
</script>
</body>
</html>

You might also like