diff --git a/src/main.ts b/src/main.ts
index 70569b8..2910a16 100644
--- a/src/main.ts
+++ b/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);
+    });
+
+});
+
diff --git a/src/types.ts b/src/types.ts
index 98e677f..d1c360f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -28,3 +28,31 @@ 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;
+    };
+};
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
index 552dbe8..016dabf 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -2,7 +2,7 @@
 
 import axios from 'axios';
 import { LocationResponse, Location } from "./types";
-
+import { LocationResponse, Location, WeatherResponse } from "./types.ts";
 
 
 export function getLocation(locationName: string): Promise<LocationResponse> {
@@ -10,5 +10,38 @@ export function getLocation(locationName: string): Promise<LocationResponse> {
     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) {
+    // display location name
+    const locationNameElm = document.getElementById('location-name') as HTMLElement;
+    locationNameElm.innerText = "" + locationDetails.name;
+
+    // display country
+    const countryElm = document.getElementById('country') as HTMLElement;
+    countryElm.innerText = "(" + locationDetails.country + ")";
+}
+
 
+export function displayWeatherData(obj: WeatherResponse) {
+    // 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}`;
+}
\ No newline at end of file