No courses added yet. Go to the 'Manage Courses' tab to add your first course.

`; pdfDownloadBtn.classList.add('hidden'); return; } pdfDownloadBtn.classList.remove('hidden'); courses.forEach(course => { const percentage = course.total > 0 ? (course.completed / course.total) * 100 : 0; const card = document.createElement('div'); card.className = 'bg-white p-5 rounded-lg shadow border flex flex-col'; card.innerHTML = `

${course.name}

`; dashboardContainer.appendChild(card); }); }; /** * Renders the list of courses in the management tab. */ const renderManagementList = () => { manageListContainer.innerHTML = ''; if (courses.length === 0) { manageListContainer.innerHTML = `

No courses to manage.

`; return; } courses.forEach(course => { const item = document.createElement('div'); item.className = 'bg-white p-4 rounded-md shadow-sm border flex items-center justify-between'; item.innerHTML = ` Delete `; manageListContainer.appendChild(item); }); }; /** * Handles adding a new course. */ const handleAddCourse = (e) => { e.preventDefault(); const name = courseNameInput.value.trim(); const total = parseInt(totalLessonsInput.value, 10); if (name && total > 0) { const newCourse = { id: Date.now(), name, total, completed: 0 }; courses.push(newCourse); saveCourses(); renderAll(); addCourseForm.reset(); showMessage('Course added successfully!', 'success'); } else { showMessage('Please provide a valid course name and total lessons.'); } }; /** * Handles dashboard interactions (increase/decrease progress). */ const handleDashboardClick = (e) => { const target = e.target.closest('button'); if (!target) return; const id = parseInt(target.dataset.id, 10); const action = target.dataset.action; const course = courses.find(c => c.id === id); if (course) { if (action === 'increase' && course.completed < course.total) { course.completed++; } else if (action === 'decrease' && course.completed > 0) { course.completed--; } saveCourses(); renderAll(); } }; /** * Handles management list interactions (delete). */ const handleManageListClick = (e) => { const target = e.target.closest('button'); if (!target || target.dataset.action !== 'delete') return; const id = parseInt(target.dataset.id, 10); if (confirm('Are you sure you want to delete this course?')) { courses = courses.filter(c => c.id !== id); saveCourses(); renderAll(); showMessage('Course deleted.', 'success'); } }; /** * Generates and downloads a PDF of the dashboard. */ const downloadPDF = async () => { const { jsPDF } = window.jspdf; const pdfOutput = document.getElementById('pdf-output'); // Temporarily hide non-PDF elements const elementsToHide = pdfOutput.querySelectorAll('.no-print'); elementsToHide.forEach(el => el.style.display = 'none'); const canvas = await html2canvas(pdfOutput, { scale: 2, backgroundColor: '#ffffff' }); // Restore hidden elements elementsToHide.forEach(el => el.style.display = 'flex'); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgProps = pdf.getImageProperties(imgData); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; pdf.addImage(imgData, 'PNG', 40, 40, pdfWidth - 80, pdfHeight - 80); pdf.save('Course-Progress-Report.pdf'); }; // --- Event Listeners --- addCourseForm.addEventListener('submit', handleAddCourse); dashboardContainer.addEventListener('click', handleDashboardClick); manageListContainer.addEventListener('click', handleManageListClick); pdfDownloadBtn.addEventListener('click', downloadPDF); // --- Initial Load --- loadCourses(); renderAll(); showTab('dashboardTab'); });