LeafPig/Web-Dev
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lesson 8

Browse Source
This commit is contained in:
tuffahni 2024-12-31 00:12:59 +00:00
parent c6d68334be
commit ecd7b650bd
4 changed files with 151 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
nodeJS/Learning/06/public/css/pages/index.css
View File

@ -5,21 +5,21 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
} }
* { * {
margin: 0; margin: 0;
} }
html, html,
body { body {
height: 100%; height: 100%;
} }
body { body {
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
img, img,
@ -27,15 +27,15 @@ picture,
video, video,
canvas, canvas,
svg { svg {
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
input, input,
button, button,
textarea, textarea,
select { select {
font: inherit; font: inherit;
} }
p, p,
@ -45,17 +45,17 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
#root, #root,
#__next { #__next {
isolation: isolate; isolation: isolate;
} }
body { body {
background-color: rgb(238, 213, 232); background-color: rgb(238, 213, 232);
color: rgb(92, 89, 92); color: rgb(92, 89, 92);
} }
h1, h1,
@ -63,157 +63,158 @@ h2,
h3, h3,
h4, h4,
h5 { h5 {
font-family: "EB Garamond", serif; font-family: "EB Garamond", serif;
} }
p { p {
font-family: "Cutive Mono", monospace; font-family: "Cutive Mono", monospace;
} }
.title-text { .title-text {
font-size: 30px; font-size: 30px;
margin-bottom: 0px; margin-bottom: 0px;
} }
img { img {
width: 10%; width: 10%;
height: auto; height: auto;
margin-top: 5px; margin-top: 5px;
} }
.form-submit { .form-submit {
background-color: rgb(255, 124, 192); background-color: rgb(255, 124, 192);
} }
.form-submit:hover { .form-submit:hover {
background: rgb(252, 27, 121); background: rgb(252, 27, 121);
cursor: pointer; cursor: pointer;
} }
form input, form input,
form textarea { form textarea {
font-family: "Cutive Mono", monospace; font-family: "Cutive Mono", monospace;
} }
.todo-input { .todo-input {
text-align: left; text-align: left;
margin-top: 30px; margin-top: 30px;
} }
label, label,
input, input,
button { button {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
border: none; border: none;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
} }
label::placeholder, label::placeholder,
input::placeholder, input::placeholder,
button::placeholder { button::placeholder {
color: rgb(92, 89, 92); color: rgb(92, 89, 92);
} }
label { label {
margin-bottom: 4px; margin-bottom: 4px;
} }
label:nth-of-type(2) { label:nth-of-type(2) {
margin-top: 12px; margin-top: 12px;
} }
input { input {
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
padding: 10px; padding: 10px;
padding-left: 20px; padding-left: 20px;
height: 50px; height: 50px;
font-size: 14px; font-size: 14px;
border-radius: 50px; border-radius: 50px;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px rgb(255, 255, 255); box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px rgb(255, 255, 255);
} }
.form-submit { .form-submit {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-family: "Cutive Mono", monospace; font-family: "Cutive Mono", monospace;
font-size: 16px; font-size: 16px;
margin: 20px auto; margin: 20px auto;
height: 40px; height: 40px;
width: 100px; width: 100px;
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
display: block; display: block;
} }
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: space-around; align-content: space-around;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.todo-container { .todo-container {
max-width: 300px; max-width: 300px;
font-family: "Cutive Mono", monospace; font-family: "Cutive Mono", monospace;
background-color: rgb(238, 213, 232); background-color: rgb(238, 213, 232);
border: 4px solid hsl(345, 100%, 91%); border: 4px solid hsl(345, 100%, 91%);
border-radius: 30px; border-radius: 30px;
box-shadow: 6px 4px 10px rgb(0, 0, 0); box-shadow: 6px 4px 10px rgb(0, 0, 0);
position: relative; position: relative;
padding: 20px; padding: 20px;
background-image: url("/images/polka.jpg"); background-image: url("/images/polka.jpg");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.todo-container .inner-todo { .todo-container .inner-todo {
background-color: rgb(238, 213, 232); background-color: rgb(238, 213, 232);
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
} }
.todo-container h1 { .todo-container h1 {
font-size: 25px; font-size: 25px;
font-family: "EB Garamond", serif; font-family: "EB Garamond", serif;
color: #545353; color: #545353;
margin-top: 10px; margin-top: 10px;
font-weight: bold; font-weight: bold;
} }
ol { ol {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
ol li { ol li {
color: #545353; color: #545353;
margin: 10px; margin: 10px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
padding: 20px; padding: 20px;
border-radius: 20px; border-radius: 20px;
text-align: left; text-align: left;
font-family: "Cutive Mono", monospace; font-family: "Cutive Mono", monospace;
min-width: 250px; min-width: 200px;
display: flex; max-width: 300px;
flex-direction: row; display: flex;
justify-content: space-between; flex-direction: row;
justify-content: space-between;
} }
ol li i { ol li i {
font-size: 20px; font-size: 20px;
} }
ol li button { ol li button {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
color: rgb(61, 61, 61); color: rgb(61, 61, 61);
cursor: pointer; cursor: pointer;
width: 15px; width: 15px;
} }
.decor { .decor {
position: absolute; position: absolute;
top: 50px; top: 20px;
left: -50px; left: -50px;
} }
.decor img { .decor img {
width: 100px; width: 100px;
} }
/*# sourceMappingURL=index.css.map */ /*# sourceMappingURL=index.css.map */

24
nodeJS/Learning/06/public/js/index.js
View File

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

31
nodeJS/Learning/06/src/index.ts
View File

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

14
nodeJS/Learning/06/src/views/index.ejs
View File

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