Assignment-w2-NodeJs

assignments/hackyourtemperature/Router/weather.js

@@ -0,0 +1,28 @@
+import express from "express";
+import keys from "../source/keys.js";
+export const router = express.Router();
+import fetch from "node-fetch";
+
+router.get("/", (req, res) => {
+  res.render("home", {
+    welcomeMessage: "hello discover weather for any city you want",
+  });
+});
+router.post("/", async (req, res) => {
+  const { cityName } = req.body;
+  if (!cityName) {
+    res.status(400).render("home", { errorMessage: "City is required" });
+  }
+  const URL = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${keys.API_KEY}&units=metric`;
+  try {
+    const response = await fetch(URL);
+
+    const data = await response.json();
+    res.render("weatherShow", { data });
+  } catch (err) {
+    console.error(
+      `faild fetch data weather err fetchApi ${response.statusText} ${response.status}`
+    );
+    res.status(500).render("home", { errorMessage: "City is not found!" });
+  }
+});

assignments/hackyourtemperature/__tests__/app.test.js

@@ -0,0 +1,27 @@
+import express from "express";
+import app from "../app";
+import request from "supertest";
+
+describe("Get /weather", () => {
+  it("should return hello world", async () => {
+    const response = await request(app).get("/weather");
+    expect(response.status).toBe(200);
+    expect(response.text).toContain(
+      "hello discover weather for any city you want"
+    );
+  });
+  it("should return the city name in respons", async () => {
+    const response = await request(app)
+      .post("/weather")
+      .send({ cityName: "Amsterdam" });
+
+    expect(response.status).toBe(200);
+    expect(response.text).toContain("Amsterdam");
+  });
+  it("should return 400 if city is missing", async () => {
+    const response = await request(app).post("/weather").send({});
+
+    expect(response.status).toBe(400);
+    expect(response.text).toContain("City is required");
+  });
+});

assignments/hackyourtemperature/app.js

@@ -0,0 +1,23 @@
+import express from "express";
+import path from "path";
+import expressHandlebars from "express-handlebars";
+import { fileURLToPath } from "url";
+import { router } from "./Router/weather.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+
+
+// Middleware
+app.use(express.json());
+app.use(express.static(path.join(__dirname, "public")));
+app.use(express.urlencoded({ extended: true }));
+app.use("/weather", router);
+
+// Handelbars setup
+app.engine("hbs", expressHandlebars.engine({ extname: ".hbs" }));
+app.set("view engine", "hbs");
+app.set("views", path.join(__dirname, "views"));
+
+export default app;

assignments/hackyourtemperature/config-files/babel.config.cjs

@@ -0,0 +1,3 @@
+export default {
+  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
+};

assignments/hackyourtemperature/config-files/jest.config.js

@@ -0,0 +1,6 @@
+export default {
+  transform: {
+    "^.+\\.js$": "babel-jest",
+  },
+  testEnvironment: "node",
+};

assignments/hackyourtemperature/jest.config.js

@@ -0,0 +1,4 @@
+export default {
+  testEnvironment: "node",
+  transform: {},
+};

assignments/hackyourtemperature/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "hackyourtemperature",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^5.1.0",
+    "express-handlebars": "^8.0.3",
+    "node-fetch": "^3.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "babel-jest": "^30.0.5",
+    "cross-env": "^10.0.0",
+    "jest": "^30.0.5",
+    "nodemon": "^3.1.10",
+    "superset": "^2.0.1",
+    "supertest": "^7.1.4"
+  }
+}

assignments/hackyourtemperature/public/css/style.css

@@ -0,0 +1,42 @@
+body{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color:#333;
+
+    min-height: 100vh;
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #74ebd5, #ACB6E5);
+}
+html{
+    font-size: 16px;
+
+}
+.city-search input{
+    width:100%;
+    max-width: 400px;
+    padding: 10px;
+    border-radius: 8px;
+    border: none;
+    margin: 10px 0;
+}
+.city-search input:hover{
+   border:2px solid #74ebd5;
+}
+.search-btn{
+    padding: 10px 20px;
+    border-radius: 8px;
+    border: none;
+    background-color: #ACB6E5;
+    color: white;
+}
+.search-btn:hover{
+    background-color: white;
+    color: #ACB6E5;
+    cursor: pointer;
+}
+

assignments/hackyourtemperature/server.js

@@ -0,0 +1,5 @@
+import app from "./app.js";
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+  console.log(`server is running on prot ${PORT}`);
+});

assignments/hackyourtemperature/source/keys.js

@@ -0,0 +1 @@
+export default { API_KEY: "21bf76a65461435a76771d5a2caac6c8" };

assignments/hackyourtemperature/views/home.hbs

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Websit</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <h1>hello from backend to front end</h1>
+    <p>Welcome to my website!</p>
+    <form action="/weather" method="post">
+    <div class="city-search">
+        <p>{{welcomeMessage}} </p>
+        <label for="city">Enter City:</label>
+        <input type="text" id="city" name="cityName" required>
+    </div>
+    <button class="search-btn">search</button>
+
+    </form>
+        <h2 id="weather-data">{{errorMessage}}.</h2>
+
+</body>
+</html>

assignments/hackyourtemperature/views/layouts/main.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>main</title>
+</head>
+<body>
+    {{{body}}}
+
+</body>
+</html>

assignments/hackyourtemperature/views/weatherShow.hbs

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather show</title>
+</head>
+<body>
+    <h1>{{data.name}} <b>{{data.main.temp_min}}</b></h1>
+
+</body>
+</html>