lesson 8
This commit is contained in:
parent
c6d68334be
commit
ecd7b650bd
@ -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 */
|
||||
|
||||
@ -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));
|
||||
}
|
||||
@ -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}`);
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user