done

src/main.ts

@@ -1 +1,43 @@
 // src/main.ts
+
+import {
+  getLocation,
+  getCurrentWeather,
+  displayLocation,
+  displayWeatherData,
+} from "./utils.ts";
+
+const form = document.getElementById("weather-form") as HTMLFormElement;
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault(); // Prevent the default form submission behavior
+
+  const locationInput = document.getElementById("location") as HTMLInputElement;
+  const locationName = locationInput.value;
+  locationInput.value = ""; // Clear the form
+
+  getLocation(locationName)
+    .then((response) => {
+      if (response.results) {
+        // Get the first result (the api may provide multiple results if there's multiple locations with the same or similar names, we will just use the first one for simplicity)
+        const location = response.results[0];
+
+        // Display info about the location
+        displayLocation(location);
+
+        // Get info about the weather for that location
+        return getCurrentWeather(location);
+      } else {
+        // If there's no results, throw an error
+        throw new Error("Location not found");
+      }
+    })
+    .then((weatherData) => {
+      // Display info about the weather
+      displayWeatherData(weatherData);
+    })
+    .catch((error) => {
+      console.log("Error getting weather data");
+      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,50 @@
 // 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);
+}
+
+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 {
+  // display location name
+  const locationNameElm = document.getElementById(
+    "location-name"
+  ) as HTMLElement;
+  locationNameElm.innerText = "" + locationDetails.name;
 
-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);
+  // display country
+  const countryElm = document.getElementById("country") as HTMLElement;
+  countryElm.innerText = "(" + locationDetails.country + ")";
 }
 
+export function displayWeatherData(obj: WeatherResponse): void {
+  // display temperature
+  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}`;
+}