lesson5

2024-12-19 20:06:23 +00:00
parent 966930753b
commit 723bcf1b03
8 changed files with 1355 additions and 0 deletions
--- a/nodeJS/Learning/05/src/index.html
+++ b/nodeJS/Learning/05/src/index.html
@@ -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>
--- a/nodeJS/Learning/05/src/index.ts
+++ b/nodeJS/Learning/05/src/index.ts
@@ -0,0 +1,48 @@
+//importing the dotenv package (secret file), configuring dotenv for our project
+//dotenv, secret file, people cant read
+import dotenv from 'dotenv';
+dotenv.config({ path: `${__dirname}/../.env` });
+
+//Variable declaration
+
+//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 bodyParser from 'body-parser';
+
+//initializing the express web server, everything in express, we want to put in app
+const app = express();
+const port = process.env.PORT || 3000;
+
+// Middleware
+app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.json());
+
+//Actual Express Code
+//Routes Definition
+//if send text then res.send, send file: res.sendFile
+
+//to make icon files, because icon files are always downloaded
+app.use(express.static(`${__dirname}/../public`));
+
+app.get(`/`, (req, res) => {
+    res.sendFile(`${__dirname}/index.html`);
+});
+
+app.post('/form-action', (req, res) => {
+    const todo = req.body.todo;
+    console.log(todo)
+
+    //Import fs module (read the file)
+    //add the todo to the bottom of the file using the fs.appendFile
+
+    res.redirect("/");
+    }
+)
+
+// slash'/' is the home page, /about is the about page
+//get, post, put, delete
+
+app.listen(port, () => {
+    console.log(`Server is running on http://localhost:${port}`);
+});