web-dev-open · alwaysahad · Jan 18, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,34 @@
+const express = require("express");
+
+const app = express();
+app.use(express.static("public"));
+
+app.get("/", (req, res) => {
+  res.setHeader("Content-Type", "text/html");
+  res.sendFile(__dirname + "/views/home.html");
+});
+
+app.get("/about", (req, res) => {
+  res.setHeader("Content-Type", "text/html");
+  res.sendFile(__dirname + "/views/about.html");
+});
+
+app.get("/works", (req, res) => {
+  res.setHeader("Content-Type", "text/html");
+  res.sendFile(__dirname + "/views/works.html");
+});
+
+// Set the MIME type for CSS files
+app.get("/public/stylesheets/*.css", (req, res) => {
+  console.log(req.url);
+  res.setHeader("Content-Type", "text/css");
+  res.sendFile(__dirname + req.url);
+});
+
+app
+  .listen(3000, () => {
+    console.log("Example app listening on port 3000!");
+  })
+  .on("error", (err) => {
+    console.log(err);
+  });
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "lab-express-basic",
+  "version": "1.0.0",
+  "description": "<img src=\"https://imgur.com/XOS1Vdh.png\"  width=\"150px\" height=\"150px\">",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2"
+  }
+}
diff --git a/public/stylesheets/about.css b/public/stylesheets/about.css
@@ -0,0 +1,46 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: yellowgreen;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 2rem;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+a {
+  text-decoration: none;
+  color: yellowgreen;
+}
+
+nav {
+  display: flex;
+  gap: 1rem;
+}
+
+nav a {
+  font-size: 1.5rem;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
diff --git a/public/stylesheets/home.css b/public/stylesheets/home.css
@@ -0,0 +1,46 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: royalblue;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 2rem;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+a {
+  text-decoration: none;
+  color: royalblue;
+}
+
+nav {
+  display: flex;
+  gap: 1rem;
+}
+
+nav a {
+  font-size: 1.5rem;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
diff --git a/public/stylesheets/works.css b/public/stylesheets/works.css
@@ -0,0 +1,46 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  color: salmon;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 2rem;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+a {
+  text-decoration: none;
+  color: salmon;
+}
+
+nav {
+  display: flex;
+  gap: 1rem;
+}
+
+nav a {
+  font-size: 1.5rem;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About page</title>
+    <link rel="stylesheet" href="public/stylesheets/about.css" />
+  </head>
+  <body>
+    <nav>
+      <a href="/about">About</a>
+      <a href="/">Home</a>
+      <a href="/works">Works</a>
+    </nav>
+    <h1>About Page</h1>
+
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+      perspiciatis, quae, quidem, quos quibusdam quas quod quia quas quidem.
+    </p>
+
+    <h2>Skills</h2>
+    <ul>
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>JavaScript</li>
+    </ul>
+
+    <h3>Contact</h3>
+    <nav>
+      <a href="/about">About</a>
+      <a href="/">Home</a>
+      <a href="/works">Works</a>
+    </nav>
+  </body>
+</html>
diff --git a/views/home.html b/views/home.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home page</title>
+    <link rel="stylesheet" href="public/stylesheets/home.css" />
+  </head>
+  <body>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/works">Works</a>
+    </nav>
+    <h1>Home Page</h1>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+      perspiciatis, quae, quidem, quos quibusdam quas quod quia quas quidem.
+    </p>
+
+    <h2>Skills</h2>
+    <ul>
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>JavaScript</li>
+    </ul>
+
+    <h3>Contact</h3>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/works">Works</a>
+    </nav>
+  </body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Works Page</title>
+    <link rel="stylesheet" href="public/stylesheets/works.css" />
+  </head>
+  <body>
+    <nav>
+      <a href="/works">Works</a>
+      <a href="/about">About</a>
+      <a href="/">Home</a>
+    </nav>
+    <h1>Works Page</h1>
+
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+      perspiciatis, quae, quidem, quos quibusdam quas quod quia quas quidem.
+    </p>
+
+    <h2>Skills</h2>
+    <ul>
+      <li>HTML</li>
+      <li>CSS</li>
+      <li>JavaScript</li>
+    </ul>
+
+    <h3>Contact</h3>
+
+    <nav>
+      <a href="/works">Works</a>
+      <a href="/about">About</a>
+      <a href="/">Home</a>
+    </nav>
+  </body>
+</html>