Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/pomodoro.md Secret

Created August 28, 2024 21:30
Show Gist options
  • Save simonw/34eb6f6a6338c0e81308912b9ec2ffbc to your computer and use it in GitHub Desktop.
Save simonw/34eb6f6a6338c0e81308912b9ec2ffbc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pomodoro.md

Pomodoro Timer App

human (Aug 28, 2024, 02:27 PM)

Build me a pomodoro timer app, make it pretty, javascript and HTML no react

assistant (Aug 28, 2024, 02:27 PM)

Certainly! I'll create a simple and attractive Pomodoro timer app using HTML, CSS, and JavaScript. Here's the code for a basic Pomodoro timer with a clean, modern design:

Pomodoro Timer App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        #timer {
            font-size: 4rem;
            margin-bottom: 1rem;
        }
        button {
            font-size: 1rem;
            padding: 0.5rem 1rem;
            margin: 0 0.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #startBtn {
            background-color: #4CAF50;
            color: white;
        }
        #startBtn:hover {
            background-color: #45a049;
        }
        #resetBtn {
            background-color: #f44336;
            color: white;
        }
        #resetBtn:hover {
            background-color: #da190b;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Pomodoro Timer</h1>
        <div id="timer">25:00</div>
        <button id="startBtn">Start</button>
        <button id="resetBtn">Reset</button>
    </div>

    <script>
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');

        let timer;
        let timeLeft = 25 * 60; // 25 minutes in seconds
        let isRunning = false;

        function updateDisplay() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }

        function startTimer() {
            if (!isRunning) {
                isRunning = true;
                startBtn.textContent = 'Pause';
                timer = setInterval(() => {
                    timeLeft--;
                    updateDisplay();
                    if (timeLeft === 0) {
                        clearInterval(timer);
                        isRunning = false;
                        startBtn.textContent = 'Start';
                        alert('Pomodoro session complete!');
                    }
                }, 1000);
            } else {
                clearInterval(timer);
                isRunning = false;
                startBtn.textContent = 'Resume';
            }
        }

        function resetTimer() {
            clearInterval(timer);
            isRunning = false;
            timeLeft = 25 * 60;
            updateDisplay();
            startBtn.textContent = 'Start';
        }

        startBtn.addEventListener('click', startTimer);
        resetBtn.addEventListener('click', resetTimer);

        updateDisplay();
    </script>
</body>
</html>

This Pomodoro timer app includes the following features:

  1. A clean, modern design with a white container on a light gray background.
  2. A large timer display showing minutes and seconds.
  3. Start/Pause and Reset buttons with hover effects.
  4. The ability to start, pause, resume, and reset the timer.
  5. An alert when the Pomodoro session is complete.

To use this app, you can copy the entire HTML code into a new file with a .html extension and open it in a web browser. The timer is set for a 25-minute Pomodoro session by default.

Here's a brief explanation of how the app works:

  1. The HTML structure defines the layout of the app.
  2. CSS styles are used to create an attractive and responsive design.
  3. JavaScript handles the timer functionality:
    • The startTimer function begins or pauses the countdown.
    • The resetTimer function resets the timer to 25 minutes.
    • The updateDisplay function updates the timer display every second.

You can easily customize this app by adjusting the CSS styles or modifying the JavaScript to change the timer duration or add additional features.

Would you like me to explain any part of the code in more detail or suggest any improvements?

human (Aug 28, 2024, 02:29 PM)

add a dropdown for picking between 5m 10m 15m 20m 25m 30m 45m 60m

assistant (Aug 28, 2024, 02:29 PM)

Certainly! I'll add a dropdown menu to allow users to select different timer durations. I'll update the HTML, CSS, and JavaScript to accommodate this new feature.

Pomodoro Timer App with Duration Selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        #timer {
            font-size: 4rem;
            margin-bottom: 1rem;
        }
        button, select {
            font-size: 1rem;
            padding: 0.5rem 1rem;
            margin: 0.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #startBtn {
            background-color: #4CAF50;
            color: white;
        }
        #startBtn:hover {
            background-color: #45a049;
        }
        #resetBtn {
            background-color: #f44336;
            color: white;
        }
        #resetBtn:hover {
            background-color: #da190b;
        }
        select {
            background-color: #3498db;
            color: white;
        }
        select:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Pomodoro Timer</h1>
        <div id="timer">25:00</div>
        <select id="durationSelect">
            <option value="5">5 minutes</option>
            <option value="10">10 minutes</option>
            <option value="15">15 minutes</option>
            <option value="20">20 minutes</option>
            <option value="25" selected>25 minutes</option>
            <option value="30">30 minutes</option>
            <option value="45">45 minutes</option>
            <option value="60">60 minutes</option>
        </select>
        <br>
        <button id="startBtn">Start</button>
        <button id="resetBtn">Reset</button>
    </div>

    <script>
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const durationSelect = document.getElementById('durationSelect');

        let timer;
        let timeLeft = 25 * 60; // Default to 25 minutes in seconds
        let isRunning = false;

        function updateDisplay() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }

        function startTimer() {
            if (!isRunning) {
                isRunning = true;
                startBtn.textContent = 'Pause';
                durationSelect.disabled = true;
                timer = setInterval(() => {
                    timeLeft--;
                    updateDisplay();
                    if (timeLeft === 0) {
                        clearInterval(timer);
                        isRunning = false;
                        startBtn.textContent = 'Start';
                        durationSelect.disabled = false;
                        alert('Pomodoro session complete!');
                    }
                }, 1000);
            } else {
                clearInterval(timer);
                isRunning = false;
                startBtn.textContent = 'Resume';
            }
        }

        function resetTimer() {
            clearInterval(timer);
            isRunning = false;
            timeLeft = parseInt(durationSelect.value) * 60;
            updateDisplay();
            startBtn.textContent = 'Start';
            durationSelect.disabled = false;
        }

        function changeDuration() {
            if (!isRunning) {
                timeLeft = parseInt(durationSelect.value) * 60;
                updateDisplay();
            }
        }

        startBtn.addEventListener('click', startTimer);
        resetBtn.addEventListener('click', resetTimer);
        durationSelect.addEventListener('change', changeDuration);

        updateDisplay();
    </script>
</body>
</html>

I've updated the Pomodoro Timer app to include a dropdown menu for selecting different timer durations. Here are the main changes:

  1. Added a <select> element in the HTML with options for 5, 10, 15, 20, 25, 30, 45, and 60 minutes.
  2. Updated the CSS to style the new dropdown menu.
  3. Modified the JavaScript to handle the new duration selection feature:
    • Added a changeDuration function that updates the timer when a new duration is selected.
    • Updated the resetTimer function to use the selected duration.
    • Disabled the duration select when the timer is running and re-enabled it when the timer is reset or completes.

Here's a brief explanation of the new features:

  1. The dropdown menu allows users to select a timer duration from 5 to 60 minutes.
  2. When the timer is not running, changing the duration immediately updates the display.
  3. The selected duration is used when starting a new timer or resetting the current one.
  4. The dropdown is disabled while the timer is running to prevent changes during an active session.

To use this updated app, you can copy the entire HTML code into a new file with a .html extension and open it in a web browser. Users can now select their desired Pomodoro session length before starting the timer.

Would you like me to explain any part of the code in more detail or suggest any further improvements?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment