No discussions yet. Be the first to start one!

'; return; } discussions.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp)); discussions.forEach(thread => { const threadEl = document.createElement('div'); threadEl.className = 'thread-card bg-white p-4 rounded-lg shadow border cursor-pointer'; threadEl.dataset.id = thread.id; threadEl.innerHTML = ` `; threadList.appendChild(threadEl); }); }; const renderPost = (postId) => { const thread = discussions.find(d => d.id === postId); if (!thread) return; let repliesHTML = ''; thread.replies.forEach(reply => { repliesHTML += ` `; }); postView.innerHTML = ` < Back to All Discussions `; showView('post'); }; const showView = (view) => { boardView.classList.toggle('hidden', view !== 'board'); postView.classList.toggle('hidden', view !== 'post'); }; // --- EVENT LISTENERS --- newPostBtn.addEventListener('click', () => newPostModal.classList.remove('hidden')); cancelPostBtn.addEventListener('click', () => newPostModal.classList.add('hidden')); submitPostBtn.addEventListener('click', () => { const author = authorInput.value.trim() || 'Anonymous'; const subject = subjectInput.value.trim(); const title = titleInput.value.trim(); const body = bodyInput.value.trim(); if (!subject || !title || !body) { alert('Please fill out all required fields.'); return; } discussions.push({ id: Date.now(), author, subject, title, body, timestamp: new Date().toLocaleString(), replies: [] }); authorInput.value = ''; subjectInput.value = ''; titleInput.value = ''; bodyInput.value = ''; newPostModal.classList.add('hidden'); renderBoard(); }); threadList.addEventListener('click', (e) => { const threadCard = e.target.closest('.thread-card'); if (threadCard) { renderPost(parseInt(threadCard.dataset.id)); } }); postView.addEventListener('click', (e) => { if (e.target.id === 'back-to-board-btn') { showView('board'); } if (e.target.id === 'submit-reply-btn') { const postId = parseInt(e.target.dataset.id); const author = document.getElementById('reply-author').value.trim() || 'Anonymous'; const body = document.getElementById('reply-body').value.trim(); if (!body) return; const thread = discussions.find(d => d.id === postId); if (thread) { thread.replies.push({ author, body, timestamp: new Date().toLocaleString() }); renderPost(postId); } } if (e.target.classList.contains('download-pdf-btn')) { downloadDiscussionAsPDF(parseInt(e.target.dataset.id)); } }); // --- PDF DOWNLOAD --- const downloadDiscussionAsPDF = (postId) => { const thread = discussions.find(d => d.id === postId); if (!thread) return; const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(18); doc.text(thread.title, 105, 20, { align: 'center' }); doc.setFontSize(10); doc.text(`Subject: ${thread.subject} | By: ${thread.author} | On: ${thread.timestamp}`, 105, 28, { align: 'center' }); doc.setFontSize(12); const bodyLines = doc.splitTextToSize(thread.body, 180); doc.text(bodyLines, 14, 45); let finalY = 45 + (bodyLines.length * 5) + 10; if (thread.replies.length > 0) { doc.setFontSize(14); doc.text('Replies', 14, finalY); finalY += 5; const replyData = thread.replies.map(reply => [ `${reply.author} (${reply.timestamp})`, reply.body ]); doc.autoTable({ head: [['Author & Time', 'Reply']], body: replyData, startY: finalY, theme: 'grid' }); } doc.save(`discussion-${thread.id}.pdf`); }; // --- INITIALIZATION --- loadSampleData(); });