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

lesson 6

Browse Source
This commit is contained in:
tuffahni
2024-12-20 22:09:12 +00:00
parent 723bcf1b03
commit f82ea59048
15 changed files with 2739 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
nodeJS/Learning/05/src/index.html
View File

@@ -1,79 +1,62 @@
<!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>
<title>Tiffy's to-do list website</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" />
<meta name="description" content="Tiffy's todo list website" />
<meta name="keywords" content="list, todo" />
<meta name="author" content="Tiffany" />
<!-- 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>
<h1 class="title-text">Tiffy's to-do list website</h1>
<p><i>Add something cute to my to-do list!</i></p>
<!-- image, people usually use avif, webp -->
<!-- alt is alternative -->
<img src="images/image.png" alt="Image not found">
<img src="images/image.jpg" 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"/>
<label for="to-do"></label>
<input name="todo" type="text" placeholder="Enter a 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>
<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>
<!-- Footer: the bottom part of the webpage -->
<!-- <footer></footer> -->
<script src="js/todo.js"> </script>
<!-- Scripts, where you link javascript files -->
<!-- <scripts src="index.js"> </scripts> -->
</html>

41
nodeJS/Learning/05/src/index.ts
View File

@@ -7,14 +7,20 @@ dotenv.config({ path: `${__dirname}/../.env` });
//we named express as a variable name, usually name same as imported package
//express: designed to easily make a web server
import express from 'express';
import express, { Request, Response } from 'express';
//bodyParser: sending form action to my server, wrap the user's data in "body" to my server, and my server is unwrapping it
import bodyParser from 'body-parser';
import fs from 'fs';
const filePath = 'todolist.txt';
//initializing the express web server, everything in express, we want to put in app
const app = express();
const port = process.env.PORT || 3000;
// Middleware
//unwrap the words
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
@@ -31,14 +37,35 @@ app.get(`/`, (req, res) => {
app.post('/form-action', (req, res) => {
const todo = req.body.todo;
console.log(todo)
console.log(todo);
// use fs to add the item to the file
//Import fs module (read the file)
//add the todo to the bottom of the file using the fs.appendFile
fs.appendFile(filePath, todo + '\n', (err) => {
if (err) {
console.log(err)
res.send("Hey there is an error.")
} else {
res.redirect("/");
}
});
});
app.get('/get-todos', (req: Request, res: Response): void => {
//Using the fs module to read the file
fs.readFile(filePath, 'utf-8', (err:NodeJS.ErrnoException | null, data: string) => {
if (err) {
console.log(err)
res.send("An error occured.")
} else {
//Return the file contents as a response of each list item data.split
//Send the response back to the client as a json object res.json
res.json(data.split('\n'))
}
})
})
res.redirect("/");
}
)
// slash'/' is the home page, /about is the about page
//get, post, put, delete

79
nodeJS/Learning/05/src/lesson.html Normal file
View 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>