diff --git a/script.js b/script.js index dd0509f..09bdadc 100644 --- a/script.js +++ b/script.js @@ -14,10 +14,14 @@ function saveEntries() { localStorage.setItem("entries", JSON.stringify(entries)); } +function replaceLineBreak(content) { + return content.replaceAll("\n", "
"); +} + function addEntry(content) { const newEntry = { id: Date.now(), - content: content, + content: replaceLineBreak(content), date: new Date().toLocaleDateString(), }; entries.unshift(newEntry); @@ -28,6 +32,7 @@ function addEntry(content) { function editEntry(id) { console.log("Id to be edited", id); const entryDiv = document.querySelector(`.entry-content[data-id='${id}']`); + const entryActions = document.querySelector(`.entry-actions[data-id='${id}']`); console.log(entryDiv.innerText); const textarea = document.createElement('textarea'); @@ -35,6 +40,7 @@ function editEntry(id) { textarea.placeholder = 'Enter text here...'; textarea.value = entryDiv.innerText; + entryActions.style.display = 'none'; // Hide the actions entryDiv.style.display = 'none'; // Hide the original content entryDiv.parentNode.insertBefore(textarea, entryDiv.nextSibling); // Insert textarea after entryDiv @@ -45,7 +51,7 @@ function editEntry(id) { // Update the content in the entries array const index = entries.findIndex(entry => entry.id === id); if (index !== -1) { - entries[index].content = newContent; // Update the content + entries[index].content = replaceLineBreak(newContent); // Update the content saveEntries(entries); // Save the updated entries // Re-render entries after saving @@ -81,35 +87,6 @@ function deleteEntry(id) { }); } -function handleEditEntry(id) { -const entry = entries.find(e => e.id === id); - -if (entry) { - const entryDiv = document.querySelector(`.entry-content[data-id='${id}']`); - const actionsDiv = document.querySelector(`.entry-actions[data-id='${id}']`); - entryDiv.innerHTML = ``; - - actionsDiv.innerHTML = ` - Save 💾 - Delete ❌ - `; - document.querySelector(`.save-btn[data-id='${id}']`).addEventListener('click', () => handleSaveEntry(id)); - document.querySelector(`.cancel-btn[data-id='${id}']`).addEventListener('click', renderEntries); -} -} - -function handleSaveEntry(id) { -const entry = entries.find(e => e.id === id); - - - -if (entry && newContent) { - - saveEntries(); - renderEntries(); -} -} - function renderEntries() { entriesList.innerHTML = ""; let currentDate = ""; @@ -169,21 +146,25 @@ function createSnapshot(entry) { ctx.fillStyle = "#ffff00"; ctx.font = "20px Arial"; - const words = entry.content.split(" "); - let line = ""; + const contentLines = entry.content.split("
"); let y = 80; - for (let i = 0; i < words.length; i++) { - const testLine = line + words[i] + " "; - const metrics = ctx.measureText(testLine); - if (metrics.width > width - 60 && i > 0) { - ctx.fillText(line, 30, y); - line = words[i] + " "; - y += 30; - } else { - line = testLine; + for(let contentLine of contentLines) { + const words = contentLine.split(' '); + let line = ''; + for (let i = 0; i < words.length; i++) { + const testLine = line + words[i] + ' '; + const metrics = ctx.measureText(testLine); + if (metrics.width > width - 60 && i > 0) { + ctx.fillText(line, 30, y); + line = words[i] + ' '; + y += 30; + } else { + line = testLine; + } } + ctx.fillText(line, 30, y); + y += 30; } - ctx.fillText(line, 30, y); // Add website name with glow effect ctx.fillStyle = "#ffffff"; @@ -252,9 +233,9 @@ entryForm.addEventListener("submit", (e) => { entriesList.addEventListener("click", (e) => { if (e.target.classList.contains("delete-btn") ) { const id = parseInt(e.target.getAttribute("data-id")); - + deleteEntry(id); - + } else if (e.target.classList.contains("snapshot-btn")) { const id = parseInt(e.target.getAttribute("data-id")); const entry = entries.find((entry) => entry.id === id);