add task delete modal and alert

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);