Building a Countdown App
Tags: webdev, javascript, beginners
Published: 2021-04-17 20:10:25

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.