From 7e42fc3d9e3226d284d472fc5317ec4b50e63c7a Mon Sep 17 00:00:00 2001 From: Skyteks Date: Wed, 27 Nov 2024 12:26:52 +0100 Subject: [PATCH 1/2] done --- src/main.ts | 29 +++++++++++++++++++++++++++++ src/types.ts | 27 +++++++++++++++++++++++++++ src/utils.ts | 43 ++++++++++++++++++++++++++++++++++++++----- 3 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/main.ts b/src/main.ts index 70569b8..a8197b7 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1 +1,30 @@ // src/main.ts + +import { displayLocation, displayWeatherData, getCurrentWeather, getLocation } 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); + }) + .catch((error) => { + console.log(error); + }); +}); \ No newline at end of file diff --git a/src/types.ts b/src/types.ts index 98e677f..bb6d606 100644 --- a/src/types.ts +++ b/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 + } +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index 552dbe8..770ba16 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,14 +1,47 @@ // 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 { 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 { + const url = `meteo.com/v1/forecast?latitude=${locationDetails.latitude}&longitude=${locationDetails.longitude}¤t_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}`; +} \ No newline at end of file From dc48ae71376eb783c8acae06d0cb5aa883c42060 Mon Sep 17 00:00:00 2001 From: Skyteks Date: Wed, 27 Nov 2024 12:45:53 +0100 Subject: [PATCH 2/2] bonus --- src/main.ts | 3 ++- src/utils.ts | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index a8197b7..6cc0885 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,6 @@ // src/main.ts -import { displayLocation, displayWeatherData, getCurrentWeather, getLocation } from "./utils"; +import { displayLocation, displayWeatherData, getCurrentWeather, getLocation, updateBackground } from "./utils"; // src/main.ts @@ -23,6 +23,7 @@ weatherForm.addEventListener("submit", (e) => { }) .then((weatherData) => { displayWeatherData(weatherData); + updateBackground(weatherData.current_weather.weathercode, weatherData.current_weather.is_day); }) .catch((error) => { console.log(error); diff --git a/src/utils.ts b/src/utils.ts index 770ba16..17600e6 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -44,4 +44,43 @@ export function displayWeatherData(obj: WeatherResponse) { 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 ""; + } + } } \ No newline at end of file