Merge pull request #2 from sooryadev007/edit-feature

added edit feature to entries
TheOpenInnovator · Oct 8, 2024 · 6b818ca · 6b818ca
2 parents 2ae3944 + 607342a
commit 6b818ca
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 2 deletions.
diff --git a/script.js b/script.js
@@ -50,6 +50,33 @@ 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 = `<textarea class="edit-input">${entry.content}</textarea>`;
+        actionsDiv.innerHTML = `
+            <span class="save-btn" data-id="${entry.id}" title="Save Changes">Save 💾</span>
+            <span class="cancel-btn" data-id="${entry.id}" title="Cancel">Delete ❌</span>
+        `;
+        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);
+    const newContent = document.querySelector(`.edit-input`).value.trim();
+
+    if (entry && newContent) {
+        entry.content = newContent;
+        saveEntries();
+        renderEntries();
+    }
+}
+
 function renderEntries() {
     entriesList.innerHTML = '';
     let currentDate = '';
@@ -66,13 +93,18 @@ function renderEntries() {
         const li = document.createElement('li');
         li.className = 'entry';
         li.innerHTML = `
-            <div class="entry-content">${entry.content}</div>
-            <div class="entry-actions">
+            <div class="entry-content" data-id="${entry.id}">${entry.content}</div>
+            <div class="entry-actions" data-id="${entry.id}">
                 <span class="snapshot-btn" data-id="${entry.id}" title="Create Snapshot">📷</span>
+                <span class="edit-btn" data-id="${entry.id}" title="Edit Entry">✏️</span>  <!-- Edit button -->
                 <span class="delete-btn" data-id="${entry.id}" title="Delete Entry">🗑️</span>
             </div>
         `;
         entriesList.appendChild(li);
+
+        // Add event listeners for edit and delete buttons
+        document.querySelector(`.edit-btn[data-id='${entry.id}']`).addEventListener('click', () => handleEditEntry(entry.id));
+        document.querySelector(`.delete-btn[data-id='${entry.id}']`).addEventListener('click', () => deleteEntry(entry.id));
     });
 }
 

diff --git a/style.css b/style.css
@@ -119,6 +119,10 @@ button:active {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.entry-actions span.edit-btn {
+    color: #4CAF50;
+}
+
 .entry:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -148,6 +152,27 @@ button:active {
     transform: scale(1.2);
 }
 
+.edit-input {
+    width: 95%; 
+    height: auto; 
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px; 
+    background-color: #f9f9f9;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    resize: vertical; 
+    outline: none; 
+}
+
+.edit-input:focus {
+    border-color: #007bff; 
+    background-color: #fff; 
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
 .date-header {
     font-weight: bold;
     margin-top: 30px;