lesson 8
This commit is contained in:
@@ -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));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user