The Palos Publishing Company

Categories We Write About

Build a real-time countdown for project deadlines

Written by

Bernardo Palos

in

To build a real-time countdown for project deadlines, you can use a combination of HTML, CSS, and JavaScript. This simple solution will display the remaining time until a specified deadline, updating in real time. Below is the code that achieves this:

HTML (for structure)

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

    <div class="countdown-container">
        <h1>Project Deadline Countdown</h1>
        <div id="countdown">
            <div id="days"></div>
            <div id="hours"></div>
            <div id="minutes"></div>
            <div id="seconds"></div>
        </div>
    </div>

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

CSS (for styling)

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

.countdown-container {
    text-align: center;
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 2rem;
    font-weight: bold;
}

#countdown div {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
}

h1 {
    margin-bottom: 20px;
    color: #333;
}

JavaScript (for countdown functionality)

javascript
// Set the deadline (example: December 31, 2025 at 23:59:59)
const deadline = new Date("Dec 31, 2025 23:59:59").getTime();

// Update the countdown every second
const countdownFunction = setInterval(function() {
    const now = new Date().getTime();
    const timeLeft = deadline - now;

    if (timeLeft <= 0) {
        clearInterval(countdownFunction);  // Stop the countdown once the deadline is reached
        document.getElementById("countdown").innerHTML = "<h2>Deadline Reached!</h2>";
        return;
    }

    // Calculate the time remaining
    const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

    // Display the result in the respective divs
    document.getElementById("days").innerHTML = `${days}d`;
    document.getElementById("hours").innerHTML = `${hours}h`;
    document.getElementById("minutes").innerHTML = `${minutes}m`;
    document.getElementById("seconds").innerHTML = `${seconds}s`;
}, 1000);

How it works:

  1. HTML: Contains the structure for the countdown display, including a container for days, hours, minutes, and seconds.

  2. CSS: Provides styling to make the countdown look clean and visually appealing.

  3. JavaScript: Sets a deadline (you can customize this by changing the date), calculates the remaining time every second, and updates the countdown in real-time. Once the deadline is reached, it will show “Deadline Reached!”

Customization:

  • You can adjust the deadline date in the deadline variable to match your specific project deadline.

  • The countdown updates in real time and shows the remaining days, hours, minutes, and seconds.

This setup works on any modern browser and provides a live countdown for your project deadlines.

Share This Page:

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

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About