Building a Simple Countdown Timer and HTML Reveal With Vanilla JavaScript

Atina Chaikith
Aug 14, 2020 · 2 min read

I recently held a contest on my Instagram to provide my services for free to creatives and small businesses who needed a website/portfolio built.

Note: This is only one way to achieve this. Take it and run wild! (full code at end of article)

To select the contest winners, I built a simple function to randomize an array. For now they are numbers, but you can substitute these for the list you need to pick from.

const array = [1, 2, 3, 4, 5, 6];

Create a variable that makes a shallow copy of your array and slices it:

const b = array.slice();

Then create a new array that data will be pushed to:

const newArr = [];

Next, create a simple for loop that will randomize the items in your array, and push to your newArr:

for (let i = 0; i < 3; i++) {let arr = b[Math.floor(Math.random() * b.length)];let index = b.indexOf(arr);b.splice(index, 1);newArr.push(arr);}

In this case, because I wanted 3 winners selected, i < 3, so you would change this to however many you wanted.

I almost forgot — this is the HTML body markup:

<h1>WINNERS WILL APPEAR BELOW!</h1><div id="container"><!-- winners will append here! --></div>

Now for the fun! I used this code from Experts-Exchange and tweaked it.

Create a let variable that is globally scoped, this will be your starting number. In my case, I started the countdown at 5.

let current_count = 5;

In my function called countDown, I’m first going to append an <h2> to my container div with the .innerHTML property that appends the number if current_count is greater than 0:

function countDown() {document.getElementById("container",).innerHTML = `<h2> ${current_count}</h2>`;}             
if (current_count > 0) {
current_count--;}

The next section is two parts and happens simultaneously:

First, clear the <h2>. I added this so when current_count = 0, it is removed from the page and the next .innerHTML can really shine.

else {clearInterval(countJob);document.getElementById("container").innerHTML = `<h2> </h2>`;

In the same else block:

newArr.forEach((winner) => {document.getElementById(“container”,).innerHTML += `<li> ${winner}</li>`;
});
}

The whole countDown function will look like this:

function countDown() {document.getElementById("container",).innerHTML = `<h2> ${current_count}</h2>`;if (current_count > 0) {current_count--;} else {clearInterval(countJob);document.getElementById("container").innerHTML = `<h2> </h2>`;newArr.forEach((winner) => {document.getElementById("container",).innerHTML += `<li> ${winner}</li>`;});}}

Lastly, launch the countDown function in a SetInterval variable:

const countJob = setInterval("countDown()", 1000);

And that’s it!

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Atina Chaikith

Written by

DJ, Web Developer. Doing millennial things in Toronto

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Atina Chaikith

Written by

DJ, Web Developer. Doing millennial things in Toronto

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store