Scribd
Upload
2 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

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
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