0% found this document useful (0 votes)
3 views3 pages

Countdown Timer Code

The document provides complete code for a simple countdown timer using HTML, CSS, and JavaScript. Users can input a countdown time in seconds, start the timer, and reset it as needed, with the timer updating dynamically every second. The code includes a user interface with buttons for starting and resetting the timer, and displays the remaining time in MM:SS format.

Uploaded by

ramanakishore14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views3 pages

Countdown Timer Code

The document provides complete code for a simple countdown timer using HTML, CSS, and JavaScript. Users can input a countdown time in seconds, start the timer, and reset it as needed, with the timer updating dynamically every second. The code includes a user interface with buttons for starting and resetting the timer, and displays the remaining time in MM:SS format.

Uploaded by

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

Countdown Timer Code

Here’s the complete HTML, CSS, and JavaScript code for a simple countdown timer:

📝 Features:
✅ User inputs countdown time in seconds.
✅ Start button begins the countdown.
✅ Timer updates dynamically every second.
✅ Reset button stops and clears the timer.
🔹 HTML (index.html)
html

<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
<h2>Countdown Timer</h2>
<input type="number" id="timeInput" placeholder="Enter seconds">
<button id="startBtn">Start</button>
<button id="resetBtn">Reset</button>
<h1 id="displayTimer">00:00</h1>
</div>

<script src="script.js"></script>
</body>
</html>

🎨 CSS (styles.css)
css

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}

.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h2 {

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 1/3
margin-bottom: 10px;
}

input {
width: 100px;
padding: 8px;
text-align: center;
font-size: 16px;
margin-bottom: 10px;
}

button {
margin: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
}

#startBtn {
background: #28a745;
color: white;
}

#resetBtn {
background: #dc3545;
color: white;
}

h1 {
margin-top: 20px;
font-size: 36px;
}

🚀 JavaScript (script.js)
js

let countdown;
const displayTimer = document.getElementById('displayTimer');
const timeInput = document.getElementById('timeInput');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');

startBtn.addEventListener('click', () => {
clearInterval(countdown); // Clear existing countdown if any
let seconds = parseInt(timeInput.value);

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


alert("Please enter a valid number of seconds.");
return;
}

updateDisplay(seconds);

countdown = setInterval(() => {


seconds--;
updateDisplay(seconds);

if (seconds <= 0) {
clearInterval(countdown);
}
}, 1000);
});

resetBtn.addEventListener('click', () => {
clearInterval(countdown);
timeInput.value = "";
updateDisplay(0);

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 2/3
});

function updateDisplay(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
displayTimer.textContent = `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}
}

🎯 How It Works:
1. User enters seconds in the input field.
2. Clicking "Start" begins the countdown.
3. The timer updates every second, showing MM:SS format.
4. Clicking "Reset" stops the countdown and clears the display.

🎬 Live Demo Experience


💡 Try it out by copying the above code into your own project! 🚀

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 3/3

You might also like