Align Title To Each Number in Javascript Countdown Timer - javascript

How do you center align each span over each Day, Hour, Min, Sec? Currently just adding padding to the text but it doesn't align to it's respective number. And when any number column goes to single digits it shifts the numbers.
Pen: https://codepen.io/zepzia/pen/MmoVJm
// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and 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 the result in the element with id="demo"
document.getElementById("countdown").innerHTML = days + " " + hours + " " +
minutes + " " + seconds + " ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
body {
background: url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.countdown-wrapper {
position: relative;
height: 400px;
}
#countdown,
#countdown-text {
font-family: 'Roboto', sans-serif;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#countdown {
font-weight: 900;
font-size: 142px;
color: #fff;
opacity: .7;
letter-spacing: -4px;
}
#countdown-text {
font-weight: 900;
font-size: 40px;
color: black;
opacity: .8;
}
.counter-text {
padding: 20px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<div class="countdown-wrapper">
<div id="countdown"></div>
<div id="countdown-text">
<span class="counter-text">DAYS</span>
<span class="counter-text">HOURS</span>
<span class="counter-text">MINS</span>
<span class="counter-text">SECS</span>
</div>
</div>

Rather than put your countdown numbers that update dynamically into a single div, create a seperate div for days, hours, minutes and seconds.
<div class="countdown-wrapper">
<div class="countdown-chunk">
<div class="counter-value" id="daysValue"></div>
<div class="counter-label">DAYS</div>
</div>
<div class="countdown-chunk">
<div class="counter-value" id="hoursValue"></div>
<div class="counter-label">HOURS</div>
</div>
<div class="countdown-chunk">
<div class="counter-value" id="minutesValue"></div>
<div class="counter-label">MINUTES</div>
</div>
<div class="countdown-chunk">
<div class="counter-value" id="secondsValue"></div>
<div class="counter-label">SECONDS</div>
</div>
</div>
Now you align each countdown-chunk with flexbox and make sure to add text-align: center to the countdown-chunk as well. You can style counter-value and counter-label independently.
.countdown-chunk {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.countdown-wrapper {
flex: 1 1 50%;
text-align: center;
}
You also have 4 elements to update instead of just one, but that is easy compared to trying to align disjointed elements.

I've done something similar to TxRegex's answer. I've restructured your html, made some adjustments to your css and in your javascript I've replaced:
document.getElementById("countdown").innerHTML = days + " " + hours + " " +
minutes + " " + seconds + " ";
with:
document.getElementById("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;
to place them in the newly created divs.
Here's the updated Codepen.

Please try this
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.column {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
<div class="row">
<div class="column">
<div class="counter-text" id="days"></div>
<div class="counter-text" id="hours"></div>
<div class="counter-text" id="minutes"></div>
<div class="counter-text" id="secs"></div>
</div>
<div class="column">
<div class="counter-text">DAYS</div>
<div class="counter-text">HOURS</div>
<div class="counter-text">MINUTES</div>
<div class="counter-text">SECS</div>
</div>
</div>
//javascript
document.getElementById("days").innerHTML = days ;
document.getElementById("hours").innerHTML = hours ;
document.getElementById("minutes").innerHTML = minutes ;
document.getElementById("secs").innerHTML = secs ;

You need to restructure your HTML a bit so that the number and the label are in the same containing element. This lets you put a "box" around them so that they always line up. Here's one way to do that:
// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and 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 the result in the element with id="demo"
document.getElementById("counter-days").innerHTML = days;
document.getElementById("counter-hours").innerHTML = hours;
document.getElementById("counter-mins").innerHTML = minutes;
document.getElementById("counter-secs").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
body {
background: url(http://4.bp.blogspot.com/_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.countdown-wrapper {
position: relative;
height: 400px;
}
#countdown {
font-family: 'Roboto', sans-serif;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#countdown > div {
float: left;
padding: 20px;
}
.counter-num {
font-weight: 900;
font-size: 142px;
color: #fff;
opacity: .7;
letter-spacing: -4px;
}
.counter-text {
display: block;
clear: both;
font-weight: 900;
font-size: 40px;
color: black;
opacity: .8;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<div class="countdown-wrapper">
<div id="countdown">
<div id="countdown-days">
<span class="counter-num" id="counter-days"></span>
<span class="counter-text">DAYS</span>
</div>
<div id="countdown-hours">
<span class="counter-num" id="counter-hours"></span>
<span class="counter-text">HOURS</span>
</div>
<div id="countdown-mins">
<span class="counter-num" id="counter-mins"></span>
<span class="counter-text">MINS</span>
</div>
<div id="countdown-secs">
<span class="counter-num" id="counter-secs"></span>
<span class="counter-text">SECS</span>
</div>
</div>
</div>

Related

Countdown Timer in Javascript

Hi everyone I'm building a countdown timer for my site but I'm having a problem when adding the code a new countdown timer is getting created every second, I think it's because I'm injecting my html inside the setInterval function, I'm sure to fix this issue if anyone can help please.
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2023 15:37:25").getTime();
function makeMeTwoDigits(n){
return (n < 10 ? "0" : "") + n;
}
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and 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);
const countdownHTML =
`<div class="countdown-main-container">
<span class="sale-text">SALE ENDS</span>
<div class="countdown-container">
<div class="countdown-date">${makeMeTwoDigits(days)} :</div>
<div class="countdown-text">Days</div>
</div>
<div class="countdown-container">
<div class="countdown-date">${makeMeTwoDigits(hours)} :</div>
<div class="countdown-text">Hours</div>
</div>
<div class="countdown-container">
<div class="countdown-date">${makeMeTwoDigits(minutes)} :</div>
<div class="countdown-text">Min</div>
</div>
<div class="countdown-container">
<div class="countdown-date">${makeMeTwoDigits(seconds)}</div>
<div class="countdown-text">Secs</div>
</div>
</div>`;
const countdownContent = document.querySelector('.col-sm-6');
const newHTML = document.createElement('div');
newHTML.setAttribute('id', 'randb-countdownSale');
newHTML.innerHTML = countdownHTML;
countdownContent.prepend(newHTML);
}, 1000);
jQuery('.ib-text').remove();
document.querySelector('.info-bar').style.height = "52px";
document.querySelector('.oc-panel').style.paddingTop = "10px";
const coutdownStyle = `<style branchname="countdownSale">
.countdown-main-container {
flex-direction: row;
display: flex;
align-items: center;
gap: 10px;
}
.countdown-container {
display: flex;
justify-items: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
.sale-text {
font-family: 'Playfair Display';
font-size: 20px;
color: #ffffff;
font-weight: 400;
padding-right: 10px;
}
.countdown-date {
font-size: 20px;
color: #fff;
}
.countdown-text {
color:#fff;
}
#colon {
padding-left: 20px;
}
</style>
`;
jQuery("header").append(coutdownStyle);
I tried removing my html from inside the setInterval function but my code then spot working
Thats because you used prepend, and I assume that you want to replace the content.
Try instead
countdownContent.innerHTML = "";
countdownContent.appendChild(newHTML);

Why is this happening ? Problem with countdown timer banner

i'm new here. I'm also new to coding, I "created" this countdown timer with a background and I came across a issue and when I insert it on the site this is what's happening and I don't know why. Can somebody help me with this ? As you can clearly see in the print the banner is showing multiple times, I don't want that. I only need it to show in the header area, I do not know what to do that's why i posted this here, hoping somebody cand help me. This is the only problem, that the banner is showing multiple times.
.
// Set the date we're counting down to
var countDownDate = new Date("Nov 11, 2022 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and 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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
p {
display: flex;
font-size: 65px;
position: relative;
justify-content: right;
top: 70px;
left: -20px;
right: 0;
bottom: 50px;
margin-left: 0;
padding-right: 0.5rem;
}
.titlu {
display: flex;
font-size: 30px;
font-weight: bold;
position: relative;
justify-content: right;
color: black;
top: 100px;
left: -30px;
right: 0;
bottom: 50px;
}
.container {
background-image: url("https://s.cdnmpro.com/227916545/content/BLACKFRIDAY.png");
background-size: contain;
background-repeat: no-repeat;
width: 1200px;
height: 400px;
}
<div class="container">
<div class="titlu">
OFERTA EXPIRA IN
</div>
<p id="demo"></p>
</div>

How can I make this countdown reset every week after showing a message for 1 day? code included

So I have a countdown which counts down then displays a message which works well. The thing I have to manually edit the date to restart the countdown. I want it to display the message for that day only, then once that day has ended, reset and count down again automatically.
Thank you for your help.
This is the code so far:
function getTimeRemaining(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
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = ('0' + t.days).slice(-2);
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
document.getElementById("clockdiv").className = "hidden-div";
document.getElementById("timeIsNow").className = "visible-div";
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = 'April 28 2021 20:00:00 GMT+01';
//var deadline = new Date(Date.parse(new Date()) + 100 * 24 * 60 * 60 * 1000); // sets 15 day countdown
initializeClock('clockdiv', deadline);
// getTimeRemaining(deadline).minutes;
<style>
.cent {
margin: auto;
width: 50%;
padding: 10px;
text-align: center;
}
h1{
color: #396;
font-weight: 500;
font-size: 30px;
margin: 0px 0px 0px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 20px;
}
#clockdiv > div{
padding: 10px;
border-radius: 8px;
background: #121212;
display:inline-block;
margin: 1px;
}
#clockdiv div > span{
padding: 08px;
border-radius: 8px;
background: #f12e70;;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
.hidden-div {
visibility: hidden;
}
.visible-div {
visibility: visible;
}
</style>
<div id="timeIsNow" class="hidden-div">
<h1>Message is Live</h1>
</div>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">D</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">H</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">M</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">S</div>
</div>
</div>
When
t.total <= 0
Set deadline to current time at time of completion.. something like
new Date().toISOString()
From your code you have deadline set to endtime inside initializeClock(id, endtime) so you would update endtime inside the function when time is 0
endtime = new Date().toISOString()
There will no doubt still be some further changes but this would be the essence of it.

Countdown timer not work in my HTML

I'm trying to get a countdown timer to work on my web page, but its not working, and I can't figure out why. I don't know if its because I linked it wrong in my HTML or if its because I missed something in my code. Any help would be appreciate.
"use strict";
setInterval(function() { ... }, 1000); // 1000 milliseconds = 1 second
// Function to display current date / time on the site
setInterval(function displayTimeAndDate() {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var date = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var amOrPm;
// Check if it's a.m or p.m
if (hours < 12) {
amOrPm = "a.m";
} else {
amOrPm = "p.m";
}
document.getElementById('date').innerText = date + ":" + month + ":" + year;
document.getElementById('time').innerText = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
}, 1000);
setInterval(function countdown() {
// Set the desired date (American date format: Month/Day/Year) to countdown to and the current date
var endDate = new Date('07/04/2018 09:00 PM');
var currentDate = new Date();
// Get the "distance" between the dates
var distance = endDate - currentDate;
// Initialize days, hours, minutes and seconds
var oneSecond = 1000; // 1000 milliseconds = 1 second
var oneMinute = oneSecond * 60;
var oneHour = oneMinute * 60;
var oneDay = oneHour * 24;
// Get distance in days, hours, minutes and seconds
var days = Math.floor(distance / oneDay);
var hours = Math.floor((distance % oneDay) / oneHour);
var minutes = Math.floor((distance % oneHour) / oneMinute);
var seconds = Math.floor((distance % oneMinute) / oneSecond);
// Place 0 before the numbers if the are lower than 10
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
document.getElementById('dLeft').innerText = days;
document.getElmentById('hLeft').innerText = hours;
document.getElementById('mLeft').innerText = minutes;
document.getElementById('sLeft').innerText = seconds;
}, 1000);
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 9
Review Assignment
Tulsa's Summer Party
Author:
Date:
Filename: tny_july.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tulsa's Summer Party</title>
<link href="tny_base.css" rel="stylesheet" />
<link href="tny_layout.css" rel="stylesheet" />
<script src="tny_timer.js" defer></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li>News</li>
<li>Night Beat</li>
<li>Tulsa Times</li>
<li>Calendar</li>
<li>City Links</li>
</ul>
</nav>
<img src="tny_banner2.png" id="logoImg" alt="" />
<h1>Tulsa's<br />Summer Party</h1>
<h2 id="timeHeading">Welcome to Tulsa</h2>
<div id="currentTime"><span>11/3/2017</span><span>2:45:12 p.m.</span></div>
</header>
<article>
<section>
<h1>Countdown to the Fireworks</h1>
<div id="countdown">
<div><span id="dLeft">58</span><br />Days</div>
<div><span id="hLeft">10</span><br />Hrs</div>
<div><span id="mLeft">14</span><br />Mins</div>
<div><span id="sLeft">48</span><br />Secs</div>
</div>
<p>Celebrate the nation's birthday at <em>Tulsa's Summer
Party</em>, a daylong extravaganza in downtown
Tulsa on the 4th of July. The festivities start at 9 a.m.
with a 5K and 10K walk or race. A great event
for the whole family. Sign up as an individual or
part of a team.
</p>
<p>The <em>Farmer's
Market</em> is also back with farm-fresh produce,
meats, and dairy. There's something for every
pallet.</p>
</section>
<section>
<p>Live music starts at 11 a.m. and continues through the day
with special appearances from <em>Falstaff
Ergo</em>, <em>Crop Circles</em>, <em>Prairie Wind</em> and
<em>James Po</em>.
</p>
<p>At 9 p.m. enjoy the <em>fireworks</em> that have won awards
as the best in the Midwest, designed and presented by
<em>Wizard Works</em>. Arrive early for the best seats!
</p>
<p>After the show, dance the night away to the music of
the <em>Chromotones</em>.
</p>
<p>See you on the 4th!</p>
</section>
<nav class="vertical">
<h1>Party Links</h1>
<ul>
<li>5K and 10K Run</li>
<li>Famer's Market</li>
<li>Wizard Works</li>
<li>Falstaff Ergo</li>
<li>Crop Circles</li>
<li>James Po</li>
<li>Tulsa Fireworks</li>
<li>Prairie Wind</li>
</ul>
</nav>
</article>
<footer>
<address>
Tulsa Summer Party ·
340 Main Street, Tulsa, OK 74102 ·
(918) 555-3481
</address>
</footer>
</body>
</html>
Screenshot of my page: http://prntscr.com/isp2hu
Ive been googling and looking at possible issues and nothing has solved my problem so far.
EDIT: Added my CSS
#charset "utf-8";
#font-face {
font-family: Segment14;
src: url('segment14.woff') format('woff'),
url('segment14.ttf') format('truetype');
}
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 9
Review Assignment
Tulsa's Summer Party Layout Style Sheet
Filename: tny_layout.css
Segment14 font designed by Paul Flo Williams. Download at:
http://www.1001fonts.com/segment14-font.html#styles
*/
/* HTML and Body styles */
html {
background: linear-gradient(to bottom, rgb(120, 84, 23), rgb(51, 51, 51));
font-family: Verdana, Geneva, sans-serif;
min-height: 100%;
}
body {
margin: 0px auto;
min-width: 340px;
max-width: 1020px;
width: 100%;
min-height: 100%;
}
/* Header styles */
header img#logoImg {
display: block;
width: 100%;
}
header {
background: linear-gradient(to bottom, black 70%, rgb(185, 0, 102));
border-bottom: 1px solid rgb(0, 0, 0);
color: white;
position: relative;
width: 100%;
}
header > h1 {
position: absolute;
top: 15px;
right: 10px;
text-align: right;
font-size: 1.3em;
letter-spacing: 0.05em;
line-height: 1em;
font-family: 'Times New Roman', serif;
font-weight: normal;
color: rgba(255, 0, 192, 0.7);
}
header > h2 {
position: absolute;
top: 15px;
left: 10px;
font-size: 0.9em;
font-weight: normal;
color: rgba(255, 82, 192, 0.8);
}
/* Navigation list styles */
header nav.horizontal {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
-webkit-flex: 0 1;
flex: 0 1;
}
body header nav ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
nav.horizontal ul li {
-webkit-flex: 1 1;
flex: 1 1;
font-size: 0.8em;
line-height: 1.5em;
height: 1.5em;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
text-shadow: black 2px 1px 0px, black 4px 2px 5px;
}
nav.horizontal ul li a {
background-color: rgba(255, 255, 255, 0.2);
display: block;
color: rgba(255, 255, 255, 0.8);
text-align: center;
}
nav.horizontal ul li a:hover {
background-color: rgba(255, 88, 192, 0.5);
}
/* Time Clock Styles */
div#currentTime {
display: block;
position: absolute;
top: 35px;
left: 10px;
background-color: transparent;
border: hidden;
color: rgba(255, 82, 192, 0.8);
width: 140px;
font-size: 0.6em;
line-height: 1.1em;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-weight: normal;
}
div#currentTime span {
display: block;
width: 100%;
}
/* Styles for the Countdown Clock */
div#countdown {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-top: 10px;
}
div#countdown div {
display: block;
text-align: center;
width: 100%;
line-height: 1.5em;
font-size: 0.5em;
font-family: segment14, sans-serif;
color: white;
background: rgba(51, 51, 51, 0.7);
margin: 0px 1px;
padding: 5px;
color: white;
}
div#countdown div span {
font-size: 2em;
}
/* Article Styles */
article {
background: white;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
article section, article nav.vertical {
-webkit-flex: 1 1 300px;
flex: 1 1 300px;
}
section h1 {
font-size: 1.2em;
text-align: center;
margin: 10px;
}
section p {
margin: 20px;
}
/*Section 1 styles */
article section:nth-of-type(1) {
background-color: rgba(255, 0, 192, 0.6);
}
/* Section 2 styles */
article section:nth-of-type(2) {
background-color: rgba(255, 0, 192, 0.5);
}
/* Vertical navigation list styles */
nav.vertical {
background-color: rgba(255, 0, 192, 0.7);
}
nav.vertical h1 {
color: rgba(255, 255, 255, 0.7);
text-shadow: rgba(192, 0, 145, 0.8) 2px 2px 5px;
font-size: 1.35em;
letter-spacing: 3px;
text-align: center;
padding: 10px;
margin: 0px 0px 15px 0px;
background-color: rgba(233, 0, 177, 0.5);
}
nav.vertical ul li {
font-size: 0.82em;
letter-spacing: 3px;
text-align: center;
}
nav.vertical ul li a {
display: block;
padding-left: 30px;
height: 32px;
line-height: 32px;
width: auto;
color: rgb(51, 51, 51);
}
nav.vertical ul li a:hover {
background-color: rgba(255, 192, 0, 0.45);
}
/* Page footer styles */
footer {
clear: left;
display: block;
}
footer address {
display: block;
font-style: normal;
text-align: center;
font-size: 0.5em;
line-height: 20px;
height: 20px;
background-color: rgb(215, 0, 152);
color: white;
}
/* =============================================
Tablet and Desktop Styles: greater than 510px
=============================================
*/
#media only screen and (min-width:511px) {
header > h1 {
font-size: 1.9em;
}
header > h2 {
font-size: 1.1em;
}
div#currentTime {
font-size: 0.9em;
line-height: 1em;
}
div#countdown {
font-size: 1.3em;
}
footer address {
font-size: 0.6em;
}
}
/* =============================================
Tablet and Desktop Styles: greater than 640px
=============================================
*/
#media only screen and (min-width:641px) {
header > h1 {
font-size: 2.4em;
}
header > h2 {
font-size: 1.3em;
}
nav.horizontal ul li {
font-size: 1em;
}
div#currentTime {
font-size: 1em;
line-height: 1.1em;
top: 40px;
}
div#countdown {
font-size: 1.5em;
}
footer address {
font-size: 0.8em;
}
}
/* =============================================
Tablet and Desktop Styles: greater than 720px
=============================================
*/
#media only screen and (min-width: 721px) {
header > h1 {
font-size: 3.3em;
}
header > h2 {
font-size: 1.5em;
}
div#currentTime {
font-size: 1.1em;
line-height: 1.2em;
top: 40px;
}
div#countdown {
font-size: 1.7em;
}
}
/* =============================================
Tablet and Desktop Styles: greater than 1020px
=============================================
*/
#media only screen and (min-width: 1021px) {
body {
margin: 40px auto;
}
}
You could do something as simple as this:
HTML:
<div id="minutes"></div>
<div id="seconds"></div>
JavaScript:
// set minutes
var mins = 5;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.innerHTML = getminutes();
seconds.innerHTML = getseconds();
}
secs--;
setTimeout('Decrement()',1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
countdown();
I replaced your functions with my own functions.
To update the countdown / current time/date every seconds, I set an interval that executes the function every second:
setInterval(function() { ... }, 1000); // 1000 milliseconds = 1 second
Your way of gettings the date's hours, minutes, etc. is
// Function to display current date / time on the site
setInterval(function displayTimeAndDate() {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var date = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
// Place 0 before the numbers if the are lower than 10
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
var amOrPm;
// Check if it's a.m or p.m
if (hours < 12) {
amOrPm = "a.m";
} else {
amOrPm = "p.m";
}
document.getElementById('currentTime').innerText = month + "/" + date + "/" + year + " " + hours + ":" + minutes + ":" + seconds + " " + amOrPm;
}, 1000);
setInterval(function countdown() {
// Set the desired date (American date format: Month/Day/Year) to countdown to and the current date
var endDate = new Date('07/04/2018 09:00 PM');
var currentDate = new Date();
// Get the "distance" between the dates
var distance = endDate - currentDate;
// Initialize days, hours, minutes and seconds
var oneSecond = 1000; // 1000 milliseconds = 1 second
var oneMinute = oneSecond * 60;
var oneHour = oneMinute * 60;
var oneDay = oneHour * 24;
// Get distance in days, hours, minutes and seconds
var days = Math.floor(distance / oneDay);
var hours = Math.floor((distance % oneDay) / oneHour);
var minutes = Math.floor((distance % oneHour) / oneMinute);
var seconds = Math.floor((distance % oneMinute) / oneSecond);
// Place 0 before the numbers if the are lower than 10
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
document.getElementById('countdown').innerText = days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds"
}, 1000);
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 9
Review Assignment
Tulsa's Summer Party
Author:
Date:
Filename: tny_july.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tulsa's Summer Party</title>
<link href="tny_base.css" rel="stylesheet" />
<link href="tny_layout.css" rel="stylesheet" />
<script src="tny_timer.js" defer></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li>News</li>
<li>Night Beat</li>
<li>Tulsa Times</li>
<li>Calendar</li>
<li>City Links</li>
</ul>
</nav>
<img src="tny_banner2.png" id="logoImg" alt="" />
<h1>Tulsa's<br />Summer Party</h1>
<h2 id="timeHeading">Welcome to Tulsa</h2>
<div id="currentTime"></div>
</header>
<article>
<section>
<h1>Countdown to the Fireworks</h1>
<div id="countdown"></div>
<p>Celebrate the nation's birthday at <em>Tulsa's Summer
Party</em>, a daylong extravaganza in downtown Tulsa on the 4th of July. The festivities start at 9 a.m. with a 5K and 10K walk or race. A great event for the whole family. Sign up as an individual or part of a team.
</p>
<p>The <em>Farmer's
Market</em> is also back with farm-fresh produce, meats, and dairy. There's something for every pallet.
</p>
</section>
<section>
<p>Live music starts at 11 a.m. and continues through the day with special appearances from <em>Falstaff
Ergo</em>, <em>Crop Circles</em>, <em>Prairie Wind</em> and
<em>James Po</em>.
</p>
<p>At 9 p.m. enjoy the <em>fireworks</em> that have won awards as the best in the Midwest, designed and presented by
<em>Wizard Works</em>. Arrive early for the best seats!
</p>
<p>After the show, dance the night away to the music of the <em>Chromotones</em>.
</p>
<p>See you on the 4th!</p>
</section>
<nav class="vertical">
<h1>Party Links</h1>
<ul>
<li>5K and 10K Run</li>
<li>Famer's Market</li>
<li>Wizard Works</li>
<li>Falstaff Ergo</li>
<li>Crop Circles</li>
<li>James Po</li>
<li>Tulsa Fireworks</li>
<li>Prairie Wind</li>
</ul>
</nav>
</article>
<footer>
<address>
Tulsa Summer Party ·
340 Main Street, Tulsa, OK 74102 ·
(918) 555-3481
</address>
</footer>
</body>
Edit:
This time I didn't modify the HTML:
(I put it in a executable code snippet, otherwise I wouldn't be able to format it properly.)
// Function to display current date / time on the site
setInterval(function displayTimeAndDate() {
var today = new Date();
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var date = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var amOrPm;
// Check if it's a.m or p.m
if (hours < 12) {
amOrPm = "a.m";
} else {
amOrPm = "p.m";
}
document.getElementById('date').innerText = date + ":" + month + ":" + year;
document.getElementById('time').innerText = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
}, 1000);
setInterval(function countdown() {
// Set the desired date (American date format: Month/Day/Year) to countdown to and the current date
var endDate = new Date('07/04/2018 09:00 PM');
var currentDate = new Date();
// Get the "distance" between the dates
var distance = endDate - currentDate;
// Initialize days, hours, minutes and seconds
var oneSecond = 1000; // 1000 milliseconds = 1 second
var oneMinute = oneSecond * 60;
var oneHour = oneMinute * 60;
var oneDay = oneHour * 24;
// Get distance in days, hours, minutes and seconds
var days = Math.floor(distance / oneDay);
var hours = Math.floor((distance % oneDay) / oneHour);
var minutes = Math.floor((distance % oneHour) / oneMinute);
var seconds = Math.floor((distance % oneMinute) / oneSecond);
// Place 0 before the numbers if the are lower than 10
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
document.getElementById('dLeft').innerText = days;
document.getElmentById('hLeft').innerText = hours;
document.getElementById('mLeft').innerText = minutes;
document.getElementById('sLeft').innerText = seconds;
}, 1000);
Take a look at FlipClock.js
The html...
<html>
<head>
<link rel="stylesheet" href="/assets/css/flipclock.css">
</head>
<body>
<div class="your-clock"></div>
<script src="/assets/js/libs/jquery.js"></script>
<script src="/assets/js/flipclock/flipclock.min.js"></script>
</body>
</html>
Instantiating in JQuery...
var clock = $('.your-clock').FlipClock({
// ... your options here
});
Instantiating in JavaScript...
var clock = new FlipClock($('.your-clock'), {
// ... your options here
});

Countdown Clock (JS)

I can get the following to work in jsfiddle, but not on my website. The digits don't display, which leads me to think there's something wrong with my js. Do I need to add window.onload somewhere and if so, where?
html:
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
CSS:
body {
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1 {
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div {
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span {
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
JS:
function getTimeRemaining(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
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
// change date below to change countdown
var deadline = 'February 26 2016 17:00:00 GMT+12:00';
initializeClock('clockdiv', deadline);
Any assistance you can provide would be greatly appreciated. Thanks.
JSFiddle automatically puts your JavaScript in the onload function. If you don't have it that way on your website, simply wrap this portion of your JavaScript in the event listener:
window.addEventListener("load", function () {
// change date below to change countdown
var deadline = 'February 26 2016 17:00:00 GMT+12:00';
initializeClock('clockdiv', deadline);
});
A good explanation of the window.onload can be found here:
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
(emphasis mine)
Notice the onLoad property when you click on the "JavaScript" button on JSFiddle, it specifies that the code included there is loaded after the rest of the content.
So try to add window.onload = right before you call your functions, as more precisely specified here:
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

Categories

Resources