.jpg "Countdown timer using html css js") |
| Countdown timer using html css js |
In this article, we given a Countdown timer using html css js with source code as a project. Countdown timer is used to set a certain timing for any upcoming event as birthday, task, challenge or any vacation. It is commonly used to set a countdown timing. We given a process with source code to create a countdown timer using html css js.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Countdown timer using html css js. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Countdown-timer.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Countdown timer using html css js source code
Here we given a html, css and js source code of Countdown timer project as given -
HTML
In HTML, we created a structure of countdown timer by adding heading, text, inputs and button. We added a button to set and delete the timer. In the imput, we added a type of date to select for an event. Linked css and js for styling and functionality in html code. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Countdown Timers</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Event Countdown Timers</h1>
<div class="add-timer">
<input type="datetime-local" id="newDate" required>
<button onclick="addTimer()">Add Timer</button>
</div>
<div id="countdowns" class="countdowns">
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In CSS, we added a styling for a countdown timer structure. As we added a design to the text, input and buttons. Copy the given css code and paste it into style.css file.
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 90%;
}
h1 {
color: #333;
}
.add-timer {
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.add-timer input {
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.add-timer button {
padding: 8px 20px;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.add-timer button:hover {
background-color: #45a049;
}
.countdowns {
display: grid;
gap: 20px;
}
.countdown {
display: flex;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
padding: 10px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.countdown-item {
text-align: center;
margin: 0 10px;
}
.countdown-item span {
display: block;
font-size: 36px;
font-weight: bold;
color: #333;
}
.countdown-label {
font-size: 14px;
color: #666;
}
button.delete-button {
margin-top: 10px;
padding: 6px 12px;
border: none;
background-color: #ff4d4d;
color: white;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
button.delete-button:hover {
background-color: #e63946;
}Javascript
In JS, we added a functionality to set the countdown timer with the functions. We added many advanced functions to set a date. Added a innerhtml code for default structure. Copy the given js code and paste it into script.js file.
let timers = [];
function addTimer() {
const newDate = document.getElementById("newDate").value;
if (!newDate) return;
const countdown = {
id: Date.now(),
targetDate: new Date(newDate).getTime()
};
timers.push(countdown);
renderTimers();
document.getElementById("newDate").value = "";
}
function deleteTimer(id) {
timers = timers.filter(timer => timer.id !== id);
renderTimers();
}
function renderTimers() {
const countdownsContainer = document.getElementById("countdowns");
countdownsContainer.innerHTML = "";
timers.forEach(timer => {
const countdownHtml = `
<div class="countdown">
<div class="countdown-item">
<span id="days-${timer.id}">00</span>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-item">
<span id="hours-${timer.id}">00</span>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-item">
<span id="minutes-${timer.id}">00</span>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-item">
<span id="seconds-${timer.id}">00</span>
<div class="countdown-label">Seconds</div>
</div>
<button class="delete-button" onclick="deleteTimer(${timer.id})">Delete Timer</button>
</div>
`;
countdownsContainer.innerHTML += countdownHtml;
startCountdown(timer);
});
}
function startCountdown(timer) {
setInterval(function() {
const now = new Date().getTime();
const distance = timer.targetDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById(`days-${timer.id}`).innerText = formatTime(days);
document.getElementById(`hours-${timer.id}`).innerText = formatTime(hours);
document.getElementById(`minutes-${timer.id}`).innerText = formatTime(minutes);
document.getElementById(`seconds-${timer.id}`).innerText = formatTime(seconds);
if (distance < 0) {
clearInterval(countdownTimer);
document.getElementById(`days-${timer.id}`).innerText = "00";
document.getElementById(`hours-${timer.id}`).innerText = "00";
document.getElementById(`minutes-${timer.id}`).innerText = "00";
document.getElementById(`seconds-${timer.id}`).innerText = "00";
}
}, 1000);
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}Also see this -
Hope this helps you to know about Countdown timer using html css js with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects