lesson 7
This commit is contained in:
@@ -3,44 +3,48 @@
|
||||
|
||||
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
|
||||
|
||||
body{
|
||||
background-color: rgb(232, 163, 217);
|
||||
color: rgb(146, 0, 24)
|
||||
body {
|
||||
background-color: rgb(232, 163, 217);
|
||||
color: rgb(146, 0, 24);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'Cutive Mono', monospace;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: "Cutive Mono", monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'EB Garamond', serif;
|
||||
font-family: "EB Garamond", serif;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 30px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 30px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
background-color: rgb(151, 227, 29);
|
||||
background-color: rgb(151, 227, 29);
|
||||
}
|
||||
|
||||
.form-submit:hover {
|
||||
background:rgb(62, 100, 2);
|
||||
cursor: pointer;
|
||||
background: rgb(62, 100, 2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todo-input {
|
||||
background: rgb(16, 232, 236)
|
||||
background: rgb(16, 232, 236);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -3,158 +3,178 @@
|
||||
|
||||
/* font: sans-serif for headers, serif for paragraphs, mono for whatever */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
|
||||
|
||||
body{
|
||||
background-color: rgb(238, 213, 232);
|
||||
color: rgb(92, 89, 92)
|
||||
body {
|
||||
background-color: rgb(238, 213, 232);
|
||||
color: rgb(92, 89, 92);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: 'EB Garamond', serif;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
font-family: "EB Garamond", serif;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Curtive Mono', monospace;
|
||||
font-family: "Curtive 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;
|
||||
}
|
||||
form input,
|
||||
form textarea {
|
||||
font-family: "Cutive Mono", monospace;
|
||||
}
|
||||
|
||||
.todo-input {
|
||||
text-align: left;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
label, input, button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
label:nth-of-type(2) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #ecf0f3;
|
||||
padding: 10px;
|
||||
padding-left: 20px;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
border-radius: 50px;
|
||||
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
|
||||
}
|
||||
text-align: left;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
color: white;
|
||||
font-family: 'Curtive Mono', monospace;
|
||||
font-size: 16px;
|
||||
margin: 20px auto;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
label,
|
||||
input,
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
label:nth-of-type(2) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #ecf0f3;
|
||||
padding: 10px;
|
||||
padding-left: 20px;
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
border-radius: 50px;
|
||||
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
color: white;
|
||||
font-family: "Curtive 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: 'Curtive Mono', monospace;
|
||||
background-color: #fff5f7; /* Soft cream background for the list */
|
||||
border: 4px solid #ffd0dc; /* Pink border */
|
||||
border-radius: 30px;
|
||||
box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
|
||||
position: relative;
|
||||
padding: 20px 20px 20px 20px;/* up left down right */
|
||||
background-image: url('/images/polka.jpg'); /* Add your image path */
|
||||
background-size: cover; /* Scale the image to cover the entire list item */
|
||||
background-repeat: no-repeat; /* Prevent the image from repeating */
|
||||
background-position: center; /* Center thse image within the list item */
|
||||
}
|
||||
|
||||
.inner-todo {
|
||||
background-color: #fee6eb;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
max-width: 300px;
|
||||
font-family: "Curtive Mono", monospace;
|
||||
background-color: #fff5f7; /* Soft cream background for the list */
|
||||
border: 4px solid #ffd0dc; /* Pink border */
|
||||
border-radius: 30px;
|
||||
box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
|
||||
position: relative;
|
||||
padding: 20px 20px 20px 20px; /* up left down right */
|
||||
background-image: url("/images/polka.jpg"); /* Add your image path */
|
||||
background-size: cover; /* Scale the image to cover the entire list item */
|
||||
background-repeat: no-repeat; /* Prevent the image from repeating */
|
||||
background-position: center; /* Center thse image within the list item */
|
||||
}
|
||||
|
||||
.inner-todo {
|
||||
background-color: #fee6eb;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Heading */
|
||||
.todo-container h1 {
|
||||
font-size: 25px;
|
||||
font-family: "EB Garamond", serif;
|
||||
color: #545353; /* Pink color for title */
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* List Styling */
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol li {
|
||||
color: #545353; /* Adjust text color for visibility */
|
||||
margin: 10px;
|
||||
background-color: #ffffff; /* Soft cream background for the list */
|
||||
padding: 20px; /* Increase padding for better layout */
|
||||
border-radius: 20px;
|
||||
text-align: left;
|
||||
font-family: "Curtive Mono", monospace; /* Consistent font */
|
||||
min-width: 250px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
ol li i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
li button {
|
||||
background-color: white;
|
||||
color: rgb(61, 61, 61); /* Button text color */
|
||||
cursor: pointer; /* Pointer cursor for interactivity */
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* Decoration Image */
|
||||
.decor {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: 250px;
|
||||
}
|
||||
|
||||
.decor img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Heading */
|
||||
.todo-container h1 {
|
||||
font-size: 25px;
|
||||
font-family: 'EB Garamond', serif;
|
||||
color: #545353; /* Pink color for title */
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* List Styling */
|
||||
ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol li {
|
||||
color: #545353; /* Adjust text color for visibility */
|
||||
margin: 10px;
|
||||
background-color: #ffffff; /* Soft cream background for the list */
|
||||
padding: 20px; /* Increase padding for better layout */
|
||||
border-radius: 20px;
|
||||
text-align: left;
|
||||
font-family: 'Curtive Mono', monospace; /* Consistent font */
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
/* Decoration Image */
|
||||
.decor {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.decor img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
69
nodeJS/Learning/05/public/html/index.html
Normal file
69
nodeJS/Learning/05/public/html/index.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tiffy's to-do list website</title>
|
||||
|
||||
<meta name="description" content="Tiffy's todo list website" />
|
||||
<meta name="keywords" content="list, todo" />
|
||||
<meta name="author" content="Tiffany" />
|
||||
|
||||
<link rel="icon" href="images/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
||||
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1 class="title-text">Tiffy's to-do list website</h1>
|
||||
|
||||
<img src="images/image.jpg" alt="Image not found" />
|
||||
|
||||
<p><i>Add something cute to my to-do list!</i></p>
|
||||
<form action="/form-action" method="post">
|
||||
<label for="to-do"></label>
|
||||
<input
|
||||
name="todo"
|
||||
type="text"
|
||||
placeholder="Enter a to-do"
|
||||
required
|
||||
class="todo-input"
|
||||
/>
|
||||
<button type="submit" class="form-submit">Add</button>
|
||||
</form>
|
||||
|
||||
<!-- List -->
|
||||
<!-- ordered list -->
|
||||
|
||||
<div class="todo-container">
|
||||
<div class="inner-todo">
|
||||
<h1>To do list</h1>
|
||||
<ol>
|
||||
<!-- <li>Learn from Ronald</li>
|
||||
<li>Watch movies</li>
|
||||
<li>Sleep</li> -->
|
||||
</ol>
|
||||
<div class="decor">
|
||||
<img src="images/cryinggirl.gif" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- unordered list -->
|
||||
<!-- <ul></ul> -->
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<script src="js/todo.js"></script>
|
||||
</html>
|
||||
79
nodeJS/Learning/05/public/html/lesson.html
Normal file
79
nodeJS/Learning/05/public/html/lesson.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- document type is html, templating language -->
|
||||
<html lang="en">
|
||||
<!-- english -->
|
||||
<!-- Header section, things that dont show in the webpage, e.g. meta-data: wt language ur website is using, website designed for mobile or actual computers, SEO, title, accessibility issues write it here too-->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Title: the top part of the webpage thingy -->
|
||||
<title>Document</title>
|
||||
|
||||
<!-- Website description -->
|
||||
<meta name="description" content="Ronald's website" />
|
||||
<!-- Website keywords -->
|
||||
<meta name="keywords" content="Ronald, Website:" />
|
||||
<!-- website author -->
|
||||
<meta name="author" content="Ronald" />
|
||||
|
||||
<!-- Favicon, rel: what type of link, href: where to find the icon -->
|
||||
<!-- icon: image to icon generator, some pixel restrictions, for the top website icon -->
|
||||
<link rel="icon" href="images/favicon.ico" />
|
||||
|
||||
<!-- CSS styles: called stylesheet, if u type "link: (list of types of link)" then press tab-->
|
||||
<link rel="stylesheet" href="css/main.css"/>
|
||||
</head>
|
||||
|
||||
|
||||
<!-- Body: everything in the webpage -->
|
||||
<body>
|
||||
<!-- navigation bar -->
|
||||
<!-- <nav></nav> -->
|
||||
|
||||
<!-- sections -->
|
||||
<section>
|
||||
<!-- dividers, e.g. left and right side of website -->
|
||||
<div class="container">
|
||||
<!-- headers, based on size h1 h2 -->
|
||||
<h1 class="title-text">Tiffany's to-do list website</h1>
|
||||
<h2>second header</h2>
|
||||
<!-- paragraph -->
|
||||
<p>Welcome to my to-do list</p>
|
||||
<!-- subtitles -->
|
||||
<sub></sub>
|
||||
<!-- bold -->
|
||||
<b></b>
|
||||
<!-- italics -->
|
||||
<i></i>
|
||||
<!-- underline -->
|
||||
<u></u>
|
||||
|
||||
<!-- image, people usually use avif, webp -->
|
||||
<!-- alt is alternative -->
|
||||
<img src="images/image.png" alt="Image not found">
|
||||
|
||||
<!-- form, what you want the form to do, usually lead into javascript, login.js -->
|
||||
<form action="/form-action" method="post">
|
||||
<label for="to-do">What do you want to do?</label>
|
||||
<!-- theres different types of input, which is what u fill in for form -->
|
||||
<!-- type required make it required, placeholders: the invisible list -->
|
||||
<!-- usually control through javascript -->
|
||||
<input name="todo" type="text" placeholder="Enter your to-do" required class="todo-input"/>
|
||||
|
||||
<!-- button, if it's a submit button then it will end the form and submit it, other than that the button doesnt do anything -->
|
||||
<button type="submit" class="form-submit">Add to form</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<!-- Footer: the bottom part of the webpage -->
|
||||
<!-- <footer></footer> -->
|
||||
|
||||
<!-- Scripts, where you link javascript files -->
|
||||
<!-- <scripts src="index.js"> </scripts> -->
|
||||
|
||||
</html>
|
||||
@@ -1,15 +1,51 @@
|
||||
//fetch: send a url request, client side rendering
|
||||
//update the list, by default: fetch uses get
|
||||
fetch('/get-todos', {method: 'GET'}). then((response) => {
|
||||
response.json(). then((data) => {
|
||||
const ol = document.querySelector('ol');
|
||||
data.forEach((item) => {
|
||||
//Create li
|
||||
const li = document.createElement('li');
|
||||
//add text to li
|
||||
li.textContent = item;
|
||||
//add li underneath (child) ol
|
||||
ol.appendChild(li);
|
||||
})
|
||||
});
|
||||
});
|
||||
//update the list, by default: fetch uses "get"
|
||||
fetch("/get-todos", { method: "GET" }).then((response) => {
|
||||
response.json().then((data) => {
|
||||
const ol = document.querySelector("ol");
|
||||
data.forEach((item) => {
|
||||
//Create li
|
||||
const li = document.createElement("li");
|
||||
//add text to li
|
||||
li.textContent = item;
|
||||
|
||||
// Create button
|
||||
const button = document.createElement("button");
|
||||
button.type = "submit";
|
||||
|
||||
// Add icon to button
|
||||
const icon = document.createElement("i");
|
||||
icon.className = "fa-solid fa-delete-left";
|
||||
|
||||
// Append icon to button
|
||||
button.appendChild(icon);
|
||||
|
||||
// Append button to li
|
||||
li.appendChild(button);
|
||||
|
||||
// Add delete functionality
|
||||
button.addEventListener("click", () => {
|
||||
// Send DELETE request
|
||||
fetch(`/delete-todo`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ todo: item }),
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
// Remove the item from the DOM
|
||||
li.remove();
|
||||
} else {
|
||||
console.error("Failed to delete to-do item");
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error("Error:", error));
|
||||
});
|
||||
|
||||
// Append li underneath (child) ol
|
||||
ol.appendChild(li);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user