added statistics and made them responsive

src/public/css/style.css

@@ -111,6 +111,39 @@ header {
     font-size: 1rem;
 }
 
+#statusBar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap; /* enables wrapping on small screens */
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--burnt-sienna);
+  border: 2px solid var(--cambridge-blue);
+  color: var(--eggshell);
+  font-size: 0.95rem;
+  text-align: center;
+}
+
+/* Status Bar Items */
+#statusBar span {
+  flex: 1;
+  min-width: 120px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  #statusBar {
+    flex-direction: column;
+    gap: 0.4rem;
+    font-size: 0.9rem;
+    padding: 0.75rem;
+  }
+  #statusBar span {
+    width: 100%;
+  }
+}
+
 .action-buttons, .status-indicator {
     display: flex;
     align-items: center;

src/views/index.ejs

@@ -88,6 +88,11 @@
       </button>
     </div>
 
+    <div id="statusBar">
+        <span id="charCount">Characters: 0</span>
+        <span id="readingTime">Estimated Reading Time: 0</span>
+        <span id="wordCount">Words: 0</span>
+    </div>
 
     <footer>
         <div class="footer-content">
@@ -152,11 +157,13 @@
 
         socket.on('loadNote', (note) => {
             document.getElementById('notepad').value = note.content;
+            updateCounts();
         });
 
         socket.on('noteUpdated', (content) => {
             const textarea = document.getElementById('notepad');
             const cursorPosition = textarea.selectionStart;
+            updateCounts();
 
             if (textarea.value !== content) {
                 textarea.value = content;
@@ -195,6 +202,8 @@
 
         document.getElementById('notepad').addEventListener('input', debounce(() => {
             const content = document.getElementById('notepad').value;
+            updateCounts();
+            socket.emit('updateNote', { url, content });
 
             if (content !== lastContent) {
                 lastContent = content;
@@ -313,6 +322,30 @@
                     .catch(err => console.log('ServiceWorker registration failed:', err));
             });
         }
+
+        // Word, Character Count & Estimated Reading Time
+        const notepad = document.getElementById('notepad');
+        const charCountElem = document.getElementById('charCount');
+        const wordCountElem = document.getElementById('wordCount');
+        // const readingTime = document.getElementById('readingTime');
+
+        function updateCounts() {
+            const text = notepad.value;
+            const charCount = text.length;
+            const wordCount = text.trim().split(/\s+/).filter(Boolean).length;
+
+            const minutes = wordCount / 200;
+            const totalSeconds = Math.round(minutes * 60);
+            const mins = Math.floor(totalSeconds / 60);
+            const secs = totalSeconds % 60;
+
+            charCountElem.textContent = `Characters: ${charCount}`;
+            readingTime.textContent = `Reading time: ${mins > 0 ? `${mins} min ` : ""}${secs} sec`;
+            wordCountElem.textContent = `Words: ${wordCount}`;
+        }
+
+        notepad.addEventListener('input', updateCounts);
+        window.addEventListener('load', updateCounts);
     </script>
 </body>
 </html>