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

lesson5

Browse Source
This commit is contained in:
tuffahni 2024-12-19 20:06:23 +00:00
parent 966930753b
commit 723bcf1b03
8 changed files with 1355 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
nodeJS/Learning/05/package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "05",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@types/body-parser": "^1.19.5",
"@types/express": "^5.0.0",
"nodemon": "^3.1.9",
"ts-node": "^10.9.2",
"typescript": "^5.7.2"
},
"dependencies": {
"body-parser": "^1.20.3",
"dotenv": "^16.4.7",
"express": "^4.21.2"
},
"scripts": {
"dev": "nodemon --exec ts-node src/index.ts --quiet",
"build": "tsc",
"start": "node dist/index.js"
}
}

1048
nodeJS/Learning/05/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

46
nodeJS/Learning/05/public/css/main.css Normal file
View File

@ -0,0 +1,46 @@
/* Style each tag in an html */
/* describe to chatgpt what you want, good at css, or css reference */
/* 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');
body{
background-color: rgb(232, 163, 217);
color: rgb(146, 0, 24)
}
h1, h2, h3, h4, h5 {
font-family: 'Cutive Mono', monospace;
}
p {
font-family: 'EB Garamond', serif;
}
.title-text {
font-size: 30px;
margin-bottom: 0px;
}
.form-submit {
background-color: rgb(151, 227, 29);
}
.form-submit:hover {
background:rgb(62, 100, 2);
cursor: pointer;
}
.todo-input {
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;
}

BIN
nodeJS/Learning/05/public/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
nodeJS/Learning/05/public/images/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

79
nodeJS/Learning/05/src/index.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>

48
nodeJS/Learning/05/src/index.ts Normal file
View File

@ -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}`);
});

111
nodeJS/Learning/05/tsconfig.json Normal file
View File

@ -0,0 +1,111 @@
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs" /* Specify what module code is generated. */,
"rootDir": "./src" /* Specify the root folder within your source files. */,
"moduleResolution": "node10" /* Specify how TypeScript looks up a file from a given module specifier. */,
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "noUncheckedSideEffectImports": true, /* Check side effect imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
"allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
// "removeComments": true, /* Disable emitting comments. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
/* Type Checking */
"strict": true /* Enable all strict type-checking options. */,
"noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
"alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}