diff --git a/idb-notes.html b/idb-notes.html
index 5dc0079..ee06633 100644
--- a/idb-notes.html
+++ b/idb-notes.html
@@ -57,7 +57,15 @@ textarea {
font-family: inherit;
}
.link-btn:hover {
- color: darkblue;
+ color: #0a6b75;
+ }
+ #countContainer {
+ margin-top: 10px;
+ font-size: 0.8rem;
+ color: #555;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
}
.saved-column {
@@ -185,6 +193,10 @@ textarea {
<div id="docStatus"></div>
<textarea id="editor" placeholder="Write something..."></textarea>
<br>
+ <div id="countContainer">
+ <div id="wordCount">0 words</div> |
+ <div id="charCount">0 characters</div>
+ </div>
<button class="link-btn" id="saveBtn">Save Doc</button>
<button class="link-btn" id="newBtn">New Doc</button>
<button class="link-btn" id="exportBtn">Export as TXT</button>
@@ -419,6 +431,21 @@ toggleBtn.addEventListener('click', function() {
toggleBtn.textContent = savedColumn.classList.contains('collapsed') ? '+' : '−';
});
+ const textarea = document.getElementById('editor');
+ const charCount = document.getElementById('charCount');
+ const wordCount = document.getElementById('wordCount');
+
+ function updateCounts(text) {
+ const characters = text.length;
+ const words = text.trim().split(/\s+/).filter(Boolean).length;
+ charCount.textContent = `${characters} character${characters !== 1 ? 's' : ''}`;
+ wordCount.textContent = `${words} word${words !== 1 ? 's' : ''}`;
+ }
+
+ textarea.addEventListener('input', () => {
+ updateCounts(textarea.value);
+ });
+
updateStatus();
</script>
</body>