diff --git a/README.md b/README.md index 6d104b4..2100c4f 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ A simple notes app that runs entirely in your web browser. There is nothing to i - Your notes are listed on the left. The editor for the selected note is on the right. - Everything you type is saved automatically. - You can search your notes, create new ones, and delete ones you no longer need. +- Click **Download all notes** (at the bottom of the list) to save a copy of every note in a single text file. This is a handy way to back up your notes. ## How to start it diff --git a/index.html b/index.html index a18bd35..a71424b 100644 --- a/index.html +++ b/index.html @@ -100,6 +100,13 @@ overflow: hidden; text-overflow: ellipsis; } + #sidebar-bottom { + padding: 10px 12px; + border-top: 1px solid var(--border); + } + #download-btn { width: 100%; } + button:disabled { opacity: 0.5; cursor: default; } + button:disabled:hover { border-color: var(--border); } .empty-list { padding: 20px 14px; color: var(--muted); @@ -169,6 +176,9 @@ +
@@ -204,6 +214,7 @@ var statusEl = $("status"); var deleteBtn = $("delete-btn"); var placeholderEl = $("placeholder"); + var downloadBtn = $("download-btn"); // ---------- Storage ---------- @@ -341,6 +352,7 @@ } function render() { + downloadBtn.disabled = notes.length === 0; renderList(); renderEditor(); } @@ -377,6 +389,42 @@ save(); } + function fullDate(ts) { + return ts ? new Date(ts).toLocaleString() : "unknown"; + } + + function downloadAll() { + if (saveTimer) save(); + if (notes.length === 0) return; + + var divider = "\n\n" + new Array(41).join("=") + "\n\n"; + var text = sortedNotes().map(function (note) { + var title = displayTitle(note); + return title + "\n" + + new Array(title.length + 1).join("-") + "\n" + + "Created: " + fullDate(note.created) + "\n" + + "Last edited: " + fullDate(note.updated) + "\n\n" + + (note.body || "").replace(/\r\n?/g, "\n"); + }).join(divider) + "\n"; + + // Windows-style line endings so the file opens nicely everywhere; + // the leading BOM tells older programs the text is UTF-8. + text = "\ufeff" + text.replace(/\n/g, "\r\n"); + + var d = new Date(); + var pad = function (n) { return (n < 10 ? "0" : "") + n; }; + var fileName = "notes-" + d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) + ".txt"; + + var url = URL.createObjectURL(new Blob([text], { type: "text/plain;charset=utf-8" })); + var a = document.createElement("a"); + a.href = url; + a.download = fileName; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + setTimeout(function () { URL.revokeObjectURL(url); }, 1000); + } + function onEdit() { var note = findNote(selectedId); if (!note) return; @@ -392,6 +440,7 @@ $("new-btn").addEventListener("click", newNote); $("placeholder-new").addEventListener("click", newNote); deleteBtn.addEventListener("click", deleteNote); + downloadBtn.addEventListener("click", downloadAll); titleEl.addEventListener("input", onEdit); bodyEl.addEventListener("input", onEdit); searchEl.addEventListener("input", renderList);