Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added style to countdown.html #270

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added style to countdown.html #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3736c87
Added style to countdown.html
Angel10050 Oct 1, 2020
30996eb
Merge branch 'master' into style_countDown
Angel10050 Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 41 additions & 37 deletions countDown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
<link rel="stylesheet" type="text/css" href="./css/countdown.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/countDown.css" />
<title>Countdown to halloween</title>
</head>
<body class="body">
<section class="count-down_section">
<h1 class="count-down_title">Until Halloween they remain</h1>
<p id="demo"></p>
</section>
</body>
<script>
// Create end date
var countDownDate = new Date('Jan 5, 2021 15:37:25').getTime();

<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
// Set interval to every second
var x = setInterval(function () {
// Get current time
var now = new Date().getTime();

<div class="countdown-container">
<!--<img width="200px" style="margin:0 auto 20px auto;display:block" src="https://image.flaticon.com/icons/svg/2144/2144314.svg">-->

<img width="200px" style="margin:0 auto 20px auto;display:block" src="https://media.giphy.com/media/MGndlZYnTsZAA/giphy.gif">
//Calcualte time between now and end date
var distance = countDownDate - now;

<div class="to-date"> Counting to: <span id="to"></span></div>
<div class="countdown"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>
$(document).ready(
function () {



$(window).trigger('resize');
$(window).trigger('resize');
var dd = "October 31, 2020"
/*var deadline = new Date("<?php // echo date("M d, Y H:i:s", $promotion['countdown']); ?>").getTime(); */
var deadline = new Date(dd + " 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
var e = document.getElementsByClassName("countdown");

jQuery('.countdown').html("<div class='counter-section'><div class='counter-wrap'><div class='counter-container'><div class='counter-box'><p class='counter-time'>" + days + "</p><p class='counter-tag'>days</p></div>" + "<div class='counter-box'><p class='counter-time'>" + hours + "</p><p class='counter-tag'>hrs</p></div>" + "<div class='counter-box'><p class='counter-time'>" + minutes + "</p><p class='counter-tag'>mins</p></div>" + "<div class='counter-box'><p class='counter-time'>" + seconds + "</p><p class='counter-tag'>scds</p></div></div></div></div>");

$('#to').html(dd);

}, 1000);
})
</script>
// Calulate days, hours, mins, seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display time in browser
document.getElementById('demo').innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';

//Stop when end date is reached
if (distance < 0) {
clearInterval(x);
document.getElementById('demo').innerHTML = 'EXPIRED';
}
}, 1000);
</script>
</html>
30 changes: 30 additions & 0 deletions css/countDown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
body {
margin: 0px;
padding: 0px;
}

.count-down_section {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 100%;
height: 100vh;
background-image: url('../images/off.jpg');
background-size: cover;
background-repeat: no-repeat;
}

.count-down_title {
font-family: 'Courier New', Courier, monospace;
color: white;
font-weight: bolder;
font-size: 70px;
}

#demo {
font-family: 'Courier New', Courier, monospace;
color: white;
font-weight: bolder;
font-size: 50px;
}
Loading