web-dev-open · SiyaM108 · Dec 21, 2025 · Dec 21, 2025 · Dec 21, 2025 · Dec 21, 2025
diff --git a/app.js b/app.js
@@ -0,0 +1,31 @@
+const express = require("express");
+const path = require("path");
+
+const app = express();
+const PORT = 3000;
+
+// Serve static files (CSS, images, JS)
+app.use(express.static(path.join(__dirname, "public")));
+
+// Routes
+app.get("/", (req, res) => {
+  res.sendFile(path.join(__dirname, "views", "index.html"));
+});
+
+app.get("/about", (req, res) => {
+  res.sendFile(path.join(__dirname, "views", "about.html"));
+});
+
+app.get("/works", (req, res) => {
+  res.sendFile(path.join(__dirname, "views", "works.html"));
+});
+
+// Bonus
+app.get("/gallery", (req, res) => {
+  res.sendFile(path.join(__dirname, "views", "gallery.html"));
+});
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SiyaM108/lab-express-basic.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/SiyaM108/lab-express-basic/issues"
+  },
+  "homepage": "https://github.com/SiyaM108/lab-express-basic#readme",
+  "dependencies": {
+    "express": "^5.2.1"
+  }
+}
diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,31 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  background-color: #f4f4f4;
+}
+
+header {
+  background-color: #2c3e50;
+  color: white;
+  padding: 1rem;
+}
+
+nav a {
+  color: white;
+  margin-right: 1rem;
+  text-decoration: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+main {
+  padding: 2rem;
+}
+
+.gallery img {
+  width: 200px;
+  margin: 10px;
+  border-radius: 8px;
+}
diff --git a/public/images/Miyazaki-Hayao-2008.webp b/public/images/Miyazaki-Hayao-2008.webp
diff --git a/public/images/Spirited-Away-hayao-miyazaki-39923023-1280-1024.jpg b/public/images/Spirited-Away-hayao-miyazaki-39923023-1280-1024.jpg
diff --git a/public/images/hayao-miyazaki.jpg b/public/images/hayao-miyazaki.jpg
diff --git a/public/images/howls-moving-castle.jpg b/public/images/howls-moving-castle.jpg
diff --git a/public/images/my-neighbour-totoro.jpg b/public/images/my-neighbour-totoro.jpg
diff --git a/public/images/princess-mononoke.jpg b/public/images/princess-mononoke.jpg
diff --git a/.../images/rare-2024-movie-about-studio-ghibli-s-hayao-miyazaki-gets-free-u-s-screening.avif b/.../images/rare-2024-movie-about-studio-ghibli-s-hayao-miyazaki-gets-free-u-s-screening.avif
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>About Miyazaki</title>
+  <link rel="stylesheet" href="/css/style.css" />
+</head>
+<body>
+  <header>
+    <h1>About Hayao Miyazaki</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/works">Works</a>
+      <a href="/gallery">Gallery</a>
+    </nav>
+  </header>
+
+  <main>
+    <p>
+      Hayao Miyazaki is a Japanese animator, filmmaker, and co-founder of
+      Studio Ghibli. His films are known for their imagination, emotional
+      depth, and strong environmental themes.
+    </p>
+  </main>
+</body>
+</html>
diff --git a/views/gallery.html b/views/gallery.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Gallery</title>
+  <link rel="stylesheet" href="/css/style.css" />
+</head>
+<body>
+  <header>
+    <h1>Photo Gallery</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/works">Works</a>
+      <a href="/gallery">Gallery</a>
+    </nav>
+  </header>
+
+  <main class="gallery">
+    <img src="/images/Spirited-Away-hayao-miyazaki-39923023-1280-1024.jpg" alt="Spirited Away">
+    <img src="/images/howls-moving-castle.jpg" alt="Howl's Moving Castle">
+    <img src="/images/my-neighbour-totoro.jpg" alt="My Neighbour Totoro">
+    <img src="/images/princess-mononoke.jpg" alt="Princess Mononoke">
+    <img src="/images/hayao-miyazaki.jpg" alt="Hayao Miyazaki">
+  </main>
+</body>
+</html>
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Hayao Miyazaki</title>
+  <link rel="stylesheet" href="/css/style.css" />
+</head>
+<body>
+  <header>
+    <h1>Welcome to Hayao Miyazaki’s World</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/works">Works</a>
+      <a href="/gallery">Gallery</a>
+    </nav>
+  </header>
+
+  <main>
+    <p>
+      Discover the life and works of Hayao Miyazaki, one of the greatest
+      animation directors of all time.
+    </p>
+  </main>
+</body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Works</title>
+  <link rel="stylesheet" href="/css/style.css" />
+</head>
+<body>
+  <header>
+    <h1>Famous Works</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/works">Works</a>
+      <a href="/gallery">Gallery</a>
+    </nav>
+  </header>
+
+  <main>
+    <ul>
+      <li>Spirited Away</li>
+      <li>My Neighbor Totoro</li>
+      <li>Princess Mononoke</li>
+      <li>Howl’s Moving Castle</li>
+    </ul>
+  </main>
+</body>
+</html>