lesson 8

nodeJS/Learning/06/public/css/pages/index.css

@@ -192,7 +192,8 @@ ol li {
 	border-radius: 20px;
 	text-align: left;
 	font-family: "Cutive Mono", monospace;
-  min-width: 250px;
+	min-width: 200px;
+	max-width: 300px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -209,7 +210,7 @@ ol li button {
 
 .decor {
 	position: absolute;
-  top: 50px;
+	top: 20px;
 	left: -50px;
 }
 .decor img {

nodeJS/Learning/06/public/js/index.js

@@ -0,0 +1,24 @@
+// Function to delete a todo item
+function deleteTodo(todo) {
+	fetch("/todo", {
+		method: "DELETE",
+		headers: {
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({ todo }),
+	})
+		.then((response) => {
+			if (response.ok) {
+				// Remove the list item and button from the DOM
+				const listItem = [...document.querySelectorAll("li")].find((li) =>
+					li.textContent.trim().startsWith(todo)
+				);
+				if (listItem) {
+					listItem.remove();
+				}
+			} else {
+				console.error("Failed to delete the todo item.");
+			}
+		})
+		.catch((error) => console.error("Error deleting todo:", error));
+}

nodeJS/Learning/06/src/index.ts

@@ -20,21 +20,21 @@ app.set("view engine", "ejs");
 app.use(express.static(`${__dirname}/../public`));
 
 //check and send index ejs
+//Query postgres database to get all todos (async await)
 app.get("/", (_req: Request, res: Response): void => {
-	let todos: string[] = [];
-
-	//Query postgres database to get all todos (async await)
-	pg.query("SELECT * FROM todos", async (err: Error, result: any) => {
+	pg.query("SELECT * FROM todos", (err: Error, result: any) => {
 		if (err) {
 			console.log("Error querying todos", err);
+			res.status(500).send("Internal Server Error");
 			return;
 		}
 
-		todos = result.rows.map((row: any) => row.todo);
-	}
+		// Extract all rows from the database
+		const todos = result.rows.map((row: { todo: string }) => row.todo);
 
-		res.render("index",{
-		todos,
+		res.render("index", {
+			todos, // Pass todos to the template
+		});
 	});
 });
 
@@ -54,9 +54,18 @@ app.post("/form-action", (req: Request, res: Response): void => {
 	res.redirect("/");
 });
 
-// app.delete("/delete-todo/:todo", (req: Request, res: Response): void => {
-// 	//delete todo from postgres
-// });
+app.delete("/todo", (req: Request, res: Response): void => {
+	const { todo } = req.body;
+
+	pg.query("DELETE FROM todos WHERE todo = $1", [todo], (err: Error) => {
+		if (err) {
+			console.log("Error deleting todo", err);
+			return;
+		}
+
+		res.status(200).send({ message: "Todo deleted successfully" });
+	});
+});
 
 app.listen(port, (): void => {
 	console.log(`Server is running on port ${port}`);

nodeJS/Learning/06/src/views/index.ejs

@@ -51,11 +51,13 @@
 						<h1>To do list</h1>
 						<ol>
 							<!-- rendering the todos -->
-							<!-- <% todos.forEach(todo => { %> <li><%= todo %></li> <% }); %> -->
-							<!-- click button, go to app.delete, then delete something -->
-							<!-- <li>Learn from Ronald</li>
-                            <li>Watch movies</li>
-                            <li>Sleep</li> -->
+							<% todos.forEach(todo => { %>
+							<li>
+								<%= todo %> 
+								<button onclick="deleteTodo('<%= todo %>')" class="delete-button">
+								<i class="fa-solid fa-delete-left"></i>
+							</li>
+							<% }); %>
 						</ol>
 						<div class="decor">
 							<img src="images/cryinggirl.gif" />
@@ -69,5 +71,5 @@
 		</section>
 	</body>
 
-	<!-- <script src="js/todo.js"></script> -->
+	<script src="js/index.js"></script>
 </html>