HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write

By snippets on 10/28/2023

Are you also spending too much in writing a post? I am, so I had to write a small webapp to help me keep time as I write.

Screenshot 2023-10-28 at 11.32.37 AM.png

In this webapp made using HTML, CSS, and JavsScript, I made an adjustable countdown timer which I can put a time limit to how long I should spend on my writing. Then I can start writing the post. More like drafting, so I don't need the markdown stuffs here. There is also a word count function since some communities are really sticky about word counts. Once I am done with writing, I will copy and paste to the Hive frontend.

Hopefully I will be able to keep to the time allocated and not waste too much time on each post.

Some attempt to save time is better than no attempt to save time.

Here are the codes. Just need to save the codes as a file with html extension. Open in any browser and you can use the tool.

P/S: Use at your own risk, of course!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adjustable Countdown Timer with Word Count</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #timerArea {
            background-color: #fff;
            padding: 20px 40px;
            margin-bottom: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        #textArea {
            width: 100%;
            max-width: 800px;
            height: 75vh;
            padding: 10px;
            font-size: 16px;
            border-radius: 8px;
            border: 1px solid #ccc;
            resize: vertical;
        }

        button {
            padding: 10px 15px;
            font-size: 16px;
            border: none;
            background-color: #007BFF;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 10px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        #timer {
            font-size: 20px;
            width: 150px;
            text-align: center;
            margin: 10px 0;
        }

        #wordArea {
            display: inline-block;
            margin-top: 15px;
        }

    </style>
</head>
<body>

<div id="timerArea">
    Time (h:mm:ss): 
    <input type="text" id="setTime" value="0:01:00">
    <br>
    Remaining Time: 
    <input type="text" id="timer" value="0:00:00" readonly>
    <br>
    <button onclick="startTimer()">Start</button>
    <button onclick="stopTimer()">Stop</button>
</div>

<textarea id="textArea" oninput="updateWordCount()"></textarea>
<div id="wordArea">
    Word Count: <span id="wordCount">0</span>
    <button onclick="copyText()">Copy Text</button>
</div>

<script>
    let timer = null;
    let hours = 0;
    let minutes = 0;
    let seconds = 0;

    function updateDisplay() {
        document.getElementById('timer').value = `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    function updateWordCount() {
        let text = document.getElementById('textArea').value;
        let words = text.split(/\s+/).filter(Boolean); 
        document.getElementById('wordCount').textContent = words.length;
    }

    function startTimer() {
        if (timer) return;

        let timeParts = document.getElementById('setTime').value.split(':');
        hours = parseInt(timeParts[0], 10);
        minutes = parseInt(timeParts[1], 10);
        seconds = parseInt(timeParts[2], 10);

        timer = setInterval(function() {
            if (seconds > 0) {
                seconds--;
            } else if (minutes > 0) {
                minutes--;
                seconds = 59;
            } else if (hours > 0) {
                hours--;
                minutes = 59;
                seconds = 59;
            } else {
                clearInterval(timer);
                timer = null;
                alert('Time is up!');
                return;
            }
            updateDisplay();
        }, 1000);
    }

    function stopTimer() {
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
    }

    function copyText() {
        const textArea = document.getElementById('textArea');
        textArea.select();
        document.execCommand('copy');
        alert('Text copied to clipboard!');
    }
</script>
</body>
</html>

Comments (3)

@timix648 10/28/2023

Here are the codes. Just need to save the codes as a file with html extension. Open in any browser and you can use the tool.

Hmm...thanks for this!! I believe it will actually help manage time judiciously.

@cryptothesis 10/28/2023

It is indeed a great tool!

@stemsocial 10/28/2023

Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.

@kushyzee 10/29/2023

I was reading the post from the start and I was thinking; "why no add a word count function as well" but I read further and saw that you indeed added it as well, a job well done! I believe this app will help to boost productivity. I will probably copy the source code and add more styling to it, although it has been a while I worked with CSS 😁