Online Productivity-Oriented Notes App

Productivity-Oriented Notes App

Organize your tasks, notes, and ideas efficiently.

${line}

`; }).join(''); }; const renderNotes = () => { notesGrid.innerHTML = ''; const searchTerm = searchInput.value.toLowerCase(); const statusFilter = filterStatus.value; const priorityFilter = filterPriority.value; const filteredNotes = notes.filter(note => { const titleMatch = note.title.toLowerCase().includes(searchTerm); const contentMatch = note.content.toLowerCase().includes(searchTerm); const statusMatch = statusFilter === 'all' || note.status === statusFilter; const priorityMatch = priorityFilter === 'all' || note.priority === priorityFilter; return (titleMatch || contentMatch) && statusMatch && priorityMatch; }); // Sort by due date, earlier first filteredNotes.sort((a, b) => (a.dueDate || '9999-12-31') > (b.dueDate || '9999-12-31') ? 1 : -1); if (filteredNotes.length === 0) { noNotesMessage.classList.remove('hidden'); } else { noNotesMessage.classList.add('hidden'); } filteredNotes.forEach(note => { const noteCard = document.createElement('div'); const priorityClass = getPriorityClass(note.priority); const dueDate = note.dueDate ? new Date(note.dueDate + 'T00:00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'No due date'; noteCard.className = `bg-white rounded-lg shadow-md p-5 flex flex-col border-l-4 ${priorityClass}`; noteCard.innerHTML = `

${note.title}

${parseContentToHTML(note.content)}
Status: ${note.status}
Priority: ${note.priority}
Due: ${dueDate}
`; notesGrid.appendChild(noteCard); }); }; // --- MODAL & FORM LOGIC --- app.openModal = (note = null) => { noteForm.reset(); if (note) { modalTitle.textContent = 'Edit Note'; noteIdInput.value = note.id; noteTitleInput.value = note.title; noteContentInput.value = note.content; noteStatusInput.value = note.status; notePriorityInput.value = note.priority; noteDueDateInput.value = note.dueDate; } else { modalTitle.textContent = 'Create a New Note'; noteIdInput.value = ''; notePriorityInput.value = 'Medium'; noteStatusInput.value = 'To Do'; } noteModal.classList.remove('hidden'); }; app.closeModal = () => { noteModal.classList.add('hidden'); }; app.handleFormSubmit = () => { if (!noteTitleInput.value) { alert('Title is required.'); return; } const id = noteIdInput.value; const noteData = { title: noteTitleInput.value, content: noteContentInput.value, status: noteStatusInput.value, priority: notePriorityInput.value, dueDate: noteDueDateInput.value, lastModified: Date.now() }; if (id) { const index = notes.findIndex(n => n.id === id); notes[index] = { ...notes[index], ...noteData }; } else { notes.push({ id: 'note_' + Date.now(), ...noteData }); } saveNotes(); renderNotes(); app.closeModal(); }; // --- CRUD ACTIONS --- app.editNote = (id) => { const note = notes.find(n => n.id === id); if (note) app.openModal(note); }; app.deleteNote = (id) => { if (confirm('Are you sure you want to delete this note?')) { notes = notes.filter(n => n.id !== id); saveNotes(); renderNotes(); } }; // --- PDF DOWNLOAD --- app.downloadAllAsPDF = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(20); doc.text("Productivity Notes Report", 105, 20, null, null, 'center'); doc.setFontSize(10); doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 105, 27, null, null, 'center'); const head = [['Title', 'Status', 'Priority', 'Due Date']]; const body = notes.map(note => [ note.title, note.status, note.priority, note.dueDate || 'N/A' ]); doc.autoTable({ startY: 35, head: head, body: body, theme: 'grid', headStyles: { fillColor: [22, 160, 133] } }); doc.save('productivity_notes.pdf'); }; // --- EVENT LISTENERS --- searchInput.addEventListener('keyup', renderNotes); filterStatus.addEventListener('change', renderNotes); filterPriority.addEventListener('change', renderNotes); // --- INITIALIZATION --- loadNotes(); renderNotes(); });
Scroll to Top