create account

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

View this thread on: hive.blogpeakd.comecency.com
· @snippets ·
$2.17
HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write
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](https://files.peakd.com/file/peakd-hive/snippets/23tHb6kpkvmx2Rr4WWrQa4xfYkRotR7R1BiR8czznaidaeYK1PMA3RN8ExVc2kyN4vEZD.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>


```
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 148 others
properties (23)
authorsnippets
permlinkhtml-css-javsscript-adjustable-countdown-timer-to-keep-time-as-you-write
categoryhive-169321
json_metadata{"app":"peakd/2023.10.1","format":"markdown","tags":["programming","development","leofinance","writing","apps","hive"],"users":[],"image":["https://files.peakd.com/file/peakd-hive/snippets/23tHb6kpkvmx2Rr4WWrQa4xfYkRotR7R1BiR8czznaidaeYK1PMA3RN8ExVc2kyN4vEZD.png"]}
created2023-10-28 03:40:42
last_update2023-10-28 03:40:42
depth0
children4
last_payout2023-11-04 03:40:42
cashout_time1969-12-31 23:59:59
total_payout_value1.090 HBD
curator_payout_value1.077 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,842
author_reputation801,725,525,485
root_title"HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write"
beneficiaries
0.
accounthive-169321
weight200
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id128,365,739
net_rshares4,727,693,566,476
author_curate_reward""
vote details (212)
@kushyzee ·
$0.08
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 😁 
👍  
properties (23)
authorkushyzee
permlinkre-snippets-20231029t6297882z
categoryhive-169321
json_metadata{"type":"comment","tags":["hive-169321","programming","development","leofinance","writing","apps","hive"],"app":"ecency/3.0.44-mobile","format":"markdown+html"}
created2023-10-29 05:29:09
last_update2023-10-29 05:29:09
depth1
children0
last_payout2023-11-05 05:29:09
cashout_time1969-12-31 23:59:59
total_payout_value0.042 HBD
curator_payout_value0.042 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length345
author_reputation91,879,023,731,471
root_title"HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id128,393,020
net_rshares185,182,167,318
author_curate_reward""
vote details (1)
@stemsocial ·
$0.08
re-snippets-html-css-javsscript-adjustable-countdown-timer-to-keep-time-as-you-write-20231028t205248432z
<div class='text-justify'> <div class='pull-left'>
 <img src='https://stem.openhive.network/images/stemsocialsupport7.png'> </div>

Thanks for your contribution to the <a href='/trending/hive-196387'>STEMsocial community</a>. Feel free to join us on <a href='https://discord.gg/9c7pKVD'>discord</a> 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.&nbsp;<br />&nbsp;<br />
</div>
👍  
properties (23)
authorstemsocial
permlinkre-snippets-html-css-javsscript-adjustable-countdown-timer-to-keep-time-as-you-write-20231028t205248432z
categoryhive-169321
json_metadata{"app":"STEMsocial"}
created2023-10-28 20:52:48
last_update2023-10-28 20:52:48
depth1
children0
last_payout2023-11-04 20:52:48
cashout_time1969-12-31 23:59:59
total_payout_value0.039 HBD
curator_payout_value0.039 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length565
author_reputation22,918,229,493,305
root_title"HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id128,383,179
net_rshares168,176,502,666
author_curate_reward""
vote details (1)
@timix648 ·
$0.09
> 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.
👍  
properties (23)
authortimix648
permlinkre-snippets-s38d4t
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2023.10.1"}
created2023-10-28 08:34:09
last_update2023-10-28 08:34:09
depth1
children1
last_payout2023-11-04 08:34:09
cashout_time1969-12-31 23:59:59
total_payout_value0.044 HBD
curator_payout_value0.043 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length208
author_reputation25,155,469,453,344
root_title"HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id128,369,902
net_rshares190,524,896,130
author_curate_reward""
vote details (1)
@cryptothesis · (edited)
$0.23
It is indeed a great tool!
👍  ,
properties (23)
authorcryptothesis
permlinkre-timix648-20231028t18316305z
categoryhive-169321
json_metadata{"type":"comment","tags":["hive-169321"],"app":"ecency/3.0.44-mobile","format":"markdown+html"}
created2023-10-28 10:31:09
last_update2023-10-28 12:18:06
depth2
children0
last_payout2023-11-04 10:31:09
cashout_time1969-12-31 23:59:59
total_payout_value0.114 HBD
curator_payout_value0.113 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length26
author_reputation122,512,281,618,098
root_title"HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id128,371,693
net_rshares492,276,500,851
author_curate_reward""
vote details (2)