Introduction: have you ever make a countdown timer for a website or a fun project?
You can do it with a little Java, HTML, and CSS! We'll show you how in this easy tutorial.
What You'll Need:
Basic knowledge of Java, HTML,
and CSS A text editor like Notepad or VS Code A web browser.
Step 1: Setting Up Your FilesFirst,
open your text editor. Then, make three new files:
- index.html
- script.js
- Style.css
Step 2: Writing HTML (index.html)
Let's start with the structure of our webpage. In the index.html file, add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Stopwatch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Countdown Stopwatch</h1>
<div id="display"></div>
<button onclick="startTimer()">Start</button>
<button onclick="stopTimer()">Stop</button>
<button onclick="resetTimer()">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 3: Adding CSS (styles.css)
Now let's make our countdown stopwatch look nice with some CSS
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
margin-top: 50px;
}
#display {
font-size: 36px;
margin-bottom: 20px;
}
button {
font-size: 18px;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
}
Countdown Stopwatch
Countdown Stopwatch
Step 4: Writing Java Script (script.js)
Now We will write Functionality in java Script this will Work As function Of countdown.
Add this Code into into Html with <sript>code**</script> Tag.
let countdown;
let timerDisplay = document.getElementById('display');
let secondsInput = 10; // Change this to set the countdown time in seconds
function displayTimeLeft(seconds) {
const minutes = Math.floor(seconds / 60);
const remainderSeconds = seconds % 60;
const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
timerDisplay.textContent = display;
}
function timer(seconds) {
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
if (secondsLeft < 0) {
clearInterval(countdown);
return;
}
displayTimeLeft(secondsLeft);
}, 1000);
}
function startTimer() {
clearInterval(countdown);
timer(secondsInput);
}
function stopTimer() {
clearInterval(countdown);
}
function resetTimer() {
clearInterval(countdown);
displayTimeLeft(secondsInput);
}
Countdown Stopwatch
Countdown Stopwatch
Step 5: Explanation of the Code
- The HTML (index.html) sets up the structure of our webpage.
- The CSS (styles.css) makes our countdown stopwatch look good.
- The Java Script (script.js) does the heavy lifting:
- It calculates the remaining time.
- Updates the display every second.
- Allows you to start, stop, and reset the timer.
Step 6: Running Your Countdown Stopwatch
- Open javascript in your web browser.
- You'll see the countdown stopwatch.
- Click "Start" to begin the countdown.
- Click "Stop" to pause the countdown.
- Click "Reset" to start over.
That's it. You've created a countdown stopwatch using Java, HTML, and CSS. Feel free to customize the styles and timer settings to fit your needs.
0 Comments