Build Anticipation: Create a Countdown Timer Landing Page with HTML, CSS, and JavaScript

Countdown timers are a great way to create anticipation and excitement for upcoming events. In this tutorial, we will walk you through the process of building a simple countdown timer landing page using HTML, CSS, and JavaScript. We will create a visually appealing layout with a countdown displaying the remaining days, hours, minutes, and seconds until the release of the highly anticipated Aquaman movie in December. Let’s dive right in 😉

🧰 Perquisites

• Basic knowledge of HTML and CSS.
• Fundamental knowledge of JavaScript (I will still explain everything).

🏚️ HTML CODE

The HTML code defines the structure of our countdown timer landing page. Take a look at the code 👇🏽

<div class="countdown-container">
  <h1>coming soon!</h1>

  <div class="countdown">
    <!-- day -->
    <div class="day-container">
      <h2 class="day">17</h2>
      <p>Days</p>
    </div>

    <!-- hours -->
    <div class="hour-container">
      <h2 class="hour">20</h2>
      <p>Hours</p>
    </div>

    <!-- minutes -->
    <div class="minute-container">
      <h2 class="minute">10</h2>
      <p>Minutes</p>
    </div>

    <!-- seconds -->
    <div class="second-container">
      <h2 class="second">15</h2>
      <p>Seconds</p>
    </div>
  </div>
</div>

In the above HTML code, we have a container div with the class "countdown-container" that wraps our countdown timer. Inside the container, we have an h1 element displaying the text "coming soon!". The countdown itself is enclosed within a div with the class "countdown". It consists of four separate divs representing days, hours, minutes, and seconds, each having their respective container div with a class and a nested h2 element to display the countdown value, and a p element for the unit label.

💡 We are going to be changing the numbers dynamically when we get to the JavaScript. But it’s just there for now so that we can style it.

Let’s see what we have so far 👇🏽

Looks ugly right? 😅. Let’s add some styling to it

🏡 CSS CODE

To make our countdown timer visually appealing, we will apply some CSS styles to the HTML elements. Here's the CSS code 👇🏽

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

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #030200;
  color: #fff;
  height: 100vh;
  width: 100%;
  background-image: url('https://res.cloudinary.com/dj9m3f8ux/image/upload/v1688534741/Aquaman-6_heeq9b.jpg');
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  color: white;
}

h1 {
  background: linear-gradient(to right, #ffd900, #ff2f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.5rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 4rem;
  margin-left: 2rem;
}

.countdown h2 {
  font-size: 2rem;
  background: linear-gradient(to right, #ffd900, #ff2f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
  .countdown-container {
    margin-left: 4rem;
  }
}

The CSS code above contains various styling rules to customize the appearance of our countdown timer landing page. Let's break it down 👇🏽

• The * selector sets padding, margin, and box-sizing properties to 0 for all elements on the page. This ensures consistent spacing and box model behavior.

• The body selector specifies styles for the body element, including the font-family, background-color, text color, height, width, and background-image. We set the background image to a visually appealing Aquaman movie poster using the URL provided.

• The .countdown-container selector styles the countdown container. We make it a flex container with a column direction, aligning items to the flex-start, and justifying content to the center. The height is set to 100% to make it fill the entire viewport, and the text color is white.

• The h1 selector styles the heading element. We apply a linear gradient background color to the text, making it eye-catching. The text is transformed to uppercase, aligned center, and given a larger font size, weight, and letter spacing. Margins are adjusted to create spacing from surrounding elements.

• The .countdown selector styles the parent divs in it. We make it a flex container with centered alignment and justify content. The text is centered within the countdown elements, and a gap of 4rem is added between them. A left margin of 2rem provides additional spacing.

• The .countdown h2 selector styles the countdown elements. We apply a linear gradient background color to the text, similar to the heading. The text color is transparent to reveal the background gradient.

Additionally, a media query is used to adjust the layout on larger screens. When the minimum width of the viewport reaches 768px, the left margin of the countdown container is increased to 4rem, providing more spacing.

Let’s see how our output looks 👇🏽

I thinks it looks more better now.

🏗️ JAVASCRIPT CODE

Now, let's move on to the JavaScript code responsible for the countdown functionality. Here's the code 👇🏽

// Define the countdown function
const countDown = () => {
  // Set the release date for the Aquaman movie
  const releaseDate = new Date('December 20, 2023 00:00:00').getTime();

  // Get the current date and time
  const presentDate = new Date().getTime();

  // Calculate the remaining time until the release
  const gap = releaseDate - presentDate;

  // Define constants for time units in milliseconds
  const second = 1000;
  const minute = 60 * second;
  const hour = 60 * minute;
  const day = 24 * hour;

  // Calculate the remaining days, hours, minutes, and seconds
  const dayText = Math.floor(gap / day);
  let hourText = Math.floor((gap % day) / hour);
  const minuteText = Math.floor((gap % hour) / minute);
  const secondText = Math.floor((gap % minute) / second);

  // Add leading zero to hours if less than 10
  if (hourText < 10) {
    hourText = '0' + hourText;
  }

  // Update the HTML elements with the countdown values
  document.querySelector('.day').textContent = dayText;
  document.querySelector('.hour').textContent = hourText;
  document.querySelector('.minute').textContent = minuteText;
  document.querySelector('.second').textContent = secondText;
};

// Call the countdown function initially to display the countdown values
countDown();

// Set up a recurring timer to update the countdown every second
setInterval(countDown, 1000);

The JavaScript code above handles the countdown functionality for our timer. Let's break it down step by step 👇🏽

• const countDown = () => { ... }

  • This line defines a function called countDown. The function is responsible for calculating and updating the countdown values.

• const releaseDate = new Date('December 20, 2023 00:00:00').getTime();:

  • We define the release date for the Aquaman movie as a JavaScript Date object. The getTime() method is used to get the release date in milliseconds. if you do not add the getTime() you’ll get something like this 👇🏽

  Wed Jul 05 2023 07:31:11 GMT+0100 (West Africa Standard Time)

• const presentDate = new Date().getTime();

  • Here, we obtain the current date and time using the Date object and getTime() method, just like we did for the release date.

• const gap = releaseDate - presentDate;

  • We calculate the difference between the release date and the present date, resulting in the time remaining until the release in milliseconds.

• const second = 1000;, const minute = 60 * second;, const hour = 60 * minute;, const day = 24 * hour;:

  • These lines define constants for various time units in milliseconds. We use these constants to convert the remaining time in milliseconds to days, hours, minutes, and seconds.

• const dayText = Math.floor(gap / day);

  • We calculate the number of remaining days by dividing the gap (remaining time) by the number of milliseconds in a day. The Math.floor() function is used to round down the result to the nearest whole number.

• let hourText = Math.floor((gap % day) / hour);

  • We calculate the number of remaining hours by using the modulus operator % to find the remaining milliseconds after removing the days (gap % day). Then we divide this value by the number of milliseconds in an hour. The result is rounded down to the nearest whole number.

• const minuteText = Math.floor((gap % hour) / minute); and const secondText = Math.floor((gap % minute) / second);

  • These lines calculate the number of remaining minutes and seconds, following a similar approach to step 7.

• if (hourText < 10) { hourText = '0' + hourText; } else { hourText; }

  • This conditional statement checks if the hourText is less than 10. If it is, we add a leading zero to the value to ensure consistent formatting. Otherwise, we leave the value unchanged.

• Updating the HTML 👇

• The next four lines use document.querySelector to select the HTML elements with the respective class names (e.g., .day, .hour) and update their textContent property with the calculated values.

• setInterval(countDown, 1000);:

• This line sets up a recurring timer using the setInterval function. It calls the countDown function every 1000 milliseconds (1 second) to continuously update the countdown values.

• countDown();:

• Finally, we call the countDown function once initially to immediately display the countdown values when the page loads.

Here is the final output 👇🏽

Final code

Conclusion

Congratulations 🎉 🎉! You have successfully built a countdown timer landing page using HTML, CSS, and JavaScript. Feel free to customize the styles and adapt the functionality to suit your needs. Let me know if you have any question. Till next week guys 😉