Web development | Build Website to Show New Year Countdown
Step 1:-Front-end code containing New Year Countdown Display codes
//create a file with name index.html
<!DOCTYPE html>
<! — Code By HackMeFu@akashranjanpatel →
<html lang=”en” >
<head>
<meta charset=”UTF-8">
<title>New Year Countdown | HackMeFu</title>
<link rel=’stylesheet’ href=’https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel=”stylesheet” href=”style.css”></head>
<body><div class=”wrapper”>
<div class=”container text-center”>
<div class=”col-md-12">
<h1 id=”header” class=””>New Year Countdown@arp</h1>
</div>
<div class=”col-md-3 col-xs-6">
<div class=”clock”>
<div class=”well top-section”>
<div id=”days” class=”num”>00</div>
</div>
<div class=”well bottom-section”>
<div id=”days-text” class=”text”>Days</div>
</div>
</div>
</div>
<div class=”col-md-3 col-xs-6">
<div class=”clock”>
<div class=”well top-section”>
<div id=”hours” class=”num”>00</div>
</div>
<div class=”well bottom-section”>
<div id=”hours-text” class=”text”>Hours</div>
</div>
</div>
</div>
<div class=”col-md-3 col-xs-6">
<div class=”clock”>
<div class=”well top-section”>
<div id=”mins” class=”num”>00</div>
</div>
<div class=”well bottom-section”>
<div id=”mins-text” class=”text”>Minutes</div>
</div>
</div>
</div>
<div class=”col-md-3 col-xs-6">
<div class=”clock”>
<div class=”well top-section”>
<div id=”secs” class=”num”>00</div>
</div>
<div class=”well bottom-section”>
<div id=”secs-text” class=”text”>Seconds</div>
</div>
</div>
</div>
<div id=”info” class=”small”></div>
</div>
</div><script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src=”function.js”></script></body>
</html>
Step 2:-Back-end code containing stylesheet to give a new look to website
//create a file with name style.css
/* Code By HackMeFu ( alashranjanpatel ) */
html {
height: 100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow: hidden;
}body {
background: transparent;
color: #ffffff;
}.bluelight {
text-shadow: 0 0 10px #3498DB,
0 0 20px #3498DB,
0 0 30px #3498DB,
0 0 40px #2980B9,
0 0 70px #2980B9,
0 0 80px #2980B9,
0 0 100px #2980B9,
0 0 150px #2980B9;
}.clock {
overflow: hidden;
}.col-md-12 {
overflow: hidden;
padding-bottom: 20px;
}.top-section {
margin-bottom: 0px;
border-radius: 5px 5px 0px 0px;
background-color: #34495E;
border: 0px;
}.bottom-section {
margin-top: 0px;
border-radius: 0px 0px 5px 5px;
background-color: #2C3E50;
border: 0px;
}@media (min-width: 768px) {
.num {
font-size: 100px;
}
}@media (max-width: 767px) {
.num {
font-size: 50px;
}
}@media (max-width: 480px) {
.num {
font-size: 30px;
}
}@media (min-width: 768px) {
.text {
font-size: 35px;
}
}@media (max-width: 767px) {
.text {
font-size: 20px;
}
}@media (max-width: 480px) {
.text {
font-size: 15px;
}
}@media (min-width: 768px) {
body {
padding-top: 75px;
}
}h1 {
padding-top: 10px;
}@media (min-width: 768px) {
h1 {
margin-bottom: 75px;
font-size: 100px;
}
}
Step 3:-Back-end code containing functions of timer
//create a file with name function.js
// Code By HackMeFu ( akash ranjan patel )
function timeLeft(endtime){
var t = Date.parse(endtime) — Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
‘total’: t,
‘days’: days,
‘hours’: hours,
‘minutes’: minutes,
‘seconds’: seconds
};
};$(document).ready(function() {
var today = new Date();
var deadline = ‘January 1 ‘ + (today.getFullYear() + 1) + “ 00:00:00”;
if (today.getMonth() == 0 && today.getDate() == 1) {
deadline = ‘January 1 ‘ + (today.getFullYear()) + “ 00:00:00”;
};$(“#header”).hover(function() {
$(this).toggleClass(‘bluelight’);
});$(“.clock”).hover(function() {
$(this).toggleClass(‘bluelight’);
});var setClock = function(newyear){
var timeinterval = setInterval(function(){
var t = timeLeft(newyear);
$(‘#days’).text(t.days);
$(‘#hours’).text(t.hours);
$(‘#mins’).text((‘0’ + t.minutes).slice(-2));
$(‘#secs’).text((‘0’ + t.seconds).slice(-2));
if(t.total<=0){
clearInterval(timeinterval);
var now = new Date();
var yearStr = now.getFullYear().toString();
$(‘#header’).text(“Happy New Year!!!”);
$(‘#days’).text(yearStr[0]);
$(‘#days-text’).text(“Happy”);
$(‘#hours’).text(yearStr[1]);
$(‘#hours-text’).text(“New”);
$(‘#mins’).text(yearStr[2]);
$(‘#mins-text’).text(“Year”);
$(‘#secs’).text(yearStr[3]);
$(‘#secs-text’).text(“!!!”);
$(‘#info’).text(“Countdown starts again tomorrow!….”);
}
},1000);
};setClock(deadline);
});
Step 4 Host Website using xampp on local system and CPanel on live website and Getting Output
