Update script.js

board/script.js

@@ -1,17 +1,51 @@
 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();
@@ -19,20 +53,15 @@ document.addEventListener('DOMContentLoaded', function() {
         const content = postContent.value.trim();
         if (!content) return;
 
-        const post = document.createElement('div');
+        const newPost = {
-        post.classList.add('post');
+            username: username,
+            content: content,
+            timestamp: new Date().toISOString() // Store the timestamp for sorting
+        };
 
-        const postUsername = document.createElement('p');
+        posts.push(newPost);
-        postUsername.classList.add('username');
+        localStorage.setItem('posts', JSON.stringify(posts)); // Save posts to localStorage
-        postUsername.innerText = username;
+        renderPosts(); // Re-render posts
-        post.appendChild(postUsername);
-
-        const postContentEl = document.createElement('p');
-        postContentEl.classList.add('content');
-        postContentEl.innerText = content;
-        post.appendChild(postContentEl);
-
-        postsSection.prepend(post);
         postContent.value = ''; // Clear post content
     });
 });