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.  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> ```
author | snippets | ||||||
---|---|---|---|---|---|---|---|
permlink | html-css-javsscript-adjustable-countdown-timer-to-keep-time-as-you-write | ||||||
category | hive-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"]} | ||||||
created | 2023-10-28 03:40:42 | ||||||
last_update | 2023-10-28 03:40:42 | ||||||
depth | 0 | ||||||
children | 4 | ||||||
last_payout | 2023-11-04 03:40:42 | ||||||
cashout_time | 1969-12-31 23:59:59 | ||||||
total_payout_value | 1.090 HBD | ||||||
curator_payout_value | 1.077 HBD | ||||||
pending_payout_value | 0.000 HBD | ||||||
promoted | 0.000 HBD | ||||||
body_length | 4,842 | ||||||
author_reputation | 801,725,525,485 | ||||||
root_title | "HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write" | ||||||
beneficiaries |
| ||||||
max_accepted_payout | 1,000,000.000 HBD | ||||||
percent_hbd | 0 | ||||||
post_id | 128,365,739 | ||||||
net_rshares | 4,727,693,566,476 | ||||||
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
kevinwong | 0 | 3,041,096,719 | 0.4% | ||
eric-boucher | 0 | 2,119,876,848 | 0.4% | ||
thecryptodrive | 0 | 9,446,952,391 | 0.16% | ||
roelandp | 0 | 30,938,184,230 | 5% | ||
cloh76 | 0 | 533,126,887 | 0.4% | ||
lordvader | 0 | 5,586,573,502 | 0.8% | ||
lemouth | 0 | 271,935,065,918 | 10% | ||
netaterra | 0 | 6,538,977,282 | 0.4% | ||
lamouthe | 0 | 747,902,557 | 10% | ||
tfeldman | 0 | 733,344,446 | 0.4% | ||
mcsvi | 0 | 131,747,972,941 | 50% | ||
cnfund | 0 | 1,645,619,703 | 0.8% | ||
boxcarblue | 0 | 1,816,231,210 | 0.4% | ||
justyy | 0 | 4,603,087,044 | 0.8% | ||
curie | 0 | 53,778,573,132 | 0.8% | ||
modernzorker | 0 | 505,429,268 | 0.56% | ||
techslut | 0 | 26,256,897,269 | 4% | ||
steemstem | 0 | 183,104,987,581 | 10% | ||
edb | 0 | 800,000,709 | 1% | ||
walterjay | 0 | 63,010,296,744 | 5% | ||
metroair | 0 | 3,615,023,631 | 0.8% | ||
dna-replication | 0 | 346,453,741 | 10% | ||
dhimmel | 0 | 52,693,585,523 | 2.5% | ||
elevator09 | 0 | 963,269,246 | 0.4% | ||
detlev | 0 | 3,512,324,438 | 0.24% | ||
federacion45 | 0 | 1,212,146,741 | 0.4% | ||
gamersclassified | 0 | 563,919,278 | 0.4% | ||
iansart | 0 | 796,339,442 | 0.4% | ||
mobbs | 0 | 13,070,508,068 | 5% | ||
jerrybanfield | 0 | 2,713,534,903 | 0.8% | ||
rt395 | 0 | 1,953,571,706 | 1.5% | ||
bitrocker2020 | 0 | 1,564,540,630 | 0.12% | ||
sustainablyyours | 0 | 3,371,244,913 | 5% | ||
arunava | 0 | 2,982,395,170 | 0.32% | ||
samminator | 0 | 7,014,131,269 | 5% | ||
enjar | 0 | 6,432,919,299 | 0.72% | ||
lorenzor | 0 | 1,315,299,065 | 50% | ||
alexander.alexis | 0 | 6,060,361,524 | 10% | ||
jayna | 0 | 1,071,395,049 | 0.16% | ||
princessmewmew | 0 | 1,216,823,464 | 0.4% | ||
joeyarnoldvn | 0 | 476,049,963 | 1.47% | ||
gunthertopp | 0 | 10,725,071,631 | 0.2% | ||
touchman | 0 | 177,865,811,003 | 100% | ||
empath | 0 | 562,134,401 | 0.4% | ||
minnowbooster | 0 | 1,085,138,756,696 | 20% | ||
felt.buzz | 0 | 1,418,775,466 | 0.2% | ||
howo | 0 | 326,327,901,562 | 10% | ||
tsoldovieri | 0 | 1,011,060,135 | 5% | ||
steemwizards | 0 | 601,711,394 | 0.8% | ||
neumannsalva | 0 | 650,714,403 | 0.4% | ||
stayoutoftherz | 0 | 22,447,912,343 | 0.2% | ||
abigail-dantes | 0 | 3,639,173,939 | 10% | ||
zonguin | 0 | 492,695,964 | 2.5% | ||
investingpennies | 0 | 3,028,179,501 | 0.8% | ||
iamphysical | 0 | 804,559,247 | 90% | ||
zyx066 | 0 | 782,451,685 | 0.24% | ||
revo | 0 | 1,594,757,493 | 0.8% | ||
azulear | 0 | 1,320,172,473 | 100% | ||
djlethalskillz | 0 | 566,056,836 | 5% | ||
psicoluigi | 0 | 816,144,744 | 50% | ||
rocky1 | 0 | 112,501,114,775 | 0.12% | ||
thelordsharvest | 0 | 713,639,686 | 0.8% | ||
aidefr | 0 | 1,038,854,958 | 5% | ||
meno | 0 | 3,765,635,728 | 0.4% | ||
buttcoins | 0 | 2,158,851,085 | 0.16% | ||
doifeellucky | 0 | 980,109,521 | 0.4% | ||
enzor | 0 | 599,452,166 | 10% | ||
bartosz546 | 0 | 2,541,419,726 | 0.4% | ||
dandays | 0 | 2,342,926,893 | 0.15% | ||
sunsea | 0 | 621,309,886 | 0.4% | ||
postpromoter | 0 | 231,119,420,453 | 10% | ||
bluefinstudios | 0 | 534,851,928 | 0.24% | ||
steveconnor | 0 | 667,029,413 | 0.4% | ||
smitop | 0 | 10,643,164,865 | 100% | ||
aboutcoolscience | 0 | 7,476,565,569 | 10% | ||
sandracarrascal | 0 | 493,688,297 | 50% | ||
kenadis | 0 | 2,687,097,893 | 10% | ||
madridbg | 0 | 4,532,823,003 | 10% | ||
robotics101 | 0 | 2,968,605,372 | 10% | ||
punchline | 0 | 2,300,791,259 | 0.8% | ||
sco | 0 | 2,741,925,527 | 10% | ||
ennyta | 0 | 963,232,835 | 50% | ||
brotherhood | 0 | 2,857,267,675 | 0.8% | ||
juecoree | 0 | 2,224,705,725 | 7% | ||
bartheek | 0 | 1,608,036,209 | 0.8% | ||
hetty-rowan | 0 | 563,866,589 | 0.4% | ||
ydavgonzalez | 0 | 2,406,124,210 | 10% | ||
intrepidphotos | 0 | 2,063,931,434 | 7.5% | ||
fineartnow | 0 | 541,186,096 | 0.4% | ||
fragmentarion | 0 | 5,694,142,775 | 10% | ||
utube | 0 | 680,440,273 | 0.8% | ||
dynamicrypto | 0 | 2,909,071,201 | 1% | ||
neneandy | 0 | 883,372,168 | 0.8% | ||
pab.ink | 0 | 545,751,746 | 5% | ||
marc-allaria | 0 | 617,168,108 | 0.4% | ||
sportscontest | 0 | 834,795,004 | 0.8% | ||
pandasquad | 0 | 2,131,947,436 | 0.8% | ||
miguelangel2801 | 0 | 771,897,597 | 50% | ||
orlandumike | 0 | 20,507,011,137 | 20% | ||
emiliomoron | 0 | 1,478,883,025 | 5% | ||
photohunt | 0 | 537,479,273 | 0.8% | ||
geopolis | 0 | 621,721,412 | 10% | ||
robertbira | 0 | 1,038,836,335 | 2.5% | ||
alexdory | 0 | 1,183,540,852 | 10% | ||
takowi | 0 | 15,635,849,609 | 0.8% | ||
irgendwo | 0 | 2,795,324,049 | 0.8% | ||
flugschwein | 0 | 3,374,678,725 | 8.5% | ||
melvin7 | 0 | 1,175,128,773 | 0.4% | ||
francostem | 0 | 1,341,183,250 | 10% | ||
endopediatria | 0 | 687,067,452 | 20% | ||
croctopus | 0 | 1,416,644,183 | 100% | ||
putu300 | 0 | 718,877,673 | 5% | ||
superlotto | 0 | 2,422,968,967 | 0.8% | ||
bscrypto | 0 | 2,054,334,094 | 0.4% | ||
movingman | 0 | 524,301,147 | 20% | ||
tomastonyperez | 0 | 16,612,399,830 | 50% | ||
elvigia | 0 | 10,883,602,782 | 50% | ||
sanderjansenart | 0 | 714,706,715 | 0.4% | ||
qberry | 0 | 512,134,608 | 0.4% | ||
greddyforce | 0 | 502,036,035 | 0.29% | ||
braaiboy | 0 | 1,499,816,426 | 0.4% | ||
fotogruppemunich | 0 | 589,763,814 | 0.2% | ||
therising | 0 | 15,329,613,457 | 0.8% | ||
de-stem | 0 | 5,443,504,775 | 9.9% | ||
josedelacruz | 0 | 4,718,775,998 | 50% | ||
achimmertens | 0 | 2,384,063,203 | 0.4% | ||
lorenzopistolesi | 0 | 1,523,339,631 | 0.4% | ||
kgakakillerg | 0 | 18,034,147,275 | 10% | ||
realblockchain | 0 | 15,851,394,928 | 50% | ||
erickyoussif | 0 | 666,065,165 | 100% | ||
killerteesuk | 0 | 897,027,307 | 99% | ||
primersion | 0 | 362,495,239,795 | 20% | ||
deholt | 0 | 538,917,351 | 8.5% | ||
pladozero | 0 | 33,847,133,261 | 10% | ||
minerthreat | 0 | 531,598,655 | 0.4% | ||
temitayo-pelumi | 0 | 883,964,993 | 10% | ||
andrick | 0 | 839,349,411 | 50% | ||
doctor-cog-diss | 0 | 8,068,699,402 | 10% | ||
acont | 0 | 11,300,580,310 | 50% | ||
uche-nna | 0 | 919,879,624 | 0.64% | ||
cheese4ead | 0 | 649,271,597 | 0.4% | ||
mafufuma | 0 | 7,411,745,757 | 1% | ||
nattybongo | 0 | 16,008,481,862 | 10% | ||
bflanagin | 0 | 645,231,053 | 0.4% | ||
armandosodano | 0 | 475,098,849 | 0.4% | ||
yourmind | 0 | 15,669,895,242 | 100% | ||
gerdtrudroepke | 0 | 5,941,741,081 | 7% | ||
kylealex | 0 | 4,876,502,435 | 10% | ||
fran.frey | 0 | 4,088,753,669 | 50% | ||
thelittlebank | 0 | 2,890,093,176 | 0.4% | ||
pboulet | 0 | 24,090,285,483 | 8% | ||
stem-espanol | 0 | 20,659,924,736 | 100% | ||
cliffagreen | 0 | 4,778,173,740 | 10% | ||
aleestra | 0 | 12,844,740,027 | 80% | ||
brianoflondon | 0 | 11,361,051,311 | 0.2% | ||
giulyfarci52 | 0 | 1,670,691,174 | 50% | ||
esthersanchez | 0 | 4,344,501,820 | 60% | ||
steemcryptosicko | 0 | 1,306,601,462 | 0.16% | ||
cakemonster | 0 | 501,556,211 | 0.8% | ||
stem.witness | 0 | 555,992,961 | 10% | ||
double-negative | 0 | 528,978,033 | 20% | ||
vaultec | 0 | 6,233,943,543 | 12% | ||
steemstorage | 0 | 1,013,333,852 | 0.8% | ||
crowdwitness | 0 | 25,845,233,247 | 5% | ||
steemean | 0 | 10,080,762,938 | 5% | ||
kggymlife | 0 | 3,627,592,253 | 20% | ||
robibasa | 0 | 20,340,478,536 | 10% | ||
rtron86 | 0 | 6,220,630,425 | 50% | ||
reggaesteem | 0 | 485,830,957 | 5% | ||
precarious | 0 | 476,128,535 | 50% | ||
steemstem-trig | 0 | 164,856,815 | 10% | ||
baltai | 0 | 837,998,498 | 0.4% | ||
ibt-survival | 0 | 38,342,165,937 | 10% | ||
lightpaintershub | 0 | 661,040,942 | 1% | ||
curamax | 0 | 40,040,329,188 | 100% | ||
fsm-core | 0 | 12,219,674,958 | 50% | ||
stemsocial | 0 | 82,465,993,908 | 10% | ||
noelyss | 0 | 2,646,799,182 | 5% | ||
quinnertronics | 0 | 14,477,130,354 | 7% | ||
aabcent | 0 | 1,089,694,717 | 0.64% | ||
meritocracy | 0 | 8,973,928,240 | 0.08% | ||
dcrops | 0 | 4,972,125,779 | 0.4% | ||
traderhive | 0 | 1,789,858,909 | 0.8% | ||
dodovietnam | 0 | 506,590,829 | 0.4% | ||
drricksanchez | 0 | 2,033,386,950 | 0.4% | ||
nfttunz | 0 | 1,145,841,521 | 0.08% | ||
sarashew | 0 | 532,351,482 | 0.8% | ||
podping | 0 | 1,130,842,356 | 0.2% | ||
seinkalar | 0 | 2,820,415,618 | 0.8% | ||
tanzil2024 | 0 | 814,314,341 | 1% | ||
rhiaji | 0 | 1,411,933,441 | 100% | ||
aries90 | 0 | 6,643,474,309 | 0.8% | ||
kushyzee | 0 | 5,979,866,486 | 100% | ||
cryptothesis | 0 | 315,210,818,188 | 100% | ||
yixn | 0 | 7,199,799,198 | 0.4% | ||
kqaosphreak | 0 | 510,937,415 | 10% | ||
mituoshizhe | 0 | 340,031,825,659 | 100% | ||
crypt0gnome | 0 | 3,444,254,165 | 0.16% | ||
doodleaday | 0 | 37,005,909,254 | 50% | ||
prosocialise | 0 | 8,332,085,417 | 5% | ||
archangel21 | 0 | 492,232,125 | 0.8% | ||
mugueto2022 | 0 | 558,762,731 | 20% | ||
soyjoselopez | 0 | 478,808,635 | 20% | ||
sbtofficial | 0 | 629,160,517 | 0.4% | ||
beckyonweb | 0 | 481,825,062 | 100% | ||
smariam | 0 | 2,478,459,973 | 25% | ||
hive-179513 | 0 | 1,982,184,832 | 50% | ||
reverio | 0 | 715,451,497 | 5% | ||
opticus | 0 | 1,021,648,952 | 0.4% | ||
timix648 | 0 | 3,946,887,623 | 100% | ||
rhemagames | 0 | 657,513,666 | 0.4% | ||
earn.vote | 0 | 8,733,266,691 | 100% |
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 😁
author | kushyzee |
---|---|
permlink | re-snippets-20231029t6297882z |
category | hive-169321 |
json_metadata | {"type":"comment","tags":["hive-169321","programming","development","leofinance","writing","apps","hive"],"app":"ecency/3.0.44-mobile","format":"markdown+html"} |
created | 2023-10-29 05:29:09 |
last_update | 2023-10-29 05:29:09 |
depth | 1 |
children | 0 |
last_payout | 2023-11-05 05:29:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.042 HBD |
curator_payout_value | 0.042 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 345 |
author_reputation | 91,879,023,731,471 |
root_title | "HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 128,393,020 |
net_rshares | 185,182,167,318 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
snippets | 0 | 185,182,167,318 | 100% |
<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. <br /> <br /> </div>
author | stemsocial |
---|---|
permlink | re-snippets-html-css-javsscript-adjustable-countdown-timer-to-keep-time-as-you-write-20231028t205248432z |
category | hive-169321 |
json_metadata | {"app":"STEMsocial"} |
created | 2023-10-28 20:52:48 |
last_update | 2023-10-28 20:52:48 |
depth | 1 |
children | 0 |
last_payout | 2023-11-04 20:52:48 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.039 HBD |
curator_payout_value | 0.039 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 565 |
author_reputation | 22,918,229,493,305 |
root_title | "HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 128,383,179 |
net_rshares | 168,176,502,666 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
snippets | 0 | 168,176,502,666 | 100% |
> 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.
author | timix648 |
---|---|
permlink | re-snippets-s38d4t |
category | hive-169321 |
json_metadata | {"tags":["hive-169321"],"app":"peakd/2023.10.1"} |
created | 2023-10-28 08:34:09 |
last_update | 2023-10-28 08:34:09 |
depth | 1 |
children | 1 |
last_payout | 2023-11-04 08:34:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.044 HBD |
curator_payout_value | 0.043 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 208 |
author_reputation | 25,155,469,453,344 |
root_title | "HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 128,369,902 |
net_rshares | 190,524,896,130 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
snippets | 0 | 190,524,896,130 | 100% |
It is indeed a great tool!
author | cryptothesis |
---|---|
permlink | re-timix648-20231028t18316305z |
category | hive-169321 |
json_metadata | {"type":"comment","tags":["hive-169321"],"app":"ecency/3.0.44-mobile","format":"markdown+html"} |
created | 2023-10-28 10:31:09 |
last_update | 2023-10-28 12:18:06 |
depth | 2 |
children | 0 |
last_payout | 2023-11-04 10:31:09 |
cashout_time | 1969-12-31 23:59:59 |
total_payout_value | 0.114 HBD |
curator_payout_value | 0.113 HBD |
pending_payout_value | 0.000 HBD |
promoted | 0.000 HBD |
body_length | 26 |
author_reputation | 122,512,281,618,098 |
root_title | "HTML, CSS, JavsScript: Adjustable countdown timer to keep time as you write" |
beneficiaries | [] |
max_accepted_payout | 1,000,000.000 HBD |
percent_hbd | 10,000 |
post_id | 128,371,693 |
net_rshares | 492,276,500,851 |
author_curate_reward | "" |
voter | weight | wgt% | rshares | pct | time |
---|---|---|---|---|---|
mituoshizhe | 0 | 262,692,046,271 | 100% | ||
opticus | 0 | 229,584,454,580 | 100% |