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
Kaggra blev medlem på Fuska.se
imageseo blev medlem på Fuska.se
Amandaalminde blev medlem på Fuska.se
Gustavessen blev medlem på Fuska.se
woolyneedy13 blev medlem på Fuska.se
arvidstrask blev medlem på Fuska.se
rollycompany blev medlem på Fuska.se
Emma85 blev medlem på Fuska.se
Hypnotized blev medlem på Fuska.se
Timothydrins blev medlem på Fuska.se
Detta är den officiella forumtråden för The Witcher 2: Assassins of Kings - Enhanced Edition. Här kan du diskutera spelet i all allmänhet eller ställa frågor och/eller hjälpa andra. Vi har även en sida för spelet där du hittar mer. Bland annat kan du hitta fusk, tips och guider samt omdömen. Du kan även hitta butiker som säljer spelet. Gå till spelsidan för The Witcher 2: Assassins of Kings - Enhanced Edition.
