<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- The code below is for bittube airtime monetization, you may ignore, or are you interested? you can make yours here https://bittube.app/?ref?2JY4FE0CP -->
<meta name="airtime-platform-display" content="plnkr.co.0fajarpurnama0">
<meta name="airtime-platform-id" content="52ad2992-520a-ed22-a9c5-561ee0423705">
<script src="https://bittubeapp.com/tubepay/airtime.loader.js" data-verify="meta" data-autostart="true"></script>
<!-- bittube airtime code ends -->
</head>
<body>
<h1>Zheng Chenyang,</h1>
<div id="deadline">
You have: <br>
<p id="days">00</p>
<p class="timeRefDays">days</p>
<p id="hours">00</p>
<p class="timeRefHours">hours</p>
<p id="minutes">00</p>
<p class="timeRefMinutes">minutes</p>
<p id="seconds">00</p>
<p class="timeRefSeconds">second</p>
<br>
left.
</div>
<h3>Regards,</h3>
<h1>Fajar Purnama</h1>
</body>
</html>
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
deadline('june,28,2018,00:00:00'); // ****** Change this line!
};
function deadline(countTo) {
now = new Date();
countTo = new Date(countTo);
difference = (countTo-now);
days=Math.floor(difference/(60*60*1000*24)*1);
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
document.getElementById('days').firstChild.nodeValue = days;
document.getElementById('hours').firstChild.nodeValue = hours;
document.getElementById('minutes').firstChild.nodeValue = mins;
document.getElementById('seconds').firstChild.nodeValue = secs;
clearTimeout(deadline.to);
deadline.to=setTimeout(function(){ deadline(countTo); },1000);
if (difference < 0) {
clearInterval(deadline.to);
document.getElementById("deadline").innerHTML = "Timeout";
}
}
// reference
// 1. Alex. "COUNT UP FROM DATE AND TIME WITH JAVASCRIPT", https://trulycode.com/bytes/count-date-time-javascript
/* Styles go here */
@import url('https://fonts.googleapis.com/css?family=Sacramento');
#deadline p {
font-size: 48px;
font-weight: bold;
display: inline-block;
padding: 10px;
background: red;
margin: 0 0 20px;
color: white;
text-shadow: 2px 2px 5px yellow;
}
h3{
font-style: oblique;
color: purple;
text-shadow: 2px 2px 4px green;
}
h1 {
font-size: 36px;
font-weight: bold;
font-family: "Sacramento", Comic Sans MS, cursive;
}
<html>
<head>
<link href="style.css" rel="stylesheet"></link>
<script>
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
upTime('apr,29,2018,22:26:00'); // ****** Change this line!
};
function upTime(countTo) {
now = new Date();
countTo = new Date(countTo);
difference = (now-countTo);
days=Math.floor(difference/(60*60*1000*24)*1);
years = Math.floor(days / 365);
if (years > 1){ days = days - (years * 365)}
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
document.getElementById('years').firstChild.nodeValue = years;
document.getElementById('days').firstChild.nodeValue = days;
document.getElementById('hours').firstChild.nodeValue = hours;
document.getElementById('minutes').firstChild.nodeValue = mins;
document.getElementById('seconds').firstChild.nodeValue = secs;
clearTimeout(upTime.to);
upTime.to=setTimeout(function(){ upTime(countTo); },1000);
}
// reference
// 1. Alex. "COUNT UP FROM DATE AND TIME WITH JAVASCRIPT", https://trulycode.com/bytes/count-date-time-javascript
</script>
<style>
/* Styles go here */
@import url('https://fonts.googleapis.com/css?family=Sacramento');
#countup p {
font-size: 20px;
font-weight: bold;
display: inline-block;
padding: 10px;
background: pink;
margin: 0 0 20px;
color: red;
text-shadow: 2px 2px 5px blue;
}
h3{
font-style: oblique;
color: violet;
text-shadow: 2px 2px 4px green;
}
h1 {
/*font-size: 40px;*/
font-weight: bold;
font-family: "Sacramento", Comic Sans MS, cursive;
}
</style>
</head>
<body>
<!-- GIFs -->
<img src="https://media1.tenor.com/images/7de8096fbbb85206d9b873ec248aa589/tenor.gif?itemid=11898209" alt="cony bite kiss cheek" width="150" height="150">
<img src="https://media1.tenor.com/images/4f9e31e2a854c2435d128defd1a1988d/tenor.gif?itemid=9836912" alt="cony cheek to cheek" width="150" height="150">
<img src="https://media1.tenor.com/images/e2f09afcc938cfb2208b474110554129/tenor.gif?itemid=11008152" alt="cony hug fall ice cream" width="150" height="150">
<img src="https://media1.tenor.com/images/ceea1f0e68b96b0a616aa59d7883c23e/tenor.gif?itemid=10139368" alt="cony kiss doll" width="150" height="150">
<!-- GIFs -->
<h1>Dear Sri Indrawati,</h1>
<div id="countup">
We have been in relationship for: <br>
<p id="years">00</p>
<p class="timeRefYears">years</p>
<p id="days">00</p>
<p class="timeRefDays">days</p>
<p id="hours">00</p>
<p class="timeRefHours">hours</p>
<p id="minutes">00</p>
<p class="timeRefMinutes">minutes</p>
<p id="seconds">00</p>
<p class="timeRefSeconds">second</p>
</div>
since 29th April 2018.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Q4h1nhR_Uu4/Wwz-XXThg9I/AAAAAAAACyg/LnC4Qv6g-GkvPHr49C9tTz3ePu9aFYVHACPcBGAYYCw/s1600/Our-Relationship.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-
original-width="900" height="640" src="https://2.bp.blogspot.com/-Q4h1nhR_Uu4/Wwz-XXThg9I/AAAAAAAACyg/LnC4Qv6g-GkvPHr49C9tTz3ePu9aFYVHACPcBGAYYCw/s1600/Our-Relationship.png" width="360" /></a></div>
<h3>From your love,</h3>
<h1>Fajar Purnama</h1>
<!-- GIFs -->
<img src="https://media1.tenor.com/images/840dd37ae89725e1f2759e733e90624b/tenor.gif?itemid=9836839" alt="cony bear kissing no camera" width="150" height="150">
<img src="https://media1.tenor.com/images/cddc857b201c0273452a7ceddf0acca4/tenor.gif?itemid=9836808" alt="cony multiple kisses" width="150" height="150">
<img src="https://media1.tenor.com/images/7d6ec9ce17d69f08974c47dd16363039/tenor.gif?itemid=9836894" alt="cony cheer up" width="150" height="150">
<img src="https://media1.tenor.com/images/649a399f309617463a418e6a15773b4b/tenor.gif?itemid=7727907" alt="cony kiss bonfire" width="150" height="150">
<!-- GIFs -->
<br>
source code: <a href="http://plnkr.co/6svsxo"> http://plnkr.co/6svsxo </a>
</body>
</html>