In this tutorial, we will see how to make a Cool event web site with a countdown timer using HTML and CSS and JAVASCRIPT for your anniversary, your wedding or any other event.
in this tutorial, we will see together how the timer work and what function we will use, and I will give you the source code of the Wedding Template that you can modify as you like.
I-Counter in JavaScript
to make a Counter using JavaScript, for that we will use a function called SetInterval(function, time); this function can automatically reproduce a function every time millisecond, and we will use the Date() function to get the initial date and to get the date that we want to count down to.
the final script will be like this:
countdown script
var countToDate = new Date("Jun 20, 2019 20:44:30").getTime();
var x = setInterval(function(){
var currentDate = new Date().getTime();
var distance = countToDate - currentDate;
var day = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24))/ (1000*60*60) );
var min = Math.floor((distance % (1000 * 60 * 60))/ (1000*60) );
var sec = Math.floor((distance % (1000 * 60))/ (1000) );
document.getElementById('date').innerHTML = day + " Days, " + hours + " Hours, " + min + " Minuts, " + sec + " Seconds ";
},1000);
and we will create a cool design to show how we can use that time for a real project, I chose a wedding event for this.
we will need some images:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="banner">
<div class="text">
<h1 class="title">You are invited to our wedding</h1>
<h3 id="date"></h3>
</div>
</div>
<div class="section">
<div class="container">
<img src="section.jpg">
<h1>Details</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus ornare turpis, id placerat metus condimentum ut. Suspendisse sed lectus tempus, suscipit lectus id, vulputate nulla. Vestibulum tempor nunc sed volutpat sagittis. Fusce sed odio id justo congue viverra. Aenean pretium non purus in iaculis. Mauris vestibulum urna elit, ut posuere enim interdum vitae. Duis erat magna, pulvinar et nulla vitae, fringilla ultrices leo. In hac habitasse platea dictumst. Integer vitae commodo ligula. Aliquam in enim in justo commodo ultricies eu vitae elit. Nullam vel mauris a nisl laoreet pulvinar eu sed nisl. Maecenas eget auctor nisi, nec efficitur tellus.
</p>
</div>
</div>
<div class="thank">
<h1>Thanks for comming</h1>
</div>
<div class="copyright">
<p>CopyRight © DoctorCode</p>
</div>
</body>
<script src="counter.js"></script>
</html>
and the CSS code will be like this
@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto&display=swap');
*{
padding: 0;
margin: 0;
outline: 0;
}
.banner{
background-image: url(banner.jpg);
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
position: relative;
background-attachment: fixed;
}
.banner .text{
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
font-size: 1.8rem;
color: #d81b60;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
}
.title{
background-color: rgba(200,200,200,.3);
padding: 15px 0;
}
.banner .text h1{
margin: 30px 0;
}
#date{
color: #fafafa;
}
.section{
overflow: auto;
padding: 30px 0;
}
.container{
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.section img{
width: 300px;
float: left;
margin-right: 30px;
}
.section h1{
color: #f06292;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
}
.section p{
font-family: 'Montserat',sans-serif;
line-height: 2rem;
}
.thank{
height: 600px;
width: 100%;
background-image: url(footer.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
position: relative;
}
.thank h1{
width: 100%;
position: absolute;
top: 50%;
transform:translateY(-50%);
background-color: rgba(20,20,20,.3);
padding: 15px 0;
color: #fafafa;
text-transform: uppercase;
font-family: 'Roboto',sans-serif;
text-align: center;
}
.copyright{
padding: 6px 0;
background-color: #f48fb1;
}
.copyright p{
color: #fafafa;
text-align: center;
font-family: 'Roboto',sans-serif;
}
and that's it, I hope that you liked this project, and you are free to use it for your wedding or you can modify it for your event.
MAKE A COUNTDOWN TIMER USING JAVASCRIPT
Reviewed by Medics
on
June 15, 2019
Rating:
Reviewed by Medics
on
June 15, 2019
Rating:
No comments: