Heartfelt Timer App with HTML/CSS/JS Only!🔥

This content originally appeared on DEV Community and was authored by Programming with Shahan

Hey there! 👋

It’s made of glass and has a smooth bluish background.

It’s very simple and SUPER fun to make, even if you’re just starting out with coding!

Ready? Let’s get started! 🏊‍♂️

🧱 HTML

Our HTML code is the blueprint of a house.

It tells the browser what parts to include, like input boxes for minutes and seconds, and buttons for controlling the timer.

<!DOCTYPE html>
<html>
<head>
    <title>Beautiful Glass Timer App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="glass-container">
        <input type="number" id="minutesInput" placeholder="Minutes">
        <input type="number" id="secondsInput" placeholder="Seconds">
        <div class="button-container">
            <button class="glass-button" onclick="incrementTime('minutes', 1)">↑</button>
            <button class="glass-button" onclick="decrementTime('minutes', 1)">↓</button>
            <button class="glass-button" onclick="incrementTime('seconds', 1)">↑</button>
            <button class="glass-button" onclick="decrementTime('seconds', 1)">↓</button>
        </div>
        <button class="glass-button" onclick="startTimer()">Start</button>
        <button class="glass-button" onclick="stopTimer()">Stop</button>
        <button class="glass-button" onclick="resetTimer()">Reset</button>
        <div id="display">Time: 00:00</div>
    </div>

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

What’s Happening Here? 🤔

🔢 <input> tags: These are for entering the minutes and seconds.
🔼 Buttons: Each button has a job:
- 🚦Start: Starts the countdown.
- 🛑Stop: Pauses the countdown.
- 🧹Reset: Sets the time back to 00:00.
- ↑ and ↓: Increases or decreases the minutes and seconds.
⌛ <div> with id="display": This shows the time as it counts down. Think of it as the clock on a fancy timer.

🎨 CSS

CSS makes our timer app look stylish, like putting on a cool outfit! 👗

Here’s how we styled it to have a glassy, blue effect:

/* style.css */
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #87CEEB, #000); /* Blue to black background */
    color: #fff;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.glass-container {
    background: rgba(255, 255, 255, 0.1); /* Transparent white background for glass effect */
    padding: 20px 10px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37); /* Shadow for depth */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle border */
    width: 300px;
}

input[type="number"] {
    width: 90px;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    color: #000;
    text-align: center;
    transition: background 0.3s, box-shadow 0.3s;
}

input::placeholder {
    color: rgba(135, 206, 235, 0.7); /* Light blue placeholder */
}

.glass-button {
    padding: 10px 22px;
    border-radius: 10px;
    background: rgba(135, 206, 235, 0.2); /* Soft blue background */
    box-shadow: 0 4px 15px rgba(135, 206, 235, 0.5);
    border: none;
    color: #000;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
}

#display {
    font-size: 24px;
    background: rgba(0, 0, 0, 0.3); /* Dark background for contrast */
    padding: 10px;
    border-radius: 10px;
    color: #87CEEB; /* Sky blue text */
}

How Does this Magic Work? 🪄

🫗 Backgrounds: The linear gradient makes the background look like the sky fading into night. 🌌
🥃 Glass Effect: The backdrop-filter: blur makes the box look frosted, like a window on a cold morning. ❄️
🔘 Button Style: The buttons look like they’re made of glass with a soft shadow and rounded edges.

🧠 JavaScript

JavaScript gives life to our timer (making the buttons TAKE ACTION)! 🎬

// script.js
let countdown;

function startTimer() {
    const minutesInput = document.getElementById('minutesInput').value;
    const secondsInput = document.getElementById('secondsInput').value;

    let minutes = parseInt(minutesInput) || 0;
    let seconds = parseInt(secondsInput) || 0;
    let time = minutes * 60 + seconds;

    if (isNaN(time) || time <= 0) {
        alert('Please enter a positive number');
        return;
    }

    clearInterval(countdown); // Stop any previous timer

    countdown = setInterval(() => {
        let mins = Math.floor(time / 60);
        let secs = time % 60;
        document.getElementById('display').textContent = `Time: ${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;

        if (time <= 0) {
            clearInterval(countdown);
            document.getElementById('display').textContent = 'Time: 00:00 - Time’s up!';
        }

        time--;
    }, 1000);
}

function resetTimer() {
    clearInterval(countdown);
    document.getElementById('display').textContent = 'Time: 00:00';
}

function incrementTime(type, amount) {
    const input = document.getElementById(`${type}Input`);
    let value = parseInt(input.value) || 0;
    input.value = Math.max(value + amount, 0);
}

function decrementTime(type, amount) {
    incrementTime(type, -amount);
}

function stopTimer() {
    clearInterval(countdown); // Stop the interval
}

Breaking It Down 🧩

startTimer: Starts counting down from the time you set. If you put in 5 minutes, it converts it to 300 seconds and starts ticking down. ⏳
setInterval: This function counts down every second, like a stopwatch. 📅
resetTimer: Stops the timer and resets the display to 00:00.
incrementTime and decrementTime: Adds or subtracts time when you click the up or down buttons. Simple math! ➕➖
stopTimer: Pauses the timer when you press stop.

CONGRATULATIONS! 🎉

Now, you’ve got a stylish, fun-timer app that looks like it’s made of glass.

It’s perfect for timing anything, from reading to baking cookies! 🍪📖

Feel free to tweak it (change the colors, or add your own special touch!)

Thanks for the time to read this article. You can find me on 𝕏.

KEEP CRUSHING IT!👊

This content originally appeared on DEV Community and was authored by Programming with Shahan

Print Share Comment Cite Upload Translate Updates

APA

Programming with Shahan | Sciencx (2024-10-19T16:46:32+00:00) Heartfelt Timer App with HTML/CSS/JS Only!🔥. Retrieved from https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/

MLA

" » Heartfelt Timer App with HTML/CSS/JS Only!🔥." Programming with Shahan | Sciencx - Saturday October 19, 2024, https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/

HARVARD

Programming with Shahan | Sciencx Saturday October 19, 2024 » Heartfelt Timer App with HTML/CSS/JS Only!🔥., viewed ,<https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/>

VANCOUVER

Programming with Shahan | Sciencx - » Heartfelt Timer App with HTML/CSS/JS Only!🔥. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/

CHICAGO

" » Heartfelt Timer App with HTML/CSS/JS Only!🔥." Programming with Shahan | Sciencx - Accessed . https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/

IEEE

" » Heartfelt Timer App with HTML/CSS/JS Only!🔥." Programming with Shahan | Sciencx [Online]. Available: https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/. [Accessed: ]

rf:citation

» Heartfelt Timer App with HTML/CSS/JS Only!🔥 | Programming with Shahan | Sciencx | https://www.scien.cx/2024/10/19/heartfelt-timer-app-with-html-css-js-only%f0%9f%94%a5/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.