add react-toastify for notifications and implement weather fetching functionality

frontend/src/components/WeatherCard.tsx

@@ -1,17 +1,40 @@
 import React from "react";
+import { useState } from "react";
+import { fetchWeather } from "../utils/apiFunc";
+import Cookies from "js-cookie";
+
+const WeatherCard: React.FC = () => {
+  const [city, setCity] = useState("");
+  const apiKey = Cookies.get("apiKey") || "";
+
+  const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCity(event.target.value);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchWeather(city, apiKey);
+  };
 
-const WeaatherCard: React.FC = () => {
   return (
     <div>
       <h2>Weather Card</h2>
       <p>Current Weather will be displayed here</p>
-      <form action="" method="post">
+      <form onSubmit={handleSubmit}>
         <label htmlFor="city">Enter City:</label>
-        <input type="text" id="city" name="city" placeholder="City Name" />
+        <input
+          type="text"
+          id="city"
+          name="city"
+          onChange={handleCityChange}
+          value={city}
+          placeholder="City Name"
+          required
+        />
         <button type="submit">Get Weather</button>
       </form>
     </div>
   );
 };
 
-export default WeaatherCard;
+export default WeatherCard;