did some stuff with LocationSearch component and moved types to separate file.

app/page.tsx

@@ -6,6 +6,9 @@ const location = {
   longtitude: '12.549600'
 }
 
+
+
+
 export default function Home() {
   return (
     <main>

components/LocationSearch.tsx

@@ -1,7 +1,15 @@
+'use client'
+import { createContext } from "react";
+
+
+
+export default function LocationSearch() {
 
-export default async function LocationSearch() {
 
   return (
-    <h1>yes yes yes</h1>
+    <>
+      <input id="location" type="text" placeholder="enter a location to get the weather"/>
+      <label htmlFor="location" className="hidden">Enter location to get the weather!</label>
+    </>
   );
 }

components/Temperature.tsx

@@ -0,0 +1,26 @@
+interface TempInfo {
+    tempInfo: {
+        temp: number;
+        feels_like: number;
+        temp_min: number;
+        temp_max: number;
+        pressure: number;
+        humidity: number;
+        sea_level: number;
+        grnd_level: number;
+      };
+};
+
+export default function Temperature(props: TempInfo) {
+    const kelvin = 273.15;
+    const tempInfo = props.tempInfo;
+    const fullTemp = tempInfo.temp - kelvin;
+    const temperature = fullTemp.toFixed(2);
+    const fullFeels = tempInfo.feels_like - kelvin;
+    const feelsLike = fullFeels.toFixed(2);
+
+    return (
+    <p>The temperature right now is {temperature}°C and feels like {feelsLike}°C</p>
+    )
+}
+

components/Weather.tsx

@@ -1,91 +0,0 @@
-import { error } from "console";
-import { useEffect, useState } from "react";
-import { json } from "stream/consumers";
-
-interface Forecast {
-  coord: {
-    lon: number;
-    lat: number;
-  },
-  weather: 
-    {
-      id: number,
-      main: string,
-      description: string,
-      icon: string;
-    }[]
-  ,
-  base: string;
-  main: {
-    temp: number;
-    feels_like: number;
-    temp_min: number;
-    temp_max: number;
-    pressure: number;
-    humidity: number;
-    sea_level: number;
-    grnd_level: number;
-  },
-  visibility: number;
-  wind: {
-    speed: number;
-    deg: number;
-    gust: number;
-  },
-  rain: {
-    onehour: number
-  },
-  clouds: {
-    all: number
-  },
-  dt: number,
-  sys: {
-    type: number,
-    id: number,
-    country: string,
-    sunrise: number,
-    sunset: number;
-  },
-  timezone: number;
-  id: number;
-  name: string;
-  cod: number;
-};
-
-interface LocationType {
-  latitude: string;
-  longtitude: string;
-}
-const kelvin = 273.15;
-
-async function getForecast(location: LocationType): Promise<Forecast> {
-  const {latitude, longtitude} = location;
-  const appId = '546911d860cb81f16585f7973b394b70';
-  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`)
-  if (!res.ok) {
-    throw new Error(`This is not great ${error}`);
-    }
-  return res.json();
-}
-
-export default async function Weather(props: {location: LocationType}) {
-    const [weather, setWeather] = useState({});
-    const location = props.location
-    const appId = '546911d860cb81f16585f7973b394b70';
-    // const weather = await getForecast(location)
-    // const temp = weather.main.temp - kelvin
-    useEffect(() => {
-      fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${location.latitude}&lon=${location.longtitude}&appid=${appId}`)
-      .then(response => response.json())
-      .then(json => setWeather(json))
-      .catch(error => console.log(error))
-    })
-    return (
-      <main>
-        <h1>Forecast</h1>
-        <div>
-          { weather ? <pre>{JSON.stringify(weather, null, 2)}</pre> : 'loading...'}
-        </div>
-      </main>
-    );
-  }

components/WeatherNow.tsx

@@ -1,57 +1,5 @@
-import { error } from "console";
+import Temperature from "./Temperature";
-
+import { Forecast, LocationType } from "@/types/types";
-interface Forecast {
-  coord: {
-    lon: number;
-    lat: number;
-  };
-  weather: {
-    id: number;
-    main: string;
-    description: string;
-    icon: string;
-  }[];
-  base: string;
-  main: {
-    temp: number;
-    feels_like: number;
-    temp_min: number;
-    temp_max: number;
-    pressure: number;
-    humidity: number;
-    sea_level: number;
-    grnd_level: number;
-  };
-  visibility: number;
-  wind: {
-    speed: number;
-    deg: number;
-    gust: number;
-  };
-  rain: {
-    onehour: number;
-  };
-  clouds: {
-    all: number;
-  };
-  dt: number;
-  sys: {
-    type: number;
-    id: number;
-    country: string;
-    sunrise: number;
-    sunset: number;
-  };
-  timezone: number;
-  id: number;
-  name: string;
-  cod: number;
-}
-
-interface LocationType {
-  latitude: string;
-  longtitude: string;
-}
 
 async function getForecast(location: LocationType): Promise<Forecast> {
 
@@ -61,20 +9,18 @@ async function getForecast(location: LocationType): Promise<Forecast> {
     `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longtitude}&appid=${appId}`
   );
   if (!res.ok) {
-    throw new Error(`This is not great ${error}`);
+    throw new Error(`Failed to fetch the weather data`);
   }
   return res.json();
 }
 
 export default async function WeatherNow(props: { location: LocationType }) {
-  const kelvin = 273.15;
   const location = props.location;
   const weather = await getForecast(location);
-  const temp = weather.main.temp - kelvin;
   return (
     <main>
       <h1>Forecast</h1>
-      <p>{temp}</p>
+      <Temperature tempInfo={weather.main}/>
       <p></p>
     </main>
   );

types/types.ts

@@ -0,0 +1,52 @@
+export interface Forecast {
+    coord: {
+      lon: number;
+      lat: number;
+    };
+    weather: {
+      id: number;
+      main: string;
+      description: string;
+      icon: string;
+    }[];
+    base: string;
+    main: {
+      temp: number;
+      feels_like: number;
+      temp_min: number;
+      temp_max: number;
+      pressure: number;
+      humidity: number;
+      sea_level: number;
+      grnd_level: number;
+    };
+    visibility: number;
+    wind: {
+      speed: number;
+      deg: number;
+      gust: number;
+    };
+    rain: {
+      onehour: number;
+    };
+    clouds: {
+      all: number;
+    };
+    dt: number;
+    sys: {
+      type: number;
+      id: number;
+      country: string;
+      sunrise: number;
+      sunset: number;
+    };
+    timezone: number;
+    id: number;
+    name: string;
+    cod: number;
+  }
+  
+export interface LocationType {
+    latitude: string;
+    longtitude: string;
+  }