index.html
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Count Down Timer</title> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <h1>New Year Eve</h1> <div class="countdown-container"> <div class="date-c"> <p class="big-text" id="date">0</p> <span>date</span> </div> <div class="current_time-c"> <p class="big-text" id="current_time">0</p> <span>Current Time</span> </div>
<div class="countdown-el days-c"> <p class="big-text" id="days">0</p> <span>days</span> </div> <div class="countdown-el hours-c"> <p class="big-text" id="hours">0</p> <span>hours</span> </div> <div class="countdown-el mins-c"> <p class="big-text" id="mins">0</p> <span>mins</span> </div> <div class="countdown-el secs-c"> <p class="big-text" id="secs">0</p> <span>secs</span> </div> </div> </body> </html>
script.js
const daysEl=document.getElementById("days") | |
const hoursEl=document.getElementById("hours") | |
const minsEl=document.getElementById("mins") | |
const secsEl=document.getElementById("secs") | |
const dateEl=document.getElementById("date") | |
const currentTimee=document.getElementById("current_time") | |
const newYears="1 Jan 2021"; | |
function countdown1() | |
{ | |
const today=new Date(); | |
const dd=formatDate(today.getDate()); | |
console.log("Date is : "+dd); | |
const mm=formatMonth(today.getMonth()+1); | |
const yyyy=today.getFullYear(); | |
const todayDate=dd + '/'+ mm +'/' +yyyy; | |
dateEl.innerHTML=todayDate; | |
function formatDate(datee) | |
{ | |
return datee < 10 ? (`0${datee}`):datee; | |
} | |
function formatMonth(month) | |
{ | |
return month < 10 ? (`0${month}`):month; | |
} | |
} | |
function countdownCurrentTime() | |
{ | |
const currentDate=new Date(); | |
const currentHours=formatHours(currentDate.getHours()); | |
const currentMins=formatMins(currentDate.getMinutes()); | |
const currentSecs=formatSecs(currentDate.getSeconds()); | |
const currentTime=currentHours + ':'+ currentMins+':'+currentSecs; | |
currentTimee.innerHTML=currentTime; | |
function formatHours(hours) | |
{ | |
return hours < 10 ? (`0${hours}`):hours; | |
} | |
function formatMins(mins) | |
{ | |
return mins < 10 ? (`0${mins}`):mins; | |
} | |
function formatSecs(secs) | |
{ | |
return secs < 10 ? (`0${secs}`):secs; | |
} | |
} | |
function countdown() | |
{ | |
const newYearDate=new Date(newYears); | |
const currentDate=new Date(); | |
const totalseconds=(newYearDate-currentDate)/1000; | |
const days=Math.floor(totalseconds/3600/24); | |
const hours=Math.floor(totalseconds/3600) % 24; | |
const mins=Math.floor(totalseconds/60) %60; | |
const secs=Math.floor(totalseconds) %60; | |
daysEl.innerHTML=days; | |
hoursEl.innerHTML=formatTime(hours); | |
minsEl.innerHTML=formatTime(mins); | |
secsEl.innerHTML=formatTime(secs); | |
function formatTime(time) | |
{ | |
return time < 10 ? (`0${time}`):time; | |
} | |
//console.log(days,hours,mins,secs); | |
} | |
setInterval(countdown,1000); | |
setInterval(countdown1,1000); | |
//countdownCurrentTime(); | |
setInterval(countdownCurrentTime,1000); |