From ecd7b650bd0210419490355a585c9ca2fb4443f1 Mon Sep 17 00:00:00 2001 From: tuffahni Date: Tue, 31 Dec 2024 00:12:59 +0000 Subject: [PATCH] lesson 8 --- nodeJS/Learning/06/public/css/pages/index.css | 197 +++++++++--------- nodeJS/Learning/06/public/js/index.js | 24 +++ nodeJS/Learning/06/src/index.ts | 31 ++- nodeJS/Learning/06/src/views/index.ejs | 14 +- 4 files changed, 151 insertions(+), 115 deletions(-) diff --git a/nodeJS/Learning/06/public/css/pages/index.css b/nodeJS/Learning/06/public/css/pages/index.css index 0bb7fbd..9fc54fa 100644 --- a/nodeJS/Learning/06/public/css/pages/index.css +++ b/nodeJS/Learning/06/public/css/pages/index.css @@ -5,21 +5,21 @@ *, *::before, *::after { - box-sizing: border-box; + box-sizing: border-box; } * { - margin: 0; + margin: 0; } html, body { - height: 100%; + height: 100%; } body { - line-height: 1.5; - -webkit-font-smoothing: antialiased; + line-height: 1.5; + -webkit-font-smoothing: antialiased; } img, @@ -27,15 +27,15 @@ picture, video, canvas, svg { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } input, button, textarea, select { - font: inherit; + font: inherit; } p, @@ -45,17 +45,17 @@ h3, h4, h5, h6 { - overflow-wrap: break-word; + overflow-wrap: break-word; } #root, #__next { - isolation: isolate; + isolation: isolate; } body { - background-color: rgb(238, 213, 232); - color: rgb(92, 89, 92); + background-color: rgb(238, 213, 232); + color: rgb(92, 89, 92); } h1, @@ -63,157 +63,158 @@ h2, h3, h4, h5 { - font-family: "EB Garamond", serif; + font-family: "EB Garamond", serif; } p { - font-family: "Cutive Mono", monospace; + font-family: "Cutive Mono", monospace; } .title-text { - font-size: 30px; - margin-bottom: 0px; + font-size: 30px; + margin-bottom: 0px; } img { - width: 10%; - height: auto; - margin-top: 5px; + width: 10%; + height: auto; + margin-top: 5px; } .form-submit { - background-color: rgb(255, 124, 192); + background-color: rgb(255, 124, 192); } .form-submit:hover { - background: rgb(252, 27, 121); - cursor: pointer; + background: rgb(252, 27, 121); + cursor: pointer; } form input, form textarea { - font-family: "Cutive Mono", monospace; + font-family: "Cutive Mono", monospace; } .todo-input { - text-align: left; - margin-top: 30px; + text-align: left; + margin-top: 30px; } label, input, button { - display: block; - width: 100%; - padding: 0; - border: none; - outline: none; - box-sizing: border-box; + display: block; + width: 100%; + padding: 0; + border: none; + outline: none; + box-sizing: border-box; } label::placeholder, input::placeholder, button::placeholder { - color: rgb(92, 89, 92); + color: rgb(92, 89, 92); } label { - margin-bottom: 4px; + margin-bottom: 4px; } label:nth-of-type(2) { - margin-top: 12px; + margin-top: 12px; } input { - background: rgb(255, 255, 255); - padding: 10px; - padding-left: 20px; - height: 50px; - font-size: 14px; - border-radius: 50px; - box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px rgb(255, 255, 255); + background: rgb(255, 255, 255); + padding: 10px; + padding-left: 20px; + height: 50px; + font-size: 14px; + border-radius: 50px; + box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px rgb(255, 255, 255); } .form-submit { - color: rgb(255, 255, 255); - font-family: "Cutive Mono", monospace; - font-size: 16px; - margin: 20px auto; - height: 40px; - width: 100px; - border-radius: 20px; - cursor: pointer; - display: block; + color: rgb(255, 255, 255); + font-family: "Cutive Mono", monospace; + font-size: 16px; + margin: 20px auto; + height: 40px; + width: 100px; + border-radius: 20px; + cursor: pointer; + display: block; } .container { - display: flex; - flex-direction: column; - align-content: space-around; - align-items: center; - justify-content: flex-end; - flex-wrap: nowrap; + display: flex; + flex-direction: column; + align-content: space-around; + align-items: center; + justify-content: flex-end; + flex-wrap: nowrap; } .todo-container { - max-width: 300px; - font-family: "Cutive Mono", monospace; - background-color: rgb(238, 213, 232); - border: 4px solid hsl(345, 100%, 91%); - border-radius: 30px; - box-shadow: 6px 4px 10px rgb(0, 0, 0); - position: relative; - padding: 20px; - background-image: url("/images/polka.jpg"); - background-size: cover; - background-repeat: no-repeat; - background-position: center; + max-width: 300px; + font-family: "Cutive Mono", monospace; + background-color: rgb(238, 213, 232); + border: 4px solid hsl(345, 100%, 91%); + border-radius: 30px; + box-shadow: 6px 4px 10px rgb(0, 0, 0); + position: relative; + padding: 20px; + background-image: url("/images/polka.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; } .todo-container .inner-todo { - background-color: rgb(238, 213, 232); - padding: 20px; - border-radius: 20px; + background-color: rgb(238, 213, 232); + padding: 20px; + border-radius: 20px; } .todo-container h1 { - font-size: 25px; - font-family: "EB Garamond", serif; - color: #545353; - margin-top: 10px; - font-weight: bold; + font-size: 25px; + font-family: "EB Garamond", serif; + color: #545353; + margin-top: 10px; + font-weight: bold; } ol { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } ol li { - color: #545353; - margin: 10px; - background-color: rgb(255, 255, 255); - padding: 20px; - border-radius: 20px; - text-align: left; - font-family: "Cutive Mono", monospace; - min-width: 250px; - display: flex; - flex-direction: row; - justify-content: space-between; + color: #545353; + margin: 10px; + background-color: rgb(255, 255, 255); + padding: 20px; + border-radius: 20px; + text-align: left; + font-family: "Cutive Mono", monospace; + min-width: 200px; + max-width: 300px; + display: flex; + flex-direction: row; + justify-content: space-between; } ol li i { - font-size: 20px; + font-size: 20px; } ol li button { - background-color: rgb(255, 255, 255); - color: rgb(61, 61, 61); - cursor: pointer; - width: 15px; + background-color: rgb(255, 255, 255); + color: rgb(61, 61, 61); + cursor: pointer; + width: 15px; } .decor { - position: absolute; - top: 50px; - left: -50px; + position: absolute; + top: 20px; + left: -50px; } .decor img { - width: 100px; + width: 100px; } /*# sourceMappingURL=index.css.map */ diff --git a/nodeJS/Learning/06/public/js/index.js b/nodeJS/Learning/06/public/js/index.js index e69de29..098fe53 100644 --- a/nodeJS/Learning/06/public/js/index.js +++ b/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)); +} diff --git a/nodeJS/Learning/06/src/index.ts b/nodeJS/Learning/06/src/index.ts index 97680b4..3372202 100644 --- a/nodeJS/Learning/06/src/index.ts +++ b/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}`); diff --git a/nodeJS/Learning/06/src/views/index.ejs b/nodeJS/Learning/06/src/views/index.ejs index 8418a94..12dcef7 100644 --- a/nodeJS/Learning/06/src/views/index.ejs +++ b/nodeJS/Learning/06/src/views/index.ejs @@ -51,11 +51,13 @@

To do list

    - - - + <% todos.forEach(todo => { %> +
  1. + <%= todo %> +
    2. + <% }); %>
@@ -69,5 +71,5 @@ - +