I've searched other questions and google/YouTube, and from what I've found, it seems that this is possible, but I have not found this exact use case as an example to pull from. And to preface, I have a slight working knowledge of coding, but not a whole lot.
Here's what I'm trying to accomplish: I want to create a countdown timer in Google Sheets with 2 possible functions (depending on the use case):
1) where I can put in the end date the timer counts down to, either in a specific cell or in the code itself.
2) using a dynamic date (i.e., 30 days from the date the timer was created)
So where I have gotten stuck... I tried using script.google.com and pasted this script for a countdown timer that I found online:
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
But when I run the code, I get "Syntax error. (line 7, file "countdown")".
What modifications do I need to make to the code to get it to work? Or am I using an overcomplicated code to create the timer, and there is a much easier way?
Did you save it as HTML? Or as JS?
Because you should save it as .html since your Javascript is within tags instead of it being a separate file.
The code you pulled from w3schools is just a snippet, I've added and tags and it works just fine.
In your example snippet you also pasted it into the Javascript box instead of the HTML box.
Try this example, it's exactly the code you had!
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 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);
</script>
</body>
Another way of doing it is to actually separate your javascript and html into separate files to keep it cleaner and to keep scripts and HTML separated. For example name your HTML index.html and your script timer.js
Then in your HTML, instead of the big blob of script, you simply do
<script src="/timer.js"></script>
// Save this as for example timer.js
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 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);
<!-- Save this as index.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<!-- Load the Javascript from a separate file called timer.js -->
<script src="/timer.js"></script>
</body>
Related
Is there a way to take this pre-existing code and make it so that instead of having the end date as a preset value. have it so that the user can select an end date using date inputs and time inputs. I there a way to do this by only Using HTML and Javascript with an onClick() function to avoid using PHP. Any help that I can get would be extremely helpful.
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 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);
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
End Date <input type="datetime-local" id="endDate">
<button onclick="countdownTimeStart()">Start Timer</button>
<script>
// Set the date we're counting down to
function countdownTimeStart(){
var endDate = document.getElementById('endDate').value;
var dateObject = new Date(endDate);
var countDownDate = new Date(dateObject).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);
}
</script>
</body>
</html>
How can I create a countdown to a specific date & time so that users anywhere in the world are counting down to the same UTC (or timezone) time.
This code below (from here at W3Schools.com) works for a general countdown but how can I add in the timezone aspect?
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Apr 20, 2021 20:00: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("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);
</script>
</body>
</html>
simply use yourDate.toLocaleString( ... => https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString
list of Time Zone : https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
sample code :
var countDownDate = new Date("Apr 20, 2021 20:00:00")
const timeOption = { hour12:true, timeZone:'UTC' };
console.log( countDownDate.toLocaleString("en-GB", timeOption ) )
I created a very minimal teaser page with a counter written in pure Javascript (no jQuery etc.).
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/javascript" src="countdown.js"></script>
</head>
<body>
<h1>Countdown:</h1>
<p id="counter"></p>
</body>
</html>
This is my Javascript:
// Set the date we're counting down to
var countDownDate = new Date("Sep 01, 2019 10:00:00").getTime();
// Update the count down every 1 second
var countdownfunction = setInterval(function() {
// Get todays date and time, calculate distance
var now = new Date().getTime();
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("counter").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("counter").innerHTML = "EXPIRED";
}
}, 1000);
It works pretty well. However, when the page loads, it starts with an empty line and about a second later, the countdown is displayed.
Is there a way to avoid that behavior? I'd like to show the countdown right from the start, even if this means to delay the display of the whole page until the DOM is ready.
At the moment, the JS-code is located in an external file. I load this file at the end of the <body>. I also placed it ant the end of the <head> with no difference.
Any help is greatly appreciated!
Obviously your Javascript is loaded after your HTML is loaded. Put your code into the <head> section:
<script>
window.onload = function () {
document.getElementById("counter").innerHTML = hours + "h " + minutes + "m ";
};
</script>
... it needs window.onload too (thanks to Kaddath).
I"m trying to use this countdown but it calculates the time every second.
I want to counter to count the time by minutes or even hours, not every second because i only display days and hours.
I've tryied to remove the var seconds or minutes but the inspect elemnts showing me a purplr blink on the timer every 1 second meaning it's still calculating the time by seconds.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("April 24, 2018 15:37:25").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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
Change
// Update the count down every 1 second
var x = setInterval(function() {
...
}, 1000);
to
// Update the count down every 1 minute
var x = setInterval(function() {
...
}, 1000*60);
or
// Update the count down every 1 hour
var x = setInterval(function() {
...
}, 1000*60*60);
Edit
That will update your timer every minute/hour. Now, to start countdown and update every minute/hour:
calculateCountdown();
// Update the count down every 1 minute
var x = setInterval(function() {
calculateDountdown();
}, 1000*60);
or just
calculateCountdown();
setInterval(calculateCountdown, 1000*60);
where
function calculateCountdown() {
// 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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}
Check this answer to see how to refactor setInterval based solution to setTimeout based.
I am trying to display a full screen image after a jQuery countdown timer has finished but I am confused how to do this within my jQuery/css/html scripts
My jQuery code is as follows:
//Sets the date and time the clock is counting down to
var countDownDate = new Date("August 23, 2017 17:43:00").getTime();
//Updates the counter every second
var x = setInterval(function() {
//Get today's date and time
var now = new Date().getTime();
// Finding the length of time between now and 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 an 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 = " you've been screwed over by Theresa May";
function myFunction() {
var m = document.getElementsByClassName("image");
m[0].innerHTML = "image";
}
}
}, 1000);
My HTML is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Brexit Countdown 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href ="Brexit2.css" rel="stylesheet" type="text/css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<script src="Brexit2.js"></script>
</head>
<body>
<h1>Brexit Countdown</h1>
<p id="demo"></p>
</body>
</html>
My CSS is as follows-
p {
text-align: center;
font-size: 80px;
}
h1 {
text-align: center;
font-size: 200px;
}
As mentioned at the beginning I simply want to display an image along with a statement after the countdown finally finishes. I really would appreciate some help here. Many thanks.
//Consider this function to display the image and the <p>
function myFunction() {
document.getElementById("displayImage").style="display:block";
}
//This calls the myFunction() in the set time.
setInterval(myFunction, 5000);
//5000 is in milliseconds, which is 5 seconds.
<div id="displayImage" style="display:none">
<img src="https://www.google.co.in/images/branding/googleg/1x/googleg_standard_color_128dp.png">
<p>Assume that this is the image you wanna display...</p>
</div>
Please use this JSFiddle as reference. Please set the countDownDate to a future time, else it wont work.
Demo: here
Code:
//Sets the date and time the clock is counting down to
var countDownDate = new Date("August 23, 2017 23:29:00").getTime();
//Updates the counter every second
var x = setInterval(function() {
//Get today's date and time
var now = new Date().getTime();
// Finding the length of time between now and 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 an 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 = " you've been screwed over <br> by Theresa May";
var m = document.getElementsByClassName("image");
m[0].src = "https://upload.wikimedia.org/wikipedia/commons/7/79/Operation_Upshot-Knothole_-_Badger_001.jpg";
}
}, 1000);
A common way is to add the image to the html, but to hide it using a css class.
HTML:
<img id="hiddenImage" class="hiddenClass" src="someSource.jpg">
CSS:
.hiddenClass {
display: none;
}
Then, using jQuery or vanilla JS, you either change the CSS class to something else, or to remove the class.
jQuery:
// find by id, the jQuery way
var image = $('#hiddenImage');
// remove the class that was hiding the image before
// this will make it visible by default
image.removeClass('hiddenClass');
JsFiddle Demo: https://jsfiddle.net/jonahe/rxprv1c0/