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
