Nu är det så att jag har fastnat på användarnamn. 😧 Fick tips från Gud att använda detta forum (trots att mina kusiner använder detta forum.) Här är min kod:
<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bulletin Board</title> <!-- Lägg till Google Fonts för snyggare text --> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" /> <style> /* Bulletin Board sektion */ #bulletinBoard { display: block; /* Ändra till 'none' för att dölja initialt */ padding: 30px 20px; max-width: 500px; margin: auto; margin-top: 50px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); font-family: "Open Sans", sans-serif; transition: box-shadow 0.3s, transform 0.3s; } #bulletinBoard:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: translateY(-2px); } h2 { text-align: center; color: #333; margin-bottom: 20px; } #posts { max-height: 300px; overflow-y: auto; padding-right: 10px; margin-bottom: 20px; } .post { background-color: #fefefe; padding: 15px; margin-bottom: 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: background-color 0.2s, box-shadow 0.2s; } .post:hover { background-color: #f0f8ff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .post-header { font-weight: 700; font-size: 1.1em; margin-bottom: 6px; color: #222; } .post-meta { font-size: 0.8em; color: #555; margin-bottom: 10px; } #postForm { display: flex; flex-direction: column; gap: 10px; } #nameInput, #newPost { padding: 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 1em; transition: border-color 0.2s, box-shadow 0.2s; } #nameInput:focus, #newPost:focus { border-color: #007bff; outline: none; box-shadow: 0 0 8px rgba(0,123,255,0.2); } #newPost { resize: vertical; /* Gör att textarea kan resize:as vertikalt */ min-height: 80px; /* Minsta höjd för textarea */ } .buttons { display: flex; gap: 10px; } button { padding: 12px 20px; border: none; border-radius: 8px; background-color: #007bff; color: #fff; font-weight: 600; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } button:hover { background-color: #0056b3; transform: translateY(-1px); } button:nth-of-type(2) { background-color: #dc3545; /* Tillbaka-knappen i rött */ } button:nth-of-type(2):hover { background-color: #a71d2a; } </style> </head> <body> <!-- Bulletin Board Sektion --> <div id="bulletinBoard"> <h2>Bulletin Board</h2> <div id="posts"> <!-- Här kommer inläggen att visas --> </div> <form id="postForm"> <input type="text" id="nameInput" placeholder="Ditt namn..." required /> <textarea id="newPost" placeholder="Skriv ett nytt inlägg..." required></textarea> <div class="buttons"> <button type="submit">Lägg till</button> <button type="button" onclick="toggleBulletin()">Tillbaka</button> </div> </form> </div> <script> // Funktion för att visa/hide bulletin board function toggleBulletin() { const bulletin = document.getElementById('bulletinBoard'); if (bulletin.style.display === 'none') { bulletin.style.display = 'block'; } else { bulletin.style.display = 'none'; } } // Funktion för att lägga till ett inlägg function addPost(name, text) { const postsContainer = document.getElementById('posts'); const postDiv = document.createElement('div'); postDiv.className = 'post'; const header = document.createElement('div'); header.className = 'post-header'; header.textContent = 'Nytt inlägg'; const meta = document.createElement('div'); meta.className = 'post-meta'; meta.textContent = `Skrivet av: ${name} - ${new Date().toLocaleString('sv-SE')}`; const content = document.createElement('div'); content.textContent = text; postDiv.appendChild(header); postDiv.appendChild(meta); postDiv.appendChild(content); // Lägg till högst upp postsContainer.insertBefore(postDiv, postsContainer.firstChild); } // Spara alla inlägg i localStorage function savePosts() { const postsContainer = document.getElementById('posts'); const posts = Array.from(postsContainer.children).map(postDiv => { const metaText = postDiv.querySelector('.post-meta').textContent; const contentText = postDiv.querySelector('div:nth-child(3)').textContent; const nameMatch = metaText.match(/Skrivet av: (.+?) -/); const name = nameMatch ? nameMatch[1] : 'Anonym'; return { name: name, text: contentText }; }); localStorage.setItem('posts', JSON.stringify(posts)); } // Ladda inlägg från localStorage function loadPosts() { const postsContainer = document.getElementById('posts'); postsContainer.innerHTML = ''; const storedPosts = localStorage.getItem('posts'); if (storedPosts) { const postsArray = JSON.parse(storedPosts); postsArray.forEach(post => { addPost(post.name, post.text); }); } } // När sidan laddas window.addEventListener('DOMContentLoaded', () => { loadPosts(); }); // Hantera formulär document.getElementById('postForm').addEventListener('submit', function(e) { e.preventDefault(); const nameInput = document.getElementById('nameInput'); const postTextarea = document.getElementById('newPost'); const name = nameInput.value.trim() || 'Anonym'; const text = postTextarea.value.trim(); if (text !== '') { addPost(name, text); savePosts(); postTextarea.value = ''; } }); </script> </body> </html>
Detta är till en Bulletin Board-
Tror det ska inte vara några problem. Det går inte att förstöra en Bulletin Board. ;-D
