lesson 9

nodeJS/Learning/07/app/src/index.ts

@@ -0,0 +1,27 @@
+import dotenv from "dotenv";
+dotenv.config({ path: ".env" });
+
+import express, { Application } from "express";
+
+const app: Application = express();
+const port: number = parseInt(process.env.PORT as string) || 3000;
+
+//Middleware
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+//Setting up for EJS
+app.set("views", `./src/views`);
+app.set("view engine", "ejs");
+
+//Static route
+app.use(express.static(`${__dirname}/../public`));
+
+//check and send index ejs
+app.get("/", (_req, res) => {
+	res.render("index");
+});
+
+app.listen(port, (): void => {
+	console.log(`Server is running on port ${port}`);
+});

nodeJS/Learning/07/app/src/styles/_reset.scss

@@ -0,0 +1,51 @@
+// Cancel all css original settings
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+html,
+body {
+	height: 100%;
+}
+
+body {
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+	isolation: isolate;
+}

nodeJS/Learning/07/app/src/styles/_variable.scss

@@ -0,0 +1,7 @@
+$oxford: #020122;
+$pink: #ddbdd5;
+$white: #f7ebec;
+$violet: #443850;
+$green: #6e8387;
+$font-header: "Lora", serif;
+$font-body: "Montserrat", serif;

nodeJS/Learning/07/app/src/styles/pages/index.scss

@@ -0,0 +1,142 @@
+@use "../reset";
+@use "../variable";
+@use "../components/navbar";
+
+/* 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=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
+.parent {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: 1fr;
+	grid-column-gap: 20px;
+	grid-row-gap: 20px;
+}
+
+.div1 {
+	grid-area: 1 / 1 / 2 / 3;
+	body {
+		margin: 0;
+		font-family: variable.$font-body;
+		background-color: variable.$oxford;
+	}
+
+	.container {
+		padding: 20px;
+	}
+
+	.intro {
+		text-align: left;
+		margin-bottom: 50px;
+
+		h1 {
+			font-size: 2rem;
+			margin-bottom: 10px;
+			color: variable.$pink;
+			font-family: variable.$font-header;
+		}
+
+		p {
+			font-size: 1.1rem;
+			margin-bottom: 20px;
+			color: variable.$white;
+			font-family: variable.$font-body;
+		}
+
+		.read-more {
+			background-color: variable.$pink;
+			padding: 10px 20px;
+			border: none;
+			border-radius: 5px;
+			cursor: pointer;
+			font-size: 1rem;
+
+			&:hover {
+				background-color: variable.$violet;
+			}
+		}
+	}
+}
+.div2 {
+	grid-area: 1 / 3 / 2 / 4;
+	.intro {
+		h5 {
+			font-size: 2rem;
+			margin-bottom: 10px;
+			color: variable.$white;
+			font-family: variable.$font-header;
+		}
+
+		p {
+			font-size: 1.1rem;
+			margin-bottom: 20px;
+			color: variable.$oxford;
+			font-family: variable.$font-body;
+		}
+	}
+
+	.parent {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(2, 1fr);
+		grid-column-gap: 20px;
+		grid-row-gap: 20px;
+	}
+
+	.div1 {
+		grid-area: 1 / 1 / 2 / 2;
+	}
+	.div2 {
+		grid-area: 1 / 2 / 2 / 3;
+	}
+	.div3 {
+		grid-area: 1 / 3 / 2 / 4;
+	}
+	.div4 {
+		grid-area: 2 / 1 / 3 / 2;
+	}
+	.div5 {
+		grid-area: 2 / 2 / 3 / 3;
+	}
+	.div6 {
+		grid-area: 2 / 3 / 3 / 4;
+	}
+
+	.feature {
+		background-color: variable.$pink;
+		border-radius: 10px;
+		padding: 20px;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+		text-align: center;
+
+		h3 {
+			font-size: 1.5rem;
+			margin-bottom: 10px;
+			color: variable.$green;
+		}
+
+		p {
+			font-size: 1rem;
+			margin-bottom: 20px;
+			color: variable.$white;
+		}
+
+		.more {
+			background-color: variable.$pink;
+			color: #fff;
+			padding: 10px 15px;
+			border: none;
+			border-radius: 5px;
+			cursor: pointer;
+			font-size: 0.9rem;
+
+			&:hover {
+				background-color: variable.$violet;
+			}
+		}
+	}
+}

nodeJS/Learning/07/app/src/views/index.ejs

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>My Blog Page</title>
+
+		<link rel="icon" href="images/favicon.ico" />
+
+		<link rel="stylesheet" href="css/pages/index.css" />
+	</head>
+
+	<!-- https://cssgrid-generator.netlify.app/ -->
+	<body>
+		<div class="parent">
+			<div class="div1"></div>
+			<section class="intro">
+				<h1>My Blog Page</h1>
+				<p>
+					Within these pages, you will find carefully curated content that
+					reflects my expertise, creativity, and passion for continuous growth.
+					Whether you seek inspiration, a nuanced perspective, or just want to
+					know more about me, I invite you to explore and engage with the ideas
+					that define my work and vision.
+				</p>
+				<button class="read-more">Read More</button>
+			</section>
+			<div class="div2"></div>
+			<p>Author: Tiffany</p>
+		</div>
+
+		<div class="parent">
+			<div class="div1">
+				<h3>Testing</h3>
+				<p>I am testing this out.</p>
+				<button class="more">More</button>
+			</div>
+			<div class="div2"></div>
+			<div class="div3"></div>
+			<div class="div4"></div>
+			<div class="div5"></div>
+			<div class="div6"></div>
+		</div>
+	</body>
+</html>