Compare commits
9 Commits
231c2160d6
...
message_bo
| Author | SHA1 | Date | |
|---|---|---|---|
| f4e06bc29a | |||
| a47d56b8c8 | |||
|
|
36787704d7 | ||
|
|
5f51e4930d | ||
| 4c3acfa2d0 | |||
| 73354440c7 | |||
| 4a88a5c810 | |||
| 482bea6721 | |||
| 095628939f |
@@ -13,14 +13,15 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Message Board</h1>
|
||||
<form id="messageForm">
|
||||
<input type="text" id="name" placeholder="Your Name" required>
|
||||
<textarea id="message" placeholder="Your Message" maxlength="100" required></textarea>
|
||||
<div id="charCount">0 / 100</div>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
<div id="messages">
|
||||
<!-- Nachrichten werden hier dynamisch geladen -->
|
||||
</div>
|
||||
<form id="messageForm">
|
||||
<input type="text" id="name" placeholder="Your Name" required>
|
||||
<textarea id="message" placeholder="Your Message" required></textarea>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
<script src="message-board.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -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`;
|
||||
});
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
Reference in New Issue
Block a user