DEV Community

loading...
Cover image for Building a Countdown App

Building a Countdown App

eworld profile image Emmanuel Os ・3 min read

Building the count app with JavaScript, but before that, I will highlight the steps we will be taking.

  1. write our html code
  2. write our css for styling
  3. write our JavaScript, to manipulate the data and give us a countdown App.

HTML CODE

  <h1>Countdown to 2022</h1>
  <div class="countdown-container">
    <div class="countdown-value days-c">
      <p class="big-text" id="days">0</p>
      <span>days</span>
    </div>
    <div class="countdown-value hour-c">
      <p class="big-text" id="hour">0</p>
      <span>hours</span>
    </div>
    <div class="countdown-value minute-c">
      <p class="big-text" id="mins">0</p>
      <span>mins</span>
    </div>
    <div class="countdown-value seconds-c">
      <p class="big-text" id="seconds">0</p>
      <span>seconds</span>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

from the above code, you can see, how we have written our html code. Now we move to our css for styling.

CSS CODE

* {
  box-sizing: border-box;
}

body {
  background-color: tomato;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin: 0;
  color: #f4f4f4;
}

h1 {
  font-weight: normal;
  font-size: 4rem;
  margin-top: 5rem;
  text-transform: uppercase;
  font-family: sans-serif;
}

.countdown-container {
  display: flex;
}

.big-text {
  font-weight: bold;
  font-size: 6rem;
  line-height: 1;
  margin: 0 2rem;
}

.countdown-value {
  text-align: center;
}
.countdown-value span {
  font-size: 1.3rem;
}
Enter fullscreen mode Exit fullscreen mode

Now we will move to JavaScript, so we manipulate the data in the html code and make it dynamic.

JavaScript
we will get all the html element using there Id.

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');

Enter fullscreen mode Exit fullscreen mode

then we will choose the date we want to countdown too

const countdown = "1 Jan 2022";

Enter fullscreen mode Exit fullscreen mode

then write our function, where we will bring in our current date and the date will want to countdown too. Do some maths(remember JavaScript have numbers and math object.

function countdownApp() {
  const countdownDate = new Date(countdown);
  const currentDate = new Date();

  const totalseconds = (countdownDate - currentDate) / 1000;

  const days = Math.floor(totalseconds / 3600 / 24);
  const hour = Math.floor(totalseconds / 3600) % 24;
  const mins = Math.floor(totalseconds / 60) %60;
  const seconds = Math.floor(totalseconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formatTime(hour);
  minsEl.innerHTML = formatTime(mins);
  secondsEl.innerHTML = formatTime(seconds);
}
Enter fullscreen mode Exit fullscreen mode

we will format the time, so as to start the countdown accurate

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

then we will call the function to kick start and set our interval for the countdown

countdownApp();

setInterval(countdownApp, 1000);
Enter fullscreen mode Exit fullscreen mode

Your code is suppose to look like this in the complete version

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');

const countdown = "1 Jan 2022";

function countdownApp() {
  const countdownDate = new Date(countdown);
  const currentDate = new Date();

  const totalseconds = (countdownDate - currentDate) / 1000;

  const days = Math.floor(totalseconds / 3600 / 24);
  const hour = Math.floor(totalseconds / 3600) % 24;
  const mins = Math.floor(totalseconds / 60) %60;
  const seconds = Math.floor(totalseconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formatTime(hour);
  minsEl.innerHTML = formatTime(mins);
  secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time) {
  return time < 10? `0${time}` : time;
}

countdownApp();

setInterval(countdownApp, 1000);

Enter fullscreen mode Exit fullscreen mode

And our countdown App is up and running, counting down to Jan 2022.

*Oh we need to make it responsive for mobile devices
Adding more code to our CSS code

@media screen and (max-width: 600px) {
  body {
    overflow: hidden;
  }
  h1 {
    font-size: 1.5rem;
    font-weight: 800;
  }
  .countdown-container {
    display: flex;
    flex-direction: column;
  }
  .big-text {
    font-size: 4rem;
    font-weight: normal;
  }
  .countdown-value span {
    margin: 1rem;
  }
}
Enter fullscreen mode Exit fullscreen mode

Now is responsive and running.
Thank you

I wish to bring more, as I journey.

Discussion (15)

pic
Editor guide
Collapse
nikolahristov profile image
Niki Hristov

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
eworld profile image
Emmanuel Os Author

Thanks so much

Collapse
eworld profile image
Emmanuel Os Author

Noted, I will in the next one

Collapse
andrewbaisden profile image
Andrew Baisden

So many people do not realise this. Maybe the Write a new post page should have some sort of instructions or some markdown snippets. Or even better a way to automatically add those tags.

Collapse
eworld profile image
Emmanuel Os Author

Sure. I think so

Collapse
prakh_r profile image
Prakhar Yadav

Great tutorial. Good for practice.
Can you please help me with the meaning of 0${time}
and the whole line as well.

return time < 10? `0${time}` : time;

Collapse
eworld profile image
Emmanuel Os Author
0${time}
Enter fullscreen mode Exit fullscreen mode

Means adding zero (0) to the time if is less than 10, when counting down.

return time < 10? `0${time}` : time;
Enter fullscreen mode Exit fullscreen mode

We use return ternary to check the time and add 0 to it, if the count down is less than 10 or return the normal format time, when counting down.

Thank you
I hope this helps

Collapse
prakh_r profile image
Prakhar Yadav

thanks a ton :)
And please keep stuff like this coming.
Projects like these are fun and helpful for beginners and others to keep in touch with the language.
Cheers 🥂

Thread Thread
eworld profile image
Emmanuel Os Author

Sure I will.
Thank you

Collapse
code2rithik profile image
Rithik Samanthula

Awesome to see that you are progressing man. Looking forward to some more great content!

Collapse
eworld profile image
Emmanuel Os Author

Thanks, sure I will

Collapse
mitya profile image
Dima

What about clearInterval?

Collapse
michi profile image
Michael Z

Note that setInterval of 1000ms will actually not trigger the callback exactly every 1000ms. More info here: m.youtube.com/watch?v=MCi6AZMkxcU

Collapse
mafee6 profile image
Collapse
andrewbaisden profile image
Andrew Baisden

Cool tutorial.