made the edit input more professional

TheOpenInnovator · Oct 8, 2024 · 96104df · 96104df
1 parent 5aa5ffb
commit 96104df
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/script.js b/script.js
@@ -41,8 +41,8 @@ function handleEditEntry(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">💾</span>
-            <span class="cancel-btn" data-id="${entry.id}" title="Cancel">❌</span>
+            <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);

diff --git a/style.css b/style.css
@@ -152,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;