diff --git a/forum/script.js b/forum/script.js new file mode 100644 index 0000000..f2a4a9a --- /dev/null +++ b/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 = `

${thread.title}

`; + + thread.posts.forEach(post => { + const postDiv = document.createElement('div'); + postDiv.className = 'reply'; + postDiv.innerHTML = ` +

${post.content}

+ ${post.image ? `` : ''} + ${post.date} + `; + threadDiv.appendChild(postDiv); + }); + + const replyBox = document.createElement('div'); + replyBox.className = 'emoji-wrap'; + replyBox.innerHTML = ` +
+
+ + + `; + + 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();