HOW TO MAKE TIME COUNTDOWN
BASIC NEEDS:
HARDWARE
1. COMPUTER/ LAPTOP
SOFTWARE
1. TEXT EDITOR
EXAMPLE: VISUAL STUDIO, ATOM, SUBLIME TEXT, NOTEPAD++ ETC...
HAVE A BASIC KNOWLEDGE
1. HTML5
2. CSS3
3. JAVASCRIPT
LET'S SEE OUTPUT IN VIDEOS:
HTML CODE:
<!-- DEVELOP BY DELHI KA CODER -->
<html>
<title>Count-down develop by delhikacoder</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<script src="javascript.js" defer></script>
<body>
<section>
<div class="delhikacoder">
<h1> Time left in new year</h1></div>
<div class="count-down-container ">
<div class="days-c count-down-el">
<p class="big-text" id="days">0</p>
<span>Days</span>
</div>
<div class="hours-c count-down-el">
<p class="big-text" id="hours">0</p>
<span>Hours</span>
</div>
<div class="minutes-c count-down-el">
<p class="big-text" id="minutes">0</p>
<span>Minutes</span>
</div>
<div class="second count-down-el">
<p class="big-text" id="second">0</p>
<span>secondd</span>
</div>
</div>
</section>
</body>
</html>
CSS CODE:
/*DEVELOP BY DELHI KA CODER */
*{
box-sizing: border-box;
padding:0;
margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1
,900&display=swap');
body{
background: cadetblue;
font-family: 'Lato';
background-image: url(hero-bg.jpg);
background-position: center;
}
.delhikacoder{
margin-top: 10%;
}
.count-down-container{
display: flex;
text-align: center !important;
background: red;
position: absolute;
color: #fff;
left: 19%;
}
.big-text{
font-size: 4rem;
margin: 0 2rem;
}
.count-down-el{
text-align: center;
margin: 0 2rem;
padding: 9px 0;
}
.count-down-el span{
text-align: center;
font-size: 1.5rem;
}
h1{
text-align: center;
font-size: 43px;
padding: 27px 0;
color: #fff;
font-weight: 800;
}
@media (max-width:768px){
.count-down-container{
display: inline;
}
}
JAVSCRIPT CODE:
//DEVELOP BY DELHI KA CODER
const daysupdate = document.getElementById('days')
const hoursupdate = document.getElementById('hours')
const minutesupdate = document.getElementById('minutes')
const secondupdate = document.getElementById('second')
const newYear = '1 jan 2022';
function countdown(){
const newYearDate = new Date(newYear);
const currentDate = new Date();
const second = (newYearDate - currentDate) /1000;
const days = Math.floor(second/3600/24);
const hours = Math.floor(second/3600 )% 24;
const minutes = Math.floor(second/60 )% 60;
const totalsecond = Math.floor(second)% 60 ;
daysupdate.innerHTML = formatTime(days);
hoursupdate.innerHTML = formatTime(hours);
minutesupdate.innerHTML = formatTime(minutes);
secondupdate.innerHTML = formatTime(totalsecond);
}
function formatTime(time){
return time < 10 ? `0${time}` :time ;
}
countdown();
setInterval(countdown, 1000);
OUTPUT PHOTO:
Comments
Post a Comment