Refactor code structure for improved readability and maintainability

frontend/index.html

@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="./src/assets/cloud-sun-fill.svg"
+      href="./src/assets/cloud-sun-fill.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Weather App</title>

frontend/src/components/Header.tsx

@@ -3,7 +3,7 @@ import ChangeAPI from "./ChangeAPI";
 import ChangePreferences from "./ChangePreferences";
 import { useState } from "react";
 import Cookies from "js-cookie";
-import logo from "../assets/cloud-sun-fill.svg";
+import logo from "../assets/cloud-sun-fill.png";
 
 const Header: React.FC = () => {
   const [apiCard, setApiCard] = useState(false);
@@ -76,7 +76,7 @@ const Header: React.FC = () => {
             </span>
           </button>
           <a
-            href="https://git.the1s.de/theis.gaedigk/weather-app/wiki"
+            href="https://github.com/theis-js/weather-app/wiki"
             target="_blank"
             rel="noopener noreferrer"
           >

frontend/src/components/WeatherForm.tsx

@@ -25,7 +25,7 @@ const WeatherCard: React.FC = () => {
         pending: "Fetching weather data...",
         success: "Weather data loaded successfully!",
         error:
-          "Failed to load weather data. Please check your entered city name.",
+          "Failed to load weather data. Please check your entered city name. (Error: x4040)",
       })
       .then(() => {
         if (localStorage.getItem("weather")) {

frontend/src/utils/apiFunc.ts

@@ -10,11 +10,14 @@ export const fetchWeather = async (
     `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
   ).then((response) => {
     if (response.status === 401) {
-      myToast("You are not authorized to access this resource. Please check your API key.", "error");
+      myToast(
+        "You are not authorized to access this resource. Please check your API key. (Error: x4010)",
+        "error"
+      );
     } else if (response.ok) {
       return response.json();
     } else {
-      myToast("Error fetching location data: " + response.statusText, "error");
+      myToast("Error fetching location data. (Error: x32)", "error");
     }
   });
   const lat = location[0].lat;

frontend/src/utils/changeAPIcookie.ts

@@ -4,5 +4,16 @@ import { myToast } from "./toastify";
 export const changeAPIcookie = (newApiKey: string) => {
   let apiKey15 = newApiKey.slice(0, 15);
   Cookies.set("apiKey", newApiKey);
-  myToast("API key updated successfully!" + " " + "Your new API key: " + apiKey15 + "...", "success");
+  if (Cookies.get("apiKey") === newApiKey) {
+    myToast(
+      "API key updated successfully!" +
+        " " +
+        "Your new API key: " +
+        apiKey15 +
+        "...",
+      "success"
+    );
+  } else {
+    myToast("Failed to update API key. (Error: x30)", "error");
+  }
 };