The Palos Publishing Company

Categories We Write About

Build a countdown app for personal goals

Written by

Bernardo Palos

in

Creating a countdown app for personal goals can be a fun and rewarding project. Below is a simple guide to building a countdown app using HTML, CSS, and JavaScript. This app can help you track personal goals, whether they’re related to work, fitness, or personal development.

Step-by-Step Guide

1. HTML Structure

First, let’s create the structure of the app using HTML.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Goal Countdown</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Countdown to Your Goal</h1>
        <div class="goal-card">
            <h2 id="goal-name">Your Goal Name</h2>
            <p>Time Remaining:</p>
            <div id="countdown"></div>
        </div>
        <form id="goal-form">
            <label for="goal-name-input">Goal Name:</label>
            <input type="text" id="goal-name-input" placeholder="Enter goal name" required>
            
            <label for="goal-date">Select your goal date:</label>
            <input type="datetime-local" id="goal-date" required>
            
            <button type="submit">Start Countdown</button>
        </form>
    </div>

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

2. CSS Styling

Now, let’s add some basic styling using CSS. Save the following code as styles.css.

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

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    text-align: center;
}

h1 {
    color: #333;
}

.goal-card {
    margin-bottom: 20px;
}

input[type="text"], input[type="datetime-local"] {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

#countdown {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 10px;
}

3. JavaScript Logic

Next, let’s add the JavaScript to handle the countdown functionality. Save the following code as script.js.

javascript
document.getElementById("goal-form").addEventListener("submit", function (event) {
    event.preventDefault(); // Prevent form submission

    // Get the goal name and the selected date
    const goalName = document.getElementById("goal-name-input").value;
    const goalDate = new Date(document.getElementById("goal-date").value).getTime();

    // Set the goal name in the UI
    document.getElementById("goal-name").innerText = goalName;

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

        // Calculate time components
        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 countdown
        document.getElementById("countdown").innerText =
            `${days}d ${hours}h ${minutes}m ${seconds}s`;

        // If the goal is reached, stop the countdown
        if (timeLeft <= 0) {
            clearInterval(countdownInterval);
            document.getElementById("countdown").innerText = "Goal Reached!";
        }
    }, 1000);
});

How It Works

  1. HTML:

    • The form allows you to input the goal’s name and the target date.

    • There’s a div to display the countdown timer and the goal’s name.

  2. CSS:

    • Simple styling for layout and responsiveness.

    • The container is centered on the screen with a white background and shadow to create a card-like appearance.

  3. JavaScript:

    • When the form is submitted, it retrieves the goal’s name and target date.

    • The countdown is calculated every second.

    • When the target date is reached, the countdown stops, and a “Goal Reached!” message is displayed.

How to Use It

  1. Open the HTML file in your browser.

  2. Enter your goal’s name and set a target date/time.

  3. The countdown will begin and update every second until the goal is reached.

Next Steps for Enhancement

You can improve the app by adding the following features:

  • Multiple Goals: Allow users to track multiple goals at once.

  • Notifications: Add push notifications when the goal time is close or when it’s reached.

  • Custom Styling: Personalize the design to suit your preferences, like adding background images or animations.

  • Progress Tracking: Add a progress bar for goals that span over a period, such as workout goals.

This is a great start to building your personal goal countdown app! Would you like any specific features added, or would you like help with deploying it?

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