Håller på och gör ett roligt spel

Kaggra · 12 Juli

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 · 12 Juli

Open Sans är en väldigt bra font. Finns gratis på Google Fonts

Kaggra · 12 Juli

Det är bara incest som kan ha hjärnsmällar

Kaggra · 12 Juli

Fattar inte vad det ska stå på [användarnamn]

Kaggra · 12 Juli

Här går Bulletin Board att se midheaven.se/Bulletin Board

Kaggra · 12 Juli

Kan LOVA att Bulletin Boards är omöjliga tt. förstöra

Kaggra · 12 Juli

Tänk om mitt spel blir populärare än The Sims? Det är ett webbaserat spel (mitt alltså,)

Kaggra · 12 Juli

Jag lovar

Kaggra · 12 Juli

Jag är upphovskvinna

ImbazFuhrerII · Söndag kl 14:27

@Dave37 Är en riktig hacker, och @Horizon är en god kristen. Prova att fråga dessa herrar om hjälp.

ImbazFuhrerII · Söndag kl 18:08

Vill passa på att kasta in en extra referens då jag antar att du, liksom många andra, lider brist på kattkunskaper.

@KuroKaktus kan skilja en bengalisk tiger från en ragdoll, så att säga.

Logga in

Håller på och gör ett roligt spel

Rekommendera inlägg

Kaggra

Kaggra

Kaggra

Kaggra

Kaggra

Kaggra

Kaggra

Kaggra

Kaggra

ImbazFuhrerII

ImbazFuhrerII

Gå med i konversationen

Bläddra

Aktivitet