`;
});
subjectDiv.innerHTML = `
${subject}
${itemsHTML}`;
curriculumListDiv.appendChild(subjectDiv);
}
};
const renderProgressTracker = () => {
progressListDiv.innerHTML = '';
const grouped = groupCurriculumBySubject();
if (Object.keys(grouped).length === 0) {
progressListDiv.innerHTML = '
Track your modules here once you\'ve added them.
';
return;
}
for (const subject in grouped) {
const subjectDiv = document.createElement('div');
subjectDiv.className = 'mb-6';
let itemsHTML = '';
grouped[subject].forEach(item => {
itemsHTML += `
${item.module}
Target: ${new Date(item.date + 'T00:00:00').toLocaleDateString()}
`;
});
subjectDiv.innerHTML = `
${subject}
${itemsHTML}`;
progressListDiv.appendChild(subjectDiv);
}
};
// --- EVENT LISTENERS ---
addModuleBtn.addEventListener('click', () => {
const subject = subjectInput.value.trim() || 'General';
const module = moduleInput.value.trim();
const resource = resourceInput.value.trim();
const goal = goalInput.value.trim();
const date = dateInput.value;
if (!module || !resource || !goal || !date) {
alert('Please fill out all fields for the module.');
return;
}
curriculum.push({ id: Date.now(), subject, module, resource, goal, date, status: 'not-started' });
subjectInput.value = '';
moduleInput.value = '';
resourceInput.value = '';
goalInput.value = '';
dateInput.value = '';
renderAll();
});
curriculumListDiv.addEventListener('click', e => {
if (e.target.classList.contains('delete-item-btn')) {
const id = parseInt(e.target.dataset.id);
curriculum = curriculum.filter(item => item.id !== id);
renderAll();
}
});
progressListDiv.addEventListener('change', e => {
if (e.target.classList.contains('status-select')) {
const id = parseInt(e.target.dataset.id);
const newStatus = e.target.value;
const item = curriculum.find(item => item.id === id);
if (item) item.status = newStatus;
renderProgressTracker(); // Just re-render the current view
}
});
// --- PDF DOWNLOAD ---
downloadPdfBtn.addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const grouped = groupCurriculumBySubject();
let finalY = 30;
doc.setFontSize(22);
doc.text('Self-Learning Curriculum', 105, 20, { align: 'center' });
for (const subject in grouped) {
if (finalY > 250) { // Add new page if content overflows
doc.addPage();
finalY = 20;
}
doc.setFontSize(16);
doc.text(subject, 14, finalY);
finalY += 5;
const tableData = grouped[subject].map(item => [
item.module,
item.resource,
item.goal,
new Date(item.date + 'T00:00:00').toLocaleDateString(),
item.status.replace('-', ' ')
]);
doc.autoTable({
head: [['Module', 'Resource', 'Goal', 'Target Date', 'Status']],
body: tableData,
startY: finalY,
theme: 'grid',
styles: { cellPadding: 2, fontSize: 8 },
headStyles: { fillColor: [45, 55, 72] }
});
finalY = doc.lastAutoTable.finalY + 15;
}
doc.save('self-learning-curriculum.pdf');
});
// --- INITIALIZATION ---
loadSampleData();
});
