After completing a 20 days JavaScript Challenge where I built 20 JavaScript apps with my knowledge of Vanilla JavaScript. I thought of putting it into writing because I know that someone would definitely need it.

The Countdown Timer is a Web app that shows the time remaining for a time to elapse which is always in Days, Hours, Minutes and Seconds and this is built for the purpose of displaying in Days, Hours, Minutes and Seconds the time remaining for 2021 to elapse and it was built with HTML, CSS and Vanilla JavaScript.

I would be explaining with code snippets to show what I did and I believe it would be easier to try it out on your personal text editor.

This piece of writing is divided into three parts which are;

HTML Structure.
CSS Styling.
JavaScript Functionality.

HTML Structure

The HTML code snippet shows the structure of the app, how every content on the web page was written using different tags to show the sections of the page. On this page we have the title and the countdown container that serves as a house for the countdown boxes. Below is the code snippet:

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <title>Countdown Timer</title>
</head>
<body>
  <!-- Header -->
  <h1>2021 Countdown Timer</h1>

  <div class="countdown-container">
    <div class="box">
      <p class="big-text" id="days">0</p>
      <span>days</span>
    </div>
    <div class="box">
      <p class="big-text" id="hours">0</p>
      <span>hours</span>
    </div>
    <div class="box">
      <p class="big-text" id="mins">0</p>
      <span>mins</span>
    </div>
    <div class="box">
      <p class="big-text" id="seconds">0</p>
      <span>seconds</span>
    </div>
  </div>

  <script src="./main.js"></script>
</body>
</html>

CSS Styling

The good and presentable user interface was done with CSS, I used a very nice font family which was gotten from google font , The name of the font family used is Laila. I also used CSS Flexbox for the body of the webpage and CSS Grid to make the alignment of the countdown timer boxes look nice and user friendly across all platforms (Desktop, Tablet and Mobile). The background Image was also gotten from pexel.com. Here is the code snippet.

@import url('https://fonts.googleapis.com/css2?family=Laila:wght@400;600&display=swap');

* {
  box-sizing: border-box;
}

body {
  background: url(./bg.jpg) no-repeat center center/cover;
  min-height: 100vh;
  font-family: 'Laila', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

h1 {
  font-weight: bold;
  font-size: 40px;
  margin-top: 5rem;
}

.countdown-container {
  display: grid;
  grid-template-columns: repeat(4, 2fr);
  text-align: center;
}

.box {
  border: 1px solid #ccc;
  margin: 10px;
  background-color: white;
  color: black;
  border-radius: 7px;
  box-shadow: 5px 5px 30px 10px rgba(0, 0, 0, 0.08);
  min-width: 180px;

}

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

.box span {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 40px;
  }

  .countdown-container {
    grid-template-columns: repeat(2, 2fr);
    grid-gap: 10px;
  }

  .box {
    padding: 20px;
  }

  .big-text {
    font-size: 55px;
  }

  .box span {
    font-size: 1.2rem;
  }
}

@media (max-width: 425px) {
  body {
    margin: auto;
    max-width: 60%;
  }

  h1 {
    font-size: 22px;
    font-weight: bold;
  }

  .box {
    padding: 13px;
  }

  .big-text {
    font-size: 35px;
  }
}

@media (max-width: 375px) {
  h1 {
    margin-top: 20px;
    font-size: 18px;
  }

  .countdown-container {
    grid-template-columns: repeat(1, 2fr);
  }

  .box {
    margin: 2px;
  }
}

@media (max-width: 320px) {
  h1 {
    margin-top: 30px;
    font-size: 10px;
  }

  .big-text {
    font-size: 2.0rem;
  }

  .box span {
    font-size: 1.0rem;
  }
}

Now let's go on to the main brain behind this web app which is the JavaScript code that makes it very functional and active;

JavaScript Functionality

The Process of what I did on the JavaScript code will be explained in five steps;

Getting the input boxes: In order to have access to the boxes where the time will go into, In the JavaScript code I used the document method to get the box. Remember that the purpose of doing this is to be able to insert our time into the box after calculating it.

// Get all inputs from html
const daysCount = document.getElementById("days");
const hoursCount = document.getElementById("hours");
const minutesCount = document.getElementById("mins");
const secondsCount = document.getElementById("seconds");

Getting the end date or the day the timer will end: The next step is to get the end date of the timer and in this case it is January 1st 2022. There are generally 3 types of JavaScript date input formats: and they are; ISO Date: "2015-03-25" (The International Standard); , Short Date: "03/25/2015" , Long Date: "Mar 25 2015" or "25 Mar 2015" , In this project I used the long date format and after that we can now move to calculating the number of days, hours, minutes and seconds left.

// Get the End Date
const endDate = "Jan 1 2022";

Calculating the number of days, hours, minutes and seconds and inserting it in the input boxes: To calculate the number of Days, Hours, Minutes and Seconds left, you will need to first get the time out of the date by using the .getTime() method and then finding the interval between the current date and the ending date time, and that can be gotten by subtracting the current date time from the end date time. Then I used a math method called floor to calculate the time remaining in days, hours, minutes and seconds. This math can be done by dividing the interval and doing the modulus and the interval with the values as shown in the code. And the essence of dividing by these values is to convert it from the default form of the time to the usable form. After getting the days, hours, minutes and seconds left then we can now insert it into the input box by using the JavaScript method called .innerHTML.

This is the code snippet for calculating the time and inserting it into the input boxl;

const challengeCountDown = () => {
  const challengeEndDate = new Date(endDate).getTime(); // End Date
  const currentDate = new Date().getTime(); // Current Date

  const remainingInterval = challengeEndDate - currentDate;

  const days = Math.floor(remainingInterval / (1000 * 3600 * 24));

  const hours = Math.floor((remainingInterval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 

  const minutes = Math.floor((remainingInterval % (1000 * 60 * 60)) / (1000 * 60)); 

  const seconds = Math.floor((remainingInterval % (1000 * 60)) / 1000);

  daysCount.innerHTML = days;
  hoursCount.innerHTML = formatTime(hours);
  minutesCount.innerHTML = formatTime(minutes);
  secondsCount.innerHTML = formatTime(seconds);
};

Formatting the time and adding zero if it is below 10: After inserting it into the input box, we now have our timer working fine but to make it more presentable we can make it add a dynamic 0 at the beginning of a number if it is below 10.

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

Making the timer count every seconds: To make this timer count every seconds then we have to set an interval using the setInterval() method in JavaScript and set it to 1000.

// Making it display every seconds
setInterval(() => {
  challengeCountDown();
}, 1000);

Conclusion

With all these done, our Countdown Timer is ready. The purpose of this countdown timer is to set a time frame between a start date and the date of deadline. You can get the source code of this website here and the hosted link on netlify by clicking here.

Thanks for reading through...

Building a Countdown Timer with HTML,CSS and Vanilla JavaScript

HTML Structure

CSS Styling

JavaScript Functionality

Conclusion