The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a vacation countdown app

Written by

Bernardo Palos

in

Creating a simple vacation countdown app can be a fun and useful project! I’ll guide you through building a basic countdown timer for your vacation. This example will use HTML, CSS, and JavaScript.

1. HTML Structure:

We’ll need a basic structure with a section to display the countdown and an input field to set the vacation date.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vacation Countdown</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Vacation Countdown</h1>
    <input type="date" id="vacationDate" />
    <button onclick="startCountdown()">Start Countdown</button>
    <div id="countdown">
      <h2>Time left until your vacation:</h2>
      <div id="timer">
        <span id="days"></span> days 
        <span id="hours"></span> hours 
        <span id="minutes"></span> minutes 
        <span id="seconds"></span> seconds
      </div>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

2. CSS (style.css):

Now, let’s style the page to make it visually appealing.

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

body {
  font-family: Arial, sans-serif;
  background-color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  text-align: center;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
}

input {
  padding: 10px;
  font-size: 16px;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #008cba;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #007b8f;
}

#countdown {
  margin-top: 20px;
}

#timer {
  font-size: 30px;
  color: #008cba;
  font-weight: bold;
}

3. JavaScript (script.js):

We will write the JavaScript to calculate the difference between the current date and the selected vacation date, updating the countdown in real-time.

javascript
function startCountdown() {
  const vacationDate = document.getElementById("vacationDate").value;
  
  if (!vacationDate) {
    alert("Please select a vacation date.");
    return;
  }

  const vacationTime = new Date(vacationDate).getTime();

  const interval = setInterval(function() {
    const currentTime = new Date().getTime();
    const timeDifference = vacationTime - currentTime;

    if (timeDifference <= 0) {
      clearInterval(interval);
      document.getElementById("timer").innerHTML = "Enjoy your vacation!";
    } else {
      const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

      document.getElementById("days").textContent = days;
      document.getElementById("hours").textContent = hours;
      document.getElementById("minutes").textContent = minutes;
      document.getElementById("seconds").textContent = seconds;
    }
  }, 1000);
}

Explanation:

  • HTML: Basic structure for the app, with an input field to select the vacation date, a button to start the countdown, and a section to display the countdown.

  • CSS: Simple styles to make the page look nice and easy to read.

  • JavaScript:

    • When the user clicks the button, the startCountdown() function is triggered.

    • It calculates the difference between the current date and the selected vacation date.

    • The countdown updates every second using setInterval(), and when the vacation date is reached, it stops the timer and displays “Enjoy your vacation!”

How to Run:

  1. Create the HTML, CSS, and JavaScript files (e.g., index.html, style.css, script.js).

  2. Open the index.html file in a web browser.

  3. Select a vacation date and press the “Start Countdown” button to see the timer in action!

Let me know if you want to add any other features or need help tweaking this app!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About