52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
//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;
|
|
|
|
// 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);
|
|
});
|
|
});
|
|
});
|