feat: implement WeatherForm component and integrate weather fetching functionality.

Also added a weather data card where the design is displayed

frontend/src/utils/apiFunc.ts

@@ -1,4 +1,10 @@
-export const fetchWeather = async (city: string, apiKey: string) => {
+export type units = "metric" | "imperial";
+
+export const fetchWeather = async (
+  city: string,
+  apiKey: string,
+  units: units
+) => {
   // Get location data
   const location = await fetch(
     `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
@@ -18,7 +24,7 @@ export const fetchWeather = async (city: string, apiKey: string) => {
 
   // Get weather data
   const weather = await fetch(
-    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}`
+    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=${units}`
   ).then((response) => response.json());
   localStorage.setItem("weather", JSON.stringify(weather));
 };