From a47d56b8c83dc633e0a499efaa4764a62036bc41 Mon Sep 17 00:00:00 2001
From: jafreli <jakob@dreher.land>
Date: Fri, 17 Jan 2025 02:32:20 +0100
Subject: [PATCH] char counter in mesage box

---
 view/message-board.html |  2 +-
 view/message-board.js   | 11 ++++++++++-
 view/styles.css         |  7 +++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/view/message-board.html b/view/message-board.html
index ab74e27..2874d62 100644
--- a/view/message-board.html
+++ b/view/message-board.html
@@ -15,7 +15,7 @@
         <h1>Message Board</h1>
         <form id="messageForm">
             <input type="text" id="name" placeholder="Your Name" required>
-            <textarea id="message" placeholder="Your Message" required></textarea>
+            <textarea id="message" placeholder="Your Message" maxlength="100" required></textarea>
             <button type="submit">Send</button>
         </form>
         <div id="messages">
diff --git a/view/message-board.js b/view/message-board.js
index d91e099..9667123 100644
--- a/view/message-board.js
+++ b/view/message-board.js
@@ -4,7 +4,7 @@ const messageForm = document.getElementById('messageForm');
 
 // Funktion, um die letzten 10 Nachrichten zu laden
 async function loadMessages() {
-    const result = await pb.collection('message_board').getList(1, 10, {
+    const result = await pb.collection('message_board').getList(1, 8, {
         sort: '-created', // Sortiert nach Erstellungsdatum absteigend
     });
 
@@ -40,3 +40,12 @@ messageForm.addEventListener('submit', async (e) => {
 
 // Nachrichten beim Laden der Seite anzeigen
 loadMessages();
+
+const messageInput = document.getElementById('message');
+const charCount = document.getElementById('charCount');
+
+// Event-Listener für Eingaben im Textfeld
+messageInput.addEventListener('input', () => {
+    const currentLength = messageInput.value.length;
+    charCount.textContent = `${currentLength} / 100`;
+});
diff --git a/view/styles.css b/view/styles.css
index faa0142..472f396 100644
--- a/view/styles.css
+++ b/view/styles.css
@@ -108,3 +108,10 @@ form button {
 form button:hover {
     background: #0056b3;
 }
+
+#charCount {
+    font-size: 12px;
+    color: #666;
+    text-align: right; /* Rechtsbündig unter dem Textfeld */
+    width: 90%;
+}
\ No newline at end of file
-- 
2.49.1