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>