Creating a responsive countdown timer using HTML, CSS, and JavaScript

Creating a countdown timer is a popular feature in many websites and applications. Whether it's for an upcoming event or a limited-time offer, a countdown timer adds an element of urgency that can drive user engagement and conversions. In this tutorial, we'll learn how to create a responsive countdown timer using HTML, CSS, and JavaScript.

Prerequisites

Before we start, you should have a basic understanding of HTML, CSS, and JavaScript. We'll be using these three technologies to create our countdown timer. Additionally, you'll need a text editor to write and save your code. You can use any text editor of your choice, but we recommend using Visual Studio Code.

Step 1: HTML Structure

Let's start by creating the basic HTML structure for our countdown timer. We'll create a container div and two inner divs for the timer and the message.

<div class="countdown-container">
  <div class="timer">
    <div class="days">00</div>
    <div class="hours">00</div>
    <div class="minutes">00</div>
    <div class="seconds">00</div>
  </div>
  <div class="message">
    <p>Countdown to Event</p>
  </div>
</div>

In the above code, we've created a container div with a class of "countdown-container". Within this container, we have two inner divs. The first one has a class of "timer", and it contains four inner divs for displaying the days, hours, minutes, and seconds of the countdown. The second div has a class of "message", and it contains a message that will be displayed above the countdown.

Step 2: CSS Styling

Now, let's add some CSS styles to our HTML structure to make it look better. We'll also make it responsive so that it can adapt to different screen sizes.

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin-right: 20px;
}

.timer > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}

.timer > div:last-child {
  margin-right: 0;
}

.timer > div > span {
  font-size: 30px;
  font-weight: bold;
  color: #333;
}

.message {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .countdown-container {
    flex-direction: column;
  }

  .timer {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

In the above code, we've added styles to our HTML structure to create a visually appealing countdown timer. We've used flexbox to center and align the timer and message divs within the container. We've also added some padding, border-radius, and box-shadow to the timer div to make it stand out. We've used media queries to make the countdown timer responsive so that it can adapt to different screen sizes.

Step 3: JavaScript Code

Now that we've created the HTML and CSS, it's time to add the JavaScript code to create the countdown timer functionality. We'll use JavaScript to calculate the remaining time and update the timer every second.

const countdown = () => {
  const targetDate = new Date("2023-03-31T12:00:00").getTime();
  const now = new Date().getTime();
  const remainingTime = targetDate - now;

  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor(
    (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
  );
  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  document.querySelector(".days").textContent = days < 10 ? "0" + days : days;
  document.querySelector(".hours").textContent =
    hours < 10 ? "0" + hours : hours;
  document.querySelector(".minutes").textContent =
    minutes < 10 ? "0" + minutes : minutes;
  document.querySelector(".seconds").textContent =
    seconds < 10 ? "0" + seconds : seconds;
};

setInterval(countdown, 1000);

In the above code, we've created a function called "countdown" that calculates the remaining time between the current time and the target date (March 31, 2023, at 12:00:00). We've then calculated the number of days, hours, minutes, and seconds remaining and updated the corresponding divs in the HTML using the "textContent" property.

We've used the "setInterval" method to call the "countdown" function every second and update the countdown timer.

Conclusion

In this tutorial, we've learned how to create a responsive countdown timer using HTML, CSS, and JavaScript. We've created a visually appealing timer that adapts to different screen sizes and updates every second. You can customize this timer by changing the target date and the message. You can also add more styles to make it fit your website's design.