Create script.js

forum/script.js

@@ -0,0 +1,123 @@
+let threads = JSON.parse(localStorage.getItem('threads') || '[]');
+
+function saveThreads() {
+  localStorage.setItem('threads', JSON.stringify(threads));
+}
+
+function createThread() {
+  const title = document.getElementById('thread-title').value;
+  const content = document.getElementById('thread-content').value;
+  const imageInput = document.getElementById('thread-image');
+
+  const reader = new FileReader();
+  reader.onload = () => {
+    const thread = {
+      id: Date.now(),
+      title,
+      posts: [{
+        content,
+        image: reader.result || '',
+        date: new Date().toLocaleString()
+      }]
+    };
+    threads.unshift(thread);
+    saveThreads();
+    renderThreads();
+  };
+
+  if (imageInput.files.length > 0) {
+    reader.readAsDataURL(imageInput.files[0]);
+  } else {
+    reader.onload(); // No image
+  }
+
+  document.getElementById('thread-title').value = '';
+  document.getElementById('thread-content').value = '';
+  document.getElementById('thread-image').value = '';
+}
+
+function replyToThread(threadId, content, imageFile) {
+  const thread = threads.find(t => t.id === threadId);
+  const reader = new FileReader();
+
+  reader.onload = () => {
+    thread.posts.push({
+      content,
+      image: reader.result || '',
+      date: new Date().toLocaleString()
+    });
+    saveThreads();
+    renderThreads();
+  };
+
+  if (imageFile) {
+    reader.readAsDataURL(imageFile);
+  } else {
+    reader.onload();
+  }
+}
+
+function renderThreads() {
+  const container = document.getElementById('threads');
+  container.innerHTML = '';
+
+  threads.forEach(thread => {
+    const threadDiv = document.createElement('div');
+    threadDiv.className = 'thread';
+
+    threadDiv.innerHTML = `<h3>${thread.title}</h3>`;
+
+    thread.posts.forEach(post => {
+      const postDiv = document.createElement('div');
+      postDiv.className = 'reply';
+      postDiv.innerHTML = `
+        <p>${post.content}</p>
+        ${post.image ? `<img src="${post.image}">` : ''}
+        <small>${post.date}</small>
+      `;
+      threadDiv.appendChild(postDiv);
+    });
+
+    const replyBox = document.createElement('div');
+    replyBox.className = 'emoji-wrap';
+    replyBox.innerHTML = `
+      <textarea placeholder="Write a reply..."></textarea><br>
+      <input type="file" class="reply-image"><br>
+      <button>Reply</button>
+      <button class="emoji-button" data-target="reply-${thread.id}">😊</button>
+    `;
+
+    const textarea = replyBox.querySelector('textarea');
+    textarea.id = `reply-${thread.id}`;
+
+    replyBox.querySelector('button').onclick = () => {
+      const text = textarea.value;
+      const file = replyBox.querySelector('.reply-image').files[0];
+      replyToThread(thread.id, text, file);
+    };
+
+    threadDiv.appendChild(replyBox);
+    container.appendChild(threadDiv);
+  });
+
+  attachEmojiPickers();
+}
+
+function attachEmojiPickers() {
+  const buttons = document.querySelectorAll('.emoji-button');
+  buttons.forEach(button => {
+    const picker = new EmojiButton({ theme: 'auto' });
+    const targetId = button.getAttribute('data-target');
+
+    picker.on('emoji', emoji => {
+      const textarea = document.getElementById(targetId);
+      textarea.value += emoji;
+    });
+
+    button.addEventListener('click', () => {
+      picker.togglePicker(button);
+    });
+  });
+}
+
+renderThreads();