How to Make an Online Timer via Velo's GUI or JavaScript Editor

Building a simple online timer app is easy on Wix. It's quite simple building it via the graphical user interface. If you have JavaScript knowledge and want to build it yourself with custom code, you can use Velo's built-in coding editor.

Building an Online Timer Using the GUI

Wix’s editor is great, and almost anyone can use it. You want to go to the add menu, and add an “App” search for timer. As seen below.

Choose “Countdown Timer” for this; it can be customised. This can also be done in the Wix App Store. Once you select it it will now spawn in a timer. This is at a random time, you can modify, customise and fix everything after.

Firstly, to fix everything here, you’ll want to go to the settings, then design. From here, you can now modify the timer to your exact liking! If that exact liking falls under presets that is.

Building an Online Timer with your Own JavaScript Code

Of course, we are making countdown timers here. This has been done multiple times, so you can use somebody else's code (PROVIDED THEY ALLOW IT) for your timer.

Personally, I chose to give an example through using already written code, again, with permission from a tutorial!

This code is from a site called w3schools. A good site to be sure, that helps many budding programmers!

The code is written in a .js extension. You can add it to your site by linking to it with HTML.

<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 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);
  // 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>

Again, this is from W3Schools, do give them some love!

Feel free to change lines for your site, if there is anything you want to customize.

The uses for this would be your shop sales, giveaways and other uses where you’d need a countdown.

There is also a great deal of use for things like cooking! That is to say, if you’re a hipster who just denies the use of googles timers.

If you were to walk up to me a year ago and say “Hey, make a timer right now with Javascript only, using a text editor you’ve never used” I would’ve said no. Granted, I’d still say no if it weren’t for being intrigued with Velo, but the point stands.

It was an enjoyable experience to learn about Velo while making this timer. I think the GUI is great for people like me who don't have much JavaScript knowledge yet.

This article is part of a writing contest hosted by Hacker Noon in partnership with Wix. Learn how to enter here and take a shot at winning $1000 every month, from March 1st, 2021 to May 31st, 2021.