add task delete modal and alert

frontend/dashboard.html

@@ -156,7 +156,29 @@
       </div>
     </div>
   </footer>
-    <!-- Modal -->
+    <!-- Toast-style alert container, populated by showAlert() in api.js -->
+  <div id="alertContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1080;"></div>
+
+  <!-- Delete confirmation modal -->
+  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteTaskModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <h1 class="modal-title fs-5" id="deleteTaskModalLabel">Delete Task</h1>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                  <p class="mb-0">Are you sure you want to delete this task? This action cannot be undone.</p>
+              </div>
+              <div class="modal-footer">
+                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                  <button id="confirmDeleteButton" type="button" class="btn btn-danger">Delete</button>
+              </div>
+          </div>
+      </div>
+  </div>
+
+  <!-- Modal -->
   <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content">

frontend/js/api.js

@@ -42,6 +42,20 @@ function resetForm() {
   taskForm.reset();
 }
 
+function showAlert(message, variant = 'success') {
+  const container = document.getElementById('alertContainer');
+  if (!container) return;
+  const alert = document.createElement('div');
+  alert.className = `alert alert-${variant} alert-dismissible fade show shadow-sm`;
+  alert.role = 'alert';
+  alert.innerHTML = `
+    ${message}
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  `;
+  container.appendChild(alert);
+  setTimeout(() => bootstrap.Alert.getOrCreateInstance(alert).close(), 3000);
+}
+
 const sortButton = document.getElementById("sortSelect");
 window.addEventListener("DOMContentLoaded", () => {
   sortButton.value = "default";
@@ -93,7 +107,11 @@ taskForm.addEventListener("submit", (event) => {
 
     else if (event.target.classList.contains("delete")) {
       const taskId = event.target.getAttribute("data-id");
-      deleteTask(taskId);
+      const confirmButton = document.getElementById('confirmDeleteButton');
+      confirmButton.addEventListener('click', async () => {
+        await deleteTask(taskId);
+        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
+      }, { once: true });
     }
     else if (event.target.classList.contains('edit')) {
       const task = {
@@ -148,7 +166,7 @@ function formatTask(task) {
   li.innerHTML = `
     <div class="d-flex justify-content-between align-items-start">
       <h4 class="${done} col-11">${task.title}</h4>
-      <button data-id="${task._id}" type="button" class="btn-close delete" aria-label="Close"></button>
+      <button data-id="${task._id}" type="button" class="btn-close delete" data-bs-toggle="modal" data-bs-target="#deleteModal" aria-label="Close"></button>
     </div>
     <p class="${done}">${task.description}</p>
     <p class="${done}"><strong>Due: </strong>${new Date(task.dueDate).toLocaleDateString()}</p>
@@ -328,6 +346,7 @@ async function deleteTask(taskId) {
     const data = await response.json();
     console.log({ message: "Deleted Task:", Task: data });
     displayTasks();
+    showAlert('Task deleted successfully.');
 
   } catch (error) {
     console.error("Error:", error);