feat: enhance ChangeAPI and ChangePreferences components; add "API key update" functionality and save preferences feature

frontend/src/components/WeatherForm.tsx

@@ -10,8 +10,8 @@ const WeatherCard: React.FC = () => {
   const [city, setCity] = useState("");
   const [loading, setLoading] = useState(false);
   const [weatherData, setWeatherData] = useState(false);
-  console.log(loading); // only for better reading because a syntax error would appear
   const getAPIKey = () => Cookies.get("apiKey") || "";
+  const getUnit = () => localStorage.getItem("unit") || "metric";
 
   const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCity(event.target.value);
@@ -21,10 +21,11 @@ const WeatherCard: React.FC = () => {
     event.preventDefault();
     setLoading(true);
     toast
-      .promise(fetchWeather(city, getAPIKey(), "metric"), {
+      .promise(fetchWeather(city, getAPIKey(), getUnit()), {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
-        error: "Error loading weather data! (Check console for details)",
+        error:
+          "Failed to load weather data. Please check your entered city name.",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {
@@ -67,12 +68,40 @@ const WeatherCard: React.FC = () => {
           required
           className="border border-blue-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono"
         />
-        <button
-          type="submit"
-          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
-        >
-          Get Weather
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            type="submit"
+            className="flex-1 bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-4 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+          >
+            Get Weather
+          </button>
+          {weatherData && (
+            <button
+              type="button"
+              onClick={() => {
+                setWeatherData(false);
+                localStorage.removeItem("weather");
+              }}
+              className="flex-shrink-0 bg-red-500 hover:bg-red-600 text-white rounded-xl p-3 shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-400"
+              aria-label="Close weather data"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18 18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
       </form>
       {weatherData && <WeatherData />}
     </div>