JavaScript countdown timers are used on a variety of e-commerce and under-construction websites to keep users up to date. We see on different types of e-commerce websites that a kind of countdown starts sometime before the arrival of any product or offer.
In this tutorial, you’ll learn how to create a countdown timer in JavaScript from scratch.
Digital Countdown in JavaScript [Source Codes]
To create this program [Countdown]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown javascript</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="card-img">
<img src="img/spider-man.png" alt="" class="card">
</div>
<div class="card-details">
<h1 class="title">
spider-man : no way home
</h1>
<h3 class="date">
exclusivity watch movie on
<span class="date-day">
Monday, 19 october 2021
</span>
</h3>
<p>Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Vel ratione deserunt ea
perspiciatis. Suscipit, itaque
eaque possimus at molestiae
quaerat!</p>
<div class="countdown">
<!-- days -->
<div class="countdown-format">
<div>
<h3 class="day">20</h3>
<span>days</span>
</div>
</div>
<!-- hours -->
<div class="countdown-format">
<div>
<h3 class="day">20</h3>
<span>hours</span>
</div>
</div>
<!-- mins -->
<div class="countdown-format">
<div>
<h3 class="day">20</h3>
<span>mins</span>
</div>
</div>
<!-- secs -->
<div class="countdown-format">
<div>
<h3 class="day">20</h3>
<span>secs</span>
</div>
</div>
</div>
<button class="btn">
watch trailer
</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Oswald', sans-serif;
background: #efefef;
}
.container {
position: relative;
background: #fff;
margin: 30px;
overflow: hidden;
border-radius: 10px;
filter: drop-shadow(0px 0px 10px
rgba(0, 0, 0, 0.5));
}
.card-img {
position: relative;
width: 100%;
}
.card-img .card {
position: relative;
width: 100%;
top: 20%;
right: 15%;
margin: auto;
filter: drop-shadow(-6px 40px 23px
rgba(0, 0, 0, 0.5));
}
.card-details {
position: relative;
width: 100%;
padding: 40px;
}
.card-details .title {
margin-bottom: 20px;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 3px;
color: #444;
}
.card-details .date {
margin-bottom: 20px;
}
.card-details .date-day {
color: #6179fe;
}
.card-details p {
margin-bottom: 20px;
font-size: 14px;
line-height: 1.6;
color: #444;
}
.countdown {
display: flex;
}
.countdown-format {
width: 5rem;
height: 5rem;
margin-right: 1rem;
display: grid;
place-items: center;
background: #000;
color: #fff;
text-align: center;
}
.countdown h3 {
font-size: 2rem;
letter-spacing: 3px;
}
.countdown-format span {
display: block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.85rem;
color: #ccc;
}
.card-details .btn {
width: 150px;
margin-top: 50px;
padding: 15px 25px;
border: none;
border-radius: 7px;
background: #000;
color: #fff;
font-size: 18px;
cursor: pointer;
}
@media screen and (min-width: 992px) {
.container {
display: flex;
width: 70%;
height: auto;
top: 50px;
left: 15%;
margin: 0;
}
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const weekdays = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
];
const dates = document.querySelector('.date span');
const countdown = document.querySelector('.countdown');
const items = document.querySelectorAll('.countdown-format h3');
let tempDate = new Date();
let tempYear = tempDate.getFullYear();
let tempMonth = tempDate.getMonth();
let tempDay = tempDate.getDate();
// months are ZERO index based;
const FutureDate = new Date(tempYear, tempMonth, tempDay + 10, 11, 30, 0);
// let FutureDate = new Date(2021, 11, 17);
const year = FutureDate.getUTCFullYear();
let month = FutureDate.getMonth();
month = months[month];
const date = FutureDate.getDate();
const weekday = weekdays[FutureDate.getDay()];
dates.textContent = `${weekday}, ${date} ${month} ${year}`;
// future date
const FutureTime = FutureDate.getTime();
function getRemainningTime() {
const today = new Date().getTime();
const t = FutureTime - today;
// console.log(t);
// 1s = 1000ms
// 1m = 60s
// 1hr = 60min
// 1d = 24hr
// value in ms
const oneDay = 24 * 60 * 60 * 1000;
const oneHour = 60 * 60 * 1000;
const oneMinute = 60 * 1000;
let days = t / oneDay;
days = Math.floor(days);
let hours = Math.floor((t % oneDay) / oneHour);
let minutes = Math.floor((t % oneHour) / oneMinute);
let seconds = Math.floor((t % oneMinute) / 1000);
// set value array
function Furmat(item) {
if (item < 10) {
return (item = `0${item}`);
}
return item;
}
const values = [days, hours, minutes, seconds];
items.forEach(function(item, index) {
item.innerHTML = Furmat(values[index]);
});
if (t < 0) {
clearInterval(countdown);
countdown.innerHTML = `
<h3 class="expired">
Sorry, This Time expired</h3>`
}
};
// countdowns
let countdowns = setInterval(getRemainningTime, 1000);
// call function
getRemainningTime();
Download Source Code: Create a Countdown JavaScript
That’s all, now you’ve successfully Create a Countdown Using JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Here are a few helpful posts you might want to read, too:
Why learning code? 7 Essential Benefits From Learning Programming
6 Things To Know Before Learning Programming
How to Teach Yourself to Learn Code
If you enjoyed this post about the Countdown Using JavaScript just drop me a line in the comments below!
P.S. If you found this post helpful, please share it with others! Thanks for your support!
0 comments:
Post a Comment