Add a character counter

simonw · web-flow · commit cb33238bc7a9 · 2025-02-25T21:52:42.000-08:00
https://claude.ai/share/3db659f4-4b8f-4845-830b-234ae440e399
diff --git a/word-counter.html b/word-counter.html
@@ -1,10 +1,9 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Word counter</title>
+<title>Word &amp; Character Counter</title>
 <style>
 * {
   box-sizing: border-box;
@@ -98,7 +97,7 @@
 </head>
 <body>
 <div class="container">
-  <h1>Word counter</h1>
+  <h1>Word &amp; Character Counter</h1>
   <div id="writing-container"></div>
   <button class="add-btn" id="addSection">Add new section</button>
 </div>
@@ -123,7 +122,8 @@ <h1>Word counter</h1>
     <textarea class="writing-area" placeholder="Start writing here...">${content}</textarea>
     <div class="controls">
       <div class="stats">
-        Words: <span class="word-count">0</span>
+        <span class="word-count">0</span> words &middot; 
+        <span class="char-count">0</span> characters
         <span class="save-status"></span>
       </div>
       <button class="remove-btn">Remove</button>
@@ -132,13 +132,14 @@ <h1>Word counter</h1>
 
   const textarea = section.querySelector('textarea')
   const wordCount = section.querySelector('.word-count')
+  const charCount = section.querySelector('.char-count')
   const saveStatus = section.querySelector('.save-status')
   const removeBtn = section.querySelector('.remove-btn')
 
-  updateWordCount(textarea, wordCount)
+  updateCounts(textarea, wordCount, charCount)
 
   textarea.addEventListener('input', () => {
-    updateWordCount(textarea, wordCount)
+    updateCounts(textarea, wordCount, charCount)
     debouncedSave()
   })
 
@@ -154,9 +155,16 @@ <h1>Word counter</h1>
   return text.trim() ? text.trim().split(/\s+/).length : 0
 }
 
-function updateWordCount(textarea, wordCountElement) {
-  const count = countWords(textarea.value)
-  wordCountElement.textContent = count
+function countCharacters(text) {
+  return text.length
+}
+
+function updateCounts(textarea, wordCountElement, charCountElement) {
+  const wordCount = countWords(textarea.value)
+  const charCount = countCharacters(textarea.value)
+  
+  wordCountElement.textContent = wordCount
+  charCountElement.textContent = charCount
 }
 
 function saveToLocalStorage() {
