lesson 7

nodeJS/Learning/05/public/js/todo.js

@@ -1,15 +1,51 @@
 //fetch: send a url request, client side rendering
-//update the list, by default: fetch uses get
-fetch('/get-todos', {method: 'GET'}). then((response) => {
-    response.json(). then((data) => {
-        const ol = document.querySelector('ol');
-        data.forEach((item) => {
-            //Create li
-            const li = document.createElement('li');
-            //add text to li
-            li.textContent = item;
-            //add li underneath (child) ol
-            ol.appendChild(li);
-        })
-    });
-});
+//update the list, by default: fetch uses "get"
+fetch("/get-todos", { method: "GET" }).then((response) => {
+	response.json().then((data) => {
+		const ol = document.querySelector("ol");
+		data.forEach((item) => {
+			//Create li
+			const li = document.createElement("li");
+			//add text to li
+			li.textContent = item;
+
+			// Create button
+			const button = document.createElement("button");
+			button.type = "submit";
+
+			// Add icon to button
+			const icon = document.createElement("i");
+			icon.className = "fa-solid fa-delete-left";
+
+			// Append icon to button
+			button.appendChild(icon);
+
+			// Append button to li
+			li.appendChild(button);
+
+			// Add delete functionality
+			button.addEventListener("click", () => {
+				// Send DELETE request
+				fetch(`/delete-todo`, {
+					method: "DELETE",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({ todo: item }),
+				})
+					.then((response) => {
+						if (response.ok) {
+							// Remove the item from the DOM
+							li.remove();
+						} else {
+							console.error("Failed to delete to-do item");
+						}
+					})
+					.catch((error) => console.error("Error:", error));
+			});
+
+			// Append li underneath (child) ol
+			ol.appendChild(li);
+		});
+	});
+});