Quick Javascript Apps

Part 1 — Countdown Timer

Photo by Agê Barros on Unsplash

In this series I want to go over some methods that are widely used by building small apps to help focus our goals.

For this first one we will build a countdown timer using html,css, and js, focusing mostly on the Javascript. This series will assume you know enough html etc… to get started and that you are set up in your environment. I will be using VSCode.

Okay so first off I have created a folder with a html, css, and js file.

Let's start with our html page…

here we have a basic html page. Anything in the body will show up when you open your html file in your browser. So let’s test this real quick. I will add a h1 tag and type a small message then in my terminal I can type open index.html and see my page in the browser.

Great! we’re up and running. You can also notice that in the head there is a title tag, this is what will show up on the tab at the top.

Now to be able to style our page lets add a link to our style.css file and also lets add a link to our js file.

Typically the stylesheet is linked in the head and the script is added under the closing body tag but can also be placed in the head with a defer so that it still runs last.

Now let’s add some stuff for our timer. we will need days, hours, minutes, and seconds which we will put in individual divs and give everything class names and id’s so we can style and add js.

and this will look like this…

I am counting down to my hawaii vacation but we can countdown to anything we want and it’s easy to change I will go through that a little later.

That’s it for our html file now lets add some style to our css page.

Because I want to focus on js and not css (for a change) I will paste my css below…

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
* {
box-sizing: border-box;
}
body {
background-image: url(https://images.unsplash.com/photo-1556775351-fe97561f7b42?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80);
background-size: cover;
/* background-position: center center; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Poppins", sans-serif;
margin: 0;
}
h1 {
font-size: 4rem;
margin-top: -20rem;
}
.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;
}
.countdown-el {
text-align: center;
}
.countdown-el span {
font-size: 1.5rem;
}

above is just some basic styling to make our page look a little nicer.

So with the above code in our css file and linked in our html file we should see the following…

As you can see, everything is nice and center, I added a background image and styled my font etc… so everything looks great now it’s time for the real stuff, the Javascript.

So breaking this down top to bottom. First we need the elements we want to add js to and looking back at our html page we can see all the id’s for days,hours,mins and seconds. so first we create the variables equal to document.getElementById with each id passed in.

Then I created a variable for our date, this is what we can change to be whatever date we want to countdown to.

Now we need our countdown function, also when I started this it was for new years so I’ll change back to that real quick by changing my h1 tag to say new years… and by changing my date to 1 Jan 2022.

Okay we’re counting down to new years now.

Back to our function. we set our newYearsDate and currentDate with new Date() and for our new years date we pass our newYears variable.

Next we need to figure out our total seconds with…

const totalSeconds = (newYearsDate - currentDate) / 1000;

now let's do the math for determining our days, hours, mins, and seconds.

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;

so we divide totalSeconds by 3600 then 24 for our days cause there are 3600 seconds in an hour and 24 hours in a day. We take that logic all the way through as you can see and so we have our timers. At the bottom you can see we set our interval to 1000 milliseconds or 1 second that determines our countdown interval, we want to countdown every second.

Now what we have to do is add oue js to our html by taking our variables from the top and adding our js variables to our innerHTML. You can also see i added a function, which is not necessary but it looks better in my opinion and that is adding a zero before the single numbers.

function formatTime(time) {
return time < 10 ? `0${time}` : time;
}

so if the number is less than 10 add a zero if not just leave it.

That’s pretty much it, if we want to change the date just change it in the newYears variable in the same format and your counter will change.

Again, thanks for reading and if you want to challenge yourself a little bit maybe try to add the ability to change the date from the webpage.