Fetch API included

Author: samannetts8

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+

package-lock.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "dotenv": "^16.4.7",
+    "next": "15.1.7",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.7"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^9",
     "eslint-config-next": "15.1.7",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

package.json

@@ -1,10 +1,39 @@
-import Image from "next/image";
-
-export default function Home() {
+"use client";
+import React, { useEffect, useState } from "react";
+export default function Page() {
+  const [posts, setPosts] = useState([]);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await fetch(
+          "http://api.weatherapi.com/v1/forecast.json?key=b59bf0aa6d93440f8fc113152251902&q=London&days=5"
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        setPosts(data.current || []);
+      } catch (error) {
+        setError(error);
+      }
+    }
+    fetchData();
+  }, []);
+  if (error) {
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>{error.message}</p>
+      </div>
+    );
+  }
   return (
-   
-          <li>
-            Hello
-          </li>
+    <ul>
+      <li key={posts.last_updated}>
+       <div>{posts.last_updated}: {posts.temp_c}°C </div> 
+       WIND(mph) {posts.wind_mph}mph
+      </li>
+    </ul>
   );
-}
+}

src/app/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+
+interface FormProps {
+  onSubmit: (inputValue: string) => void;
+}
+
+export default function Form({ onSubmit }: FormProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  const handleSubmit = () => {
+    console.log(inputValue)
+    onSubmit(inputValue);
+    setInputValue(""); // Clear input after submission
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>Enter City Name
+        </div><input
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder="Enter city name..."
+      />
+      <button
+        type="submit">
+        Submit
+      </button>
+    </form>
+  );
+}