diff --git a/board/script.js b/board/script.js index 7c9836e..a4329a0 100644 --- a/board/script.js +++ b/board/script.js @@ -1,38 +1,67 @@ document.addEventListener('DOMContentLoaded', function() { - // Generate random username + // Generate or retrieve the username from localStorage function generateRandomUsername() { const randomNum = Math.floor(Math.random() * 100000); - return `milkenjoyer${randomNum.toString().padStart(5, '0')}`; + return `milkenjoyer${randomNum.toString().padStart(3, '0')}`; } - const username = generateRandomUsername(); + // Check if username is already saved, else generate a new one + let username = localStorage.getItem('username'); + if (!username) { + username = generateRandomUsername(); + localStorage.setItem('username', username); // Save username to localStorage + } document.getElementById('username').innerText = username; + // Retrieve stored posts from localStorage or initialize empty array + let posts = JSON.parse(localStorage.getItem('posts')) || []; + + // Function to render posts + function renderPosts() { + postsSection.innerHTML = ''; // Clear current posts + posts + .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)) // Sort posts by descending date + .forEach(post => { + const postDiv = document.createElement('div'); + postDiv.classList.add('post'); + + const postUsername = document.createElement('p'); + postUsername.classList.add('username'); + postUsername.innerText = post.username; + postDiv.appendChild(postUsername); + + const postContent = document.createElement('p'); + postContent.classList.add('content'); + postContent.innerText = post.content; + postDiv.appendChild(postContent); + + postsSection.prepend(postDiv); // Add post to the beginning + }); + } + + // Initial render of posts + const postsSection = document.getElementById('posts-section'); + renderPosts(); + // Handle post submission const postForm = document.getElementById('post-form'); const postContent = document.getElementById('post-content'); - const postsSection = document.getElementById('posts-section'); postForm.addEventListener('submit', function(event) { event.preventDefault(); - + const content = postContent.value.trim(); if (!content) return; - const post = document.createElement('div'); - post.classList.add('post'); + const newPost = { + username: username, + content: content, + timestamp: new Date().toISOString() // Store the timestamp for sorting + }; - const postUsername = document.createElement('p'); - postUsername.classList.add('username'); - postUsername.innerText = username; - post.appendChild(postUsername); - - const postContentEl = document.createElement('p'); - postContentEl.classList.add('content'); - postContentEl.innerText = content; - post.appendChild(postContentEl); - - postsSection.prepend(post); + posts.push(newPost); + localStorage.setItem('posts', JSON.stringify(posts)); // Save posts to localStorage + renderPosts(); // Re-render posts postContent.value = ''; // Clear post content }); });