Js Countdown text not staying inside the centre of the border

Js Countdown text not staying inside the centre of the border - javascript

I have a problem aligning text inside a border. The text needs to be in the centre of the border.
As you can see the text is slightly right and the number is slightly left
I managed to get it working on chrome but it doesn't work on code pen, safari or internet explorer. Here is the codepen
Here is my HTML
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 and the count down date
var distance = countDownDate - now;
// Time calculations for weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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("Countdown_Days").innerHTML =
days + "<span>" + "<br>" + "Days" + "</span>";
document.getElementById("Countdown_Hours").innerHTML =
hours + "<span>" + "<br>" + "Hours" + "</span>";
document.getElementById("Countdown_Minutes").innerHTML =
minutes + "<span>" + "<br>" + "Minutes" + "</span>";
document.getElementById("Countdown_Seconds").innerHTML =
seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
h2 {
border: solid 1px #000;
border-radius: 100%;
display: inline-flex;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<div class="countdown">
<h1>Launch In</h1>
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
Thanks for any help in advance!

I've changed the flex-direction for the H2 elements and instead of using span and br elements I used div elements. Is this the result you were looking for?
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 and the count down date
var distance = countDownDate - now;
// Time calculations for weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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("Countdown_Days").innerHTML = `<div>${days}</div><div>Days</div>`;
document.getElementById("Countdown_Hours").innerHTML =`<div>${hours}</div><div>Hours</div>`;
document.getElementById("Countdown_Minutes").innerHTML = `<div>${minutes}</div><div>Minutes</div>`;
document.getElementById("Countdown_Seconds").innerHTML = `<div>${seconds}</div><div>Seconds</div>`;
});
h2 {
align-items: center;
border: solid 1px #000;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<div class="countdown">
<h1>Launch In</h1>
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>

Use this css instead of yours css:
.countdown {
display: flex;
}
h2{
border: solid 1px #000;
border-radius: 100%;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
And your h1 is placed above countdown div
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<h1>Launch In</h1>
<div class="countdown">
<h2 id="Countdown_Days">58<span><br>Days</span></h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
<h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
<h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
</div>
</div>
</div>
</div>
// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();
// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';
// 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 and the count down date
var distance = countDownDate - now;
// Time calculations for weeks, days, hours, minutes and seconds
// var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
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("Countdown_Days").innerHTML =
days + "<span>" + "<br>" + "Days" + "</span>";
document.getElementById("Countdown_Hours").innerHTML =
hours + "<span>" + "<br>" + "Hours" + "</span>";
document.getElementById("Countdown_Minutes").innerHTML =
minutes + "<span>" + "<br>" + "Minutes" + "</span>";
document.getElementById("Countdown_Seconds").innerHTML =
seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
.countdown {
display: flex;
}
h2{
border: solid 1px #000;
border-radius: 100%;
padding: 30px 25px;
font-size: 20px !important;
color: #fff;
font-weight: 600;
line-height: 25px;
height: 125px;
width: 125px;
margin: auto;
text-align: center;
margin-left: 5px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="overlay">
<div class="row marginnone">
<div class="col-lg-7 col-md-12 center">
<h1>Launch In</h1>
<div class="countdown">
<h2 id="Countdown_Days">58<span><br>Days</span> </h2>
<h2 id="Countdown_Hours">22<span><br>Hours</span> </h2>
<h2 id="Countdown_Minutes">42<span> <br>Minutes</span>
</h2>
<h2 id="Countdown_Seconds">40<span> <br>Seconds</span>
</h2>
</div>
</div>
</div>
</div>

Related

How to make Countdown Input with Button

I wanna make Countdown Timer with input, start button and stop/reset button. I try to make the input and start button but it does kinda not work, how to fix this problem with the input for the timer that can work?
const daysEl = document.getElementById("days");
const hoursEl = document.getElementById("hours");
const minsEl = document.getElementById("mins");
const secondsEl = document.getElementById("seconds");
const newYears = document.getElementById("Timer").value;
function countdown(){
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600 ) % 24;
const mins = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = formatTime(hours);
minsEl.innerHTML = formatTime(mins);
secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time){
return time < 10 ? `0${time}` : time;
}
// initial call
if(start){
countdown();
setInterval(countdown, 1000);
}
else{
alert("invalid date");
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
*{
box-sizing: border-box;
}
body{
background-image: url("assets/newyear.jpg");
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
font-family: "Poppins", sans-serif;
margin: 0;
}
h1{
font-weight: normal;
font-size: 4rem;
margin-top: 5rem;
color: white;
}
.countdown-container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.big-text{
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 1rem 2rem;
color: white;
}
.countdown-el{
text-align: center;
color: white;
}
.countdown-el span{
font-size: 1.3rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CountDown Timer</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div id="countdowninput">
<input type="text" id="Timer" value="1 Jan 2023"/>
<button id="start" type="submit">Start</button>
</div>
<h1>New Years Eve</h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>hours</span>
</div>
<div class="countdown-el mins-c">
<p class="big-text" id="mins">0</p>
<span>minutes</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>
After this maybe I would do change the image button on the timer bottom, like new year, birthday, Christmas, and more.

Here you go! Create an input with whatever id you choose, in this case I used #dateSearch.
Create an input value, then create a new Date object from the input value.
Then the rest of the code is what is executing the countdown!
Enjoy.
document.getElementById("dateSearch").addEventListener("change", function() {
var input = this.value;
var countDownDate = new Date(input).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);
})
#demo {
font-size: 3rem;
font-weight: bolder;
text-align: center;
}
.form-input, h1 {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" referrerpolicy="no-referrer"></script>
<div class="form-input">
<label for="dateSearch">Enter a Date to Countdown:</label>
<input type="date" id="dateSearch">
</div>
<div class="countdown">
<h1>Countdown Timer:</h1>
<p id="demo"></p>
</div>

Change Javascript timer with CSS

I want to create the following resultenter image description here
It is a cowntdown that I want to be in my html code.I have created the timer with javascript and it works fine but I cannot make it appear as I want in my html.I want it to appear exactly like the picture.
Here is my code
my html
<div class="container">
<hr class="new4">
<p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
<p id="timer" class="timer text-center"></p>
<hr class="new4">
</div>
and my javascript
// Set the date we're counting down to
var countDownDate = new Date("Sep 19, 2020 16:30:00").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("timer").innerHTML = days + " " + hours + " "
+ minutes + " " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Συμβαίνει Τώρα";
}
}, 1000);
and my css
hr.new4 {
border: 1px solid white;
}
.timer{
font-size: 117px;
color:white;
}
Here is how it looks for me.enter image description here
I can not understand how to make the text apear exatly bellow the numbers and I cant understand how to add paddings between each of the elements that get return by the javascript document.getElementById() function.
Please help me it is an emerjency I must have it until tomorow

To make each time unit a different element, update the timer HTML like so:
document.getElementById("timer").innerHTML = `
<span data-unit="Days">${days}</span>
<span data-unit="Hours">${hours}</span>
<span data-unit="Minutes">${minutes}</span>
<span data-unit="Seconds">${seconds}</span>
`;
Then style them using CSS, to add margin, and a pseudo element representing the unit:
#timer span {
display: inline-block;
margin: 10px;
}
#timer span:before {
content: attr(data-unit);
position: absolute;
transform: translate(offsetX, offsetY); /* Here you have to find the correct X and Y values */
}

To properly center the text under the numbers I recommend that you use flexbox.
I created additional containers to properly space things with display: flex and used flex-direction: column when necessary or did not defining any value for my flex container in some places because the default value for flex-direction is row.
Note that I separated the timer into different <p> and used static values in our <p> elements for our digits that represent days, hours, minutes and seconds:
Separating them into different <p> allow us to have more control over their positioning.
The static values are only for illustrative purposes because I did not modify your JavaScript code.
You have to modify your JavaScript code to update each <p> in the HTML individually.
Check my CodePen example with the modified HTML and CSS: https://codepen.io/stevescruz/pen/bGpLjKj.
<div class="container">
<hr class="new4">
<div class="timer-container">
<p class="countdown text-center">Μέχρι το δορυφορικό συμπόσιο απομένουν</p>
<div class="content-container">
<div class="unit-container">
<p id="timer" class="timer text-center">22</p>
<p class="timer-text">day</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">23</p>
<p class="timer-text">hours</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">41</p>
<p class="timer-text">min</p>
</div>
<div class="unit-container">
<p id="timer" class="timer text-center">16</p>
<p class="timer-text">sec</p>
</div>
</div>
</div>
<hr class="new4">
</div>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
hr.new4 {
border: 1px solid white;
}
.timer-container {
display: flex;
flex-direction: column;
}
.content-container {
display: flex;
justify-content: space-around;
}
.countdown {
font-size: 48px;
font-weight: bold;
color: white;
align-self: center;
}
.unit-container {
display: flex;
flex-direction: column;
align-items: center;
}
.timer {
font-size: 117px;
color: white;
}
.timer-text {
font-size: 60px;
color: white;
}
body {
background: #194079;
}

countdown timer is not working while creating coming soon page

I am trying to display a countdown timer for coming soon webpage. Everything is working fine except for the timer that is written in javascript. I also tried by making it an external file. It also reads the file when making external but the timer is not shown on the page.
This is my blade file
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Coming Soon</title>
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital#1&family=Montserrat&family=Open+Sans+Condensed:wght#300&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<p id="launch"></p>
</header>
<script>
var date = new Date("Jan 1, 2020 00:00:00").getTime();
var countdownfunction = setInterval(function() {
var today = new Date().getTime();
var distance = date - today;
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);
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
And this is css
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/images/comingsoon.jpg');
height: 100vh;
background-position: center;
background-size: cover;
}
.soon {
top: 50%;
left: 50%;
position: absolute;
transform:translate(-50%,-50%);
color: #fff;
text-align: center;
font-family: 'Balsamiq Sans', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Playfair Display', serif;
}
h1 {
font-size: 60px;
letter-spacing: 15px;
}
hr{
width: 50%;
margin: 30px auto;
border: 1.5px solid #fff;
}
p{
font-size:20px;
margin-bottom:30px;
}

you have to add a tag with id demo like a div
and also your future date is wrong
<header>
<div class="soon">
<p> We will be back with beautiful website</p>
<h1>COMING SOON</h1>
<hr>
<div id=demo></div>div>
<p id="launch"></p>
</header>
your date is expired change it to something in the future
var date = new Date("Jan 1, 2021 00:00:00").getTime();

change <p id="launch"></p> to <p id="demo"></p> on html code,
or change document.getElementById("demo") to document.getElementById("launch") on script code

Countdown js clock not working when run locally but working on jsfiddle [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
*Note the following code is completed copy and pasted, I do not know js but want to add this one feature of a countdown clock to my site (original code found at https://codepen.io/SitePoint/pen/MwNPVq)
here is the code (jsfiddle included at bottom)
<head>
<script>
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);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</head>
<body>
<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>
</body>
http://jsfiddle.net/mktc6q4n/
Does anyone know why this is not working locally in my browser?

You are trying to call the function initializeClock when the elements haven't been loaded yet. Meaning that the div (id clockdiv) does not exist yet, so the query selector can't find it and returns null.
Moving the script to the end of the body should solve it (lazy fix).

This works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/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;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload = function () {
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);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
}
</script>
</head>
<body>
<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>
</body>
</html>

The problem here is that your javascript is being executed before the HTML is rendered. You have 2 options to fix this
Load the script tag at the end of the <body> tag, so you can copy this snippet
<body>
<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>
<script>
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);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</body>
Wait till the DOM is completely loaded with
<script>
window.addEventListener("DOMContentLoaded", function () {
// do stuff
}, false);
</script>
So, copying this will make it work as well
<head>
<script>
window.addEventListener("DOMContentLoaded", function () {
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);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
}, false);
</script>
</head>
<body>
<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>
</body>
</html>
Here you have a small tutorial on how to get started with HTML, CSS and Javascript. I hope it helps
How TO - Build a Website

Your javascript in the head is not being executing because it is not inside the body or attached to any event. You run it when the page loads with window.onload = function(){} or you can place at the end of the body.
You can copy any of the following snippets.
Function run when the window loads:
<html>
<head>
<script>
window.onload = function(){
initializeClock('clockdiv', deadline);
}
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);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
</script>
<style>
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;
}
</style>
</head>
<body>
<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>
</body>
</html>
Script at end of body:
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<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>
<script>
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);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</body>
</html>

Create Double Digits in Javascript Countdown Timer?

What javascript would I need to create in order to have the countdown timer always in double digits if a numeral is down to only one digit. If seconds are at 6 I want it to say 06, if hours at 2 want it to say 02 and so on.
Pen: http://codepen.io/zepzia/pen/MmoVJm
HTML
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<body>
<div class="countdown-wrapper">
<div id="countdown-text">
<div class="timer">
<div id="daysTicker" class="countdown"></div>
<div class="counter-text">DAYS</div>
</div>
<div class="timer">
<div id="hoursTicker" class="countdown"></div>
<div class="counter-text">HOURS</div>
</div>
<div class="timer">
<div id="minsTicker" class="countdown"></div>
<div class="counter-text">MINS</div>
</div>
<div class="timer">
<div id="secsTicker" class="countdown"></div>
<div class="counter-text">SECS</div>
</div>
</div>
</div>
</body>
CSS
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;
}
.counter-text {
font-weight: 900;
font-size: 40px;
color: black;
opacity: .8;
text-align: center;
}
.timer {
display: inline-block;
margin: 10px;
}
JS
// 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("daysTicker").innerHTML = days;
document.getElementById("hoursTicker").innerHTML = hours;
document.getElementById("minsTicker").innerHTML = minutes;
document.getElementById("secsTicker").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);

You can use toLocaleString, and set minimum digits to 2, that way when there is only one digit it will prefix it with 0
var x = 8;
console.log(x.toLocaleString(undefined,{minimumIntegerDigits: 2}));
var y = 12;
console.log(y.toLocaleString(undefined,{minimumIntegerDigits: 2}));

You could use ('0' + myValue).substr(-2) to fix the length with 2 characters. In this case '01' would be stay as '01' and '012' will be '12' because the -2 will cut the string from the end.

Do this for all time fields.
if((hours+"").length === 1){
hours = "0"+hours;
}
This code will test the string length of the variable, and if the length is one, will add the digit "0" in front of it. You have to treat this as a string, because the integer '06' will be interpreted as just '6'

Check if desired numbers are less then 10 and and the 0 as string:
document.getElementById("daysTicker").innerHTML = (days < 10) ? ('0' + days) : days;

My Answer will 100% work
if (days<10) {
document.getElementById("daysTicker").innerHTML ="0"+days ;}else{
document.getElementById("daysTicker").innerHTML =days ;
}
if (hours<10) {
document.getElementById("hoursTicker").innerHTML ="0"+hours ;}else{
document.getElementById("hoursTicker").innerHTML =hours ;
}
if (minutes<10) {
document.getElementById("minsTicker").innerHTML ="0"+minutes ;}else{
document.getElementById("minsTicker").innerHTML =minutes ;
}
if (seconds<10) {
document.getElementById("secsTicker").innerHTML ="0"+seconds ;}else{
document.getElementById("secsTicker").innerHTML =seconds ;
}

We Keep Coding

JavaScript is the programming language of the Web.

Js Countdown text not staying inside the centre of the border - javascript

Related

How to make Countdown Input with Button

Change Javascript timer with CSS

countdown timer is not working while creating coming soon page

Countdown js clock not working when run locally but working on jsfiddle [duplicate]

Create Double Digits in Javascript Countdown Timer?

Categories

Resources