Build Anticipation: Create a Countdown Timer Landing Page with HTML, CSS, and JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2023-07-13 23:00:00

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 👇🏽

```html
<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 👇🏽


![html output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dutcg57d1y6ey4iai2sn.png)

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 👇🏽

```css
@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 👇🏽

![css output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7oydhna7xlwqin4owuw.png)

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 👇🏽

```jsx
// 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](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeHpsdTd5am5zNmcwdjNpc2twYjNtOXY3a2FremtscmNyMHp3ZWpsOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3w0cipSFAksESVdsRv/giphy.gif)

## 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 😉