done

src/main.ts

@@ -1 +1,31 @@
 // src/main.ts
+
+import { displayLocation, displayWeatherData, getCurrentWeather, getLocation, updateBackground } from "./utils";
+
+// src/main.ts
+
+const weatherForm = document.getElementById("weather-form") as HTMLFormElement;
+
+weatherForm.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const locationInput = document.getElementById("location") as HTMLInputElement;
+    const locationName = locationInput.value;
+    locationInput.value = "";
+
+    getLocation(locationName)
+        .then((response) => {
+            if (!response.results) {
+                throw new Error("Location not found");
+            }
+            const location = response.results[0];
+            displayLocation(location);
+            return getCurrentWeather(location);
+        })
+        .then((weatherData) => {
+            displayWeatherData(weatherData);
+            updateBackground(weatherData.current_weather.weathercode, weatherData.current_weather.is_day);
+        })
+        .catch((error) => {
+            console.log(error);
+        });
+});

src/types.ts

@@ -28,3 +28,30 @@ export type LocationResponse = {
     generationtime_ms: number;
 }
 
+export type WeatherResponse = {
+    latitude: number,
+    longitude: number,
+    generationtime_ms: number,
+    utc_offset_seconds: number,
+    timezone: string,
+    timezone_abbreviation: string,
+    elevation: number,
+    current_weather_units: {
+        time: string,
+        interval: string,
+        temperature: string,
+        windspeed: string,
+        winddirection: string,
+        is_day: string,
+        weathercode: string
+    },
+    current_weather: {
+        time: string,
+        interval: number,
+        temperature: number,
+        windspeed: number,
+        winddirection: number,
+        is_day: number,
+        weathercode: number
+    }
+}

src/utils.ts

@@ -1,14 +1,86 @@
 // src/utils.ts
 
-import axios from 'axios';
-import { LocationResponse, Location } from "./types";
-
-
+import axios from "axios";
+import { LocationResponse, Location, WeatherResponse } from "./types";
 
 export function getLocation(locationName: string): Promise<LocationResponse> {
     const url = `https://geocoding-api.open-meteo.com/v1/search?name=${locationName}&count=1`;
-    return axios.get(url).then((response) => response.data);
+    console.log("Request:", url);
+    return axios.get(url).then((response) => {
+        console.log("Response:", response.data);
+        return response.data;
+    });
+}
+
+export function getCurrentWeather(locationDetails: Location): Promise<WeatherResponse> {
+    const url = `meteo.com/v1/forecast?latitude=${locationDetails.latitude}&longitude=${locationDetails.longitude}&current_weather=true&models=icon_global`;
+    console.log("Request:", url);
+    return axios.get(url).then((response) => {
+        console.log("Response:", response.data);
+        return response.data;
+    });
+}
+
+export function displayLocation(locationDetails: Location) {
+    const locationElement = document.getElementById("location-name") as HTMLElement;
+    locationElement.innerText = "" + locationDetails.name;
+
+    const countryElement = document.getElementById("country") as HTMLElement;
+    countryElement.innerText = "(" + locationDetails.country + ")";
+}
+
+export function displayWeatherData(obj: WeatherResponse) {
+    const temperatureElement = document.getElementById("temperature") as HTMLElement;
+    const temperature = obj.current_weather.temperature;
+    const temperatureUnits = obj.current_weather_units.temperature;
+    temperatureElement.innerText = `Temperature: ${temperature} ${temperatureUnits}`;
+
+    const windspeedElement = document.getElementById("windspeed") as HTMLElement;
+    const windspeed = obj.current_weather.windspeed;
+    const windspeedUnits = obj.current_weather_units.windspeed;
+    windspeedElement.innerText = `Wind Speed: ${windspeed} ${windspeedUnits}`;
+
+    const winddirectionElement = document.getElementById("winddirection") as HTMLElement;
+    const winddirection = obj.current_weather.winddirection;
+    const winddirectionUnits = obj.current_weather_units.winddirection;
+    winddirectionElement.innerText = `Wind Direction: ${winddirection} ${winddirectionUnits}`;
 }
 
+export function updateBackground(weatherCode: number, isDay: number) {
+
+    weatherCode = Number(weatherCode.toString().charAt(0));
 
+    document.body.className = getWeatherType();
 
+    function getWeatherType() {
+        switch (weatherCode) {
+            case 0:
+            case 1:
+                if (isDay === 0) {
+                    return "sunny-night";
+                }
+                return "sunny";
+            case 2:
+                if (isDay === 0) {
+                    return "partly-cloudy-night";
+                }
+                return "partly-cloudy";
+            case 3:
+                return "cloudy";
+            case 4:
+                return "foggy";
+            case 5:
+                return "drizzle";
+            case 6:
+                return "rain";
+            case 7:
+                return "snow";
+            case 8:
+                return "showers";
+            case 9:
+                return "thunderstorm";
+            default:
+                return "";
+        }
+    }
+}