Create a Custom Countdown | Best Countdown Maker | Html Css Javascript
Welcome🎉 to Code With Random blog. In this blog, we learn how we create Custom Countdown. We use HTML, Css, and javascript for this Custom Countdown. I hope you enjoy our blog so let’s start with a basic HTML structure for Custom Countdown.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Countdown</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Video Background -->
<video class="video-background" loop muted autoplay>
<source src="time.mp4" />
</video>
<div class="video-overlay"></div>
<!-- Container -->
<div class="container">
<!-- Input -->
<div class="input-container" id="input-container">
<h1>Create a Custom Countdown</h1>
<form class="form" id="countdownForm">
<label for="title">Title</label>
<input
type="text"
id="title"
placeholder="What are you counting down to?"
/>
<label for="date-picker">Select a Date</label>
<input type="date" id="date-picker" />
<button type="submit">Submit</button>
</form>
</div>
<!-- Countdown -->
<div class="countdown" id="countdown" hidden>
<h1 id="countdown-title">Countdown Title Here</h1>
<ul>
<li><span></span> Days</li>
<li><span></span> Hours</li>
<li><span></span> Minutes</li>
<li><span></span> Seconds</li>
</ul>
<button id="countdown-button">Reset</button>
</div>
<!-- Countdown Completed -->
<div class="complete" id="complete" hidden>
<h1 class="complete-title">Countdown Complete!</h1>
<h1 id="complete-info"></h1>
<button id="complete-button">New Countdown</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
There is all the HTML code for the Custom Countdown. Now, you can see output without CSS, then we write css & javascript for the Custom Countdown.
output
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
overflow-y: hidden;
display: flex;
align-items: center;
font-family: 'Nunito', Arial, Helvetica, sans-serif;
}
/* Video Background */
.video-background {
position: fixed;
right: 0;
bottom: 0;
width: 100vw;
height: auto;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video-overlay {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background: rgb(255 255 255 / 0.35);
}
/* Container */
.container {
min-width: 580px;
min-height: 304px;
color: black;
margin: 0 auto;
padding: 25px 50px;
border-radius: 5px;
z-index: 2;
display: flex;
justify-content: center;
background: rgb(255 255 255 / 0.85);
}
.input-container {
position: relative;
top: 20px;
}
h1 {
font-size: 35px;
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
/* Form */
.form {
width: 480px;
}
label {
font-weight: bold;
margin-left: 10px;
}
input {
width: 95%;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
background: #fff;
outline: none;
font-family: 'Nunito', Arial, Helvetica, sans-serif;
}
/* Button */
button {
width: 100%;
height: 40px;
border-radius: 20px;
margin-top: 15px;
border: none;
text-transform: uppercase;
background: #006959;
color: white;
cursor: pointer;
outline: none;
}
button:hover {
filter: brightness(110%);
}
/* Countdown */
ul {
margin-left: -45px;
}
li {
display: inline-block;
font-size: 30px;
list-style-type: none;
padding: 10px;
text-transform: uppercase;
}
li span {
display: block;
font-size: 80px;
text-align: center;
}
/* Complete */
.complete {
position: relative;
top: 60px;
}
.complete-title {
animation: complete 4s infinite;
}
@keyframes complete {
0% {
color: red;
}
25% {
color: rgb(195, 207, 18);
}
50% {
color: green;
transform: scale(1.5);
}
75% {
color: blue;
}
100% {
color: purple;
}
}
/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 600px) {
.video-background {
height: 100vh;
width: 100vw;
}
video {
object-fit: cover;
object-position: 70%;
margin-top: -1px;
}
.container {
min-width: unset;
width: 95vw;
min-height: 245px;
padding: 20px;
margin: 10px;
}
.input-container {
top: unset;
}
.countdown {
position: relative;
top: 10px;
}
.form {
width: unset;
}
input {
width: 93%;
}
h1 {
font-size: 20px;
}
li {
font-size: 15px;
}
li span {
font-size: 40px;
}
}
Here is our updated output CSS.
output
Javascript code
// Elements
const inputContainer = document.getElementById('input-container');
const countdownForm = document.getElementById('countdownForm');
const dateEl = document.getElementById('date-picker');
const titleEl = document.getElementById('title');
const countdownEl = document.getElementById('countdown');
const countdownElTitle = document.getElementById('countdown-title');
const resetBtn = document.getElementById('countdown-button');
const timeElements = document.querySelectorAll('span');
const completeEl = document.getElementById('complete');
const completeElInfo = document.getElementById('complete-info');
const completeBtn = document.getElementById('complete-button');
// Global Variables
let countdownTitle = '';
let countdownDate = '';
let countdownValue = new Date();
let countdownActive;
let savedCountdown;
// Time Variables
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
// Set date input minimum with todays date
const today = new Date().toISOString().split('T')[0];
dateEl.setAttribute('min', today);
// Populate countdown / complete UI
function updateDOM() {
countdownActive = setInterval(() => {
// Get the time between Jan 1, 1970 to the entered date, returned in milliseconds.
const now = new Date().getTime();
const distance = countdownValue - now;
// Split up the time held in distance into days, hours, minutes, and seconds.
const days = Math.floor(distance / day);
const hours = Math.floor((distance % day) / hour);
const minutes = Math.floor((distance % hour) / minute);
const seconds = Math.floor((distance % minute) / second);
// Hide Input
inputContainer.hidden = true;
// If countdown has ended, show complete messaging
if (distance < 0) {
countdownEl.hidden = true;
clearInterval(countdownActive);
completeElInfo.textContent = `${countdownTitle} countdown finished on ${countdownDate}`;
completeEl.hidden = false;
} else {
// Else, Show countdown in progress
// Populate the countdown
countdownElTitle.textContent = `${countdownTitle}`;
timeElements[0].textContent = `${days}`;
timeElements[1].textContent = `${hours}`;
timeElements[2].textContent = `${minutes}`;
timeElements[3].textContent = `${seconds}`;
completeEl.hidden = true;
countdownEl.hidden = false;
}
}, second);
}
// Take Values from form input
function updateCountdown(event) {
event.preventDefault();
countdownTitle = event.srcElement[0].value;
countdownDate = event.srcElement[1].value;
savedCountdown = {
title: countdownTitle,
date: countdownDate,
};
localStorage.setItem('countdown', JSON.stringify(savedCountdown));
// Check for valid date
if (countdownDate === '') {
alert('Please select a date for the countdown.');
} else {
// Get the numbner version of current date and update DOM
countdownValue = new Date(countdownDate).getTime();
updateDOM();
}
}
// Reset all values
function reset() {
// Hide Countdown and show input
countdownEl.hidden = true;
completeEl.hidden = true;
inputContainer.hidden = false;
// Stop the countdown
clearInterval(countdownActive);
// Reset Values
countdownTitle = '';
countdownDate = '';
titleEl.value = '';
dateEl.value = '';
localStorage.removeItem('countdown');
}
// Get the countdown from localStorage if available
function restorePreviousCountdown() {
if (localStorage.getItem('countdown')) {
inputContainer.hidden = true;
savedCountdown = JSON.parse(localStorage.getItem('countdown'));
countdownTitle = savedCountdown.title;
countdownDate = savedCountdown.date;
countdownValue = new Date(countdownDate).getTime();
updateDOM();
}
}
// Event Listener
countdownForm.addEventListener('submit', updateCountdown);
resetBtn.addEventListener('click', reset);
completeBtn.addEventListener('click', reset);
// On Load
restorePreviousCountdown();
Final output
Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Custom Countdown. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create a Custom Countdown using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
the button ‘Submit’ doesn’t work..Please tell me how to solve it ?
the button 'Submit' doesn't work..Please tell me how to solve it ?