Building a Countdown App

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>

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;
}

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');

then we will choose the date we want to countdown too

const countdown = "1 Jan 2022";

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);
}

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

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

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

countdownApp();

setInterval(countdownApp, 1000);

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);

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;
  }
}

Now is responsive and running.
Thank you

I wish to bring more, as I journey.

Comments

[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;

[Emmanuel Os]

0${time}

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

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

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

[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 🥂

[Emmanuel Os]

Sure I will.
Thank you

[Rithik Samanthula]

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

[Emmanuel Os]

Thanks, sure I will

[Andrew Baisden]

Cool tutorial.

[Dima]

What about clearInterval?

[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

[Emmanuel Os]

Thanks so much

[Mafee7]

EZ

[Emmanuel Os]

Noted, I will in the next one

[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.

[Emmanuel Os]

Sure. I think so