lab completed

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,45 @@
 // 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 function 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((response) => response.data);
 }
 
+export function displayLocation(locationDetails: Location): void {
+  const locationNameElm = document.getElementById(
+    "location-name"
+  ) as HTMLElement;
+  locationNameElm.innerText = "" + locationDetails.name;
+  const countryElm = document.getElementById("country") as HTMLElement;
+  countryElm.innerText = "(" + locationDetails.country + ")";
+}
 
+export function displayWeatherData(obj: WeatherResponse) {
+  const temperatureElm = document.getElementById("temperature") as HTMLElement;
+  const temperature = obj.current_weather.temperature;
+  const temperatureUnits = obj.current_weather_units.temperature;
+  temperatureElm.innerText = `Temperature: ${temperature} ${temperatureUnits}`;
+  // display wind speed
+  const windspeedElm = document.getElementById("windspeed") as HTMLElement;
+  const windspeed = obj.current_weather.windspeed;
+  const windspeedUnits = obj.current_weather_units.windspeed;
+  windspeedElm.innerText = `Wind Speed: ${windspeed} ${windspeedUnits}`;
 
+  // display wind direction
+  const winddirectionElm = document.getElementById(
+    "winddirection"
+  ) as HTMLElement;
+  const winddirection = obj.current_weather.winddirection;
+  const winddirectionUnits = obj.current_weather_units.winddirection;
+  winddirectionElm.innerText = `Wind Direction: ${winddirection} ${winddirectionUnits}`;
+}