completed lab

src/main.ts

@@ -1 +1,36 @@
 // src/main.ts
+import {
+  getLocation,
+  getCurrentWeather,
+  displayLocation,
+  displayWeatherData,
+} from "./utils.ts";
+
+const form = document.getElementById("weather-form") as HTMLElement;
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const locationInput = document.getElementById("location") as HTMLInputElement;
+  const locationName = locationInput.value;
+  console.log(
+    `The user has submitted the form and is searching for a location with this name ${locationName}`
+  );
+  locationInput.value = "";
+
+  getLocation(locationName)
+    .then((res) => {
+      if (res.results) {
+        const location = res.results[0];
+        displayLocation(location);
+        return getCurrentWeather(location);
+      } else {
+        throw new Error("location not found");
+      }
+    })
+
+    .then((weatherData) => {
+      displayWeatherData(weatherData);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+});

src/types.ts

@@ -1,30 +1,57 @@
 // src/types.ts
 
 export type Location = {
-    id: number;
-    name: string;
-    latitude: number;
-    longitude: number;
-    elevation: number;
-    feature_code: string;
-    country_code: string;
-    timezone: string;
-    population: number;
-    postcodes: string[];
-    country_id: number;
-    country: string;
-    admin1?: string;
-    admin2?: string;
-    admin3?: string;
-    admin4?: string;
-    admin1_id?: number;
-    admin2_id?: number;
-    admin3_id?: number;
-    admin4_id?: number;
-}
+  id: number;
+  name: string;
+  latitude: number;
+  longitude: number;
+  elevation: number;
+  feature_code: string;
+  country_code: string;
+  timezone: string;
+  population: number;
+  postcodes: string[];
+  country_id: number;
+  country: string;
+  admin1?: string;
+  admin2?: string;
+  admin3?: string;
+  admin4?: string;
+  admin1_id?: number;
+  admin2_id?: number;
+  admin3_id?: number;
+  admin4_id?: number;
+};
 
 export type LocationResponse = {
-    results?: Location[];
-    generationtime_ms: number;
-}
+  results?: Location[];
+  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,39 @@
 // 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);
+  const url = `https://geocoding-api.open-meteo.com/v1/search?name=${locationName}&count=1`;
+  return axios.get(url).then((response) => response.data);
 }
 
+export const getCurrentWeather = (
+  locationDetails: Location
+): Promise<WeatherResponse> => {
+  const url = `https://api.open-meteo.com/v1/forecast?latitude=${locationDetails.latitude}&longitude=${locationDetails.longitude}&current_weather=true&models=icon_global`;
+  return axios.get(url).then((res) => {
+    return res.data;
+  });
+};
 
+export const displayLocation = (locationDetails: Location) => {
+  const locationEl = document.getElementById("location-name") as HTMLElement;
+  const countryEl = document.getElementById("country") as HTMLElement;
+  locationEl.innerText = locationDetails.name;
+  countryEl.innerText = locationDetails.country;
+};
 
+export const displayWeatherData = (obj: WeatherResponse) => {
+  const temperaturEl = document.getElementById("temperature") as HTMLElement;
+  const windspeedEl = document.getElementById("windspeed") as HTMLElement;
+  const winddirectionEl = document.getElementById(
+    "winddirection"
+  ) as HTMLElement;
+  temperaturEl.innerText =
+    obj.current_weather.temperature + obj.current_weather_units.temperature;
+  windspeedEl.innerText =
+    obj.current_weather.windspeed + obj.current_weather_units.windspeed;
+  winddirectionEl.innerText =
+    obj.current_weather.winddirection + obj.current_weather_units.winddirection;
+};