New feature: You can now change the api key graphically with an changeAPI card.

frontend/src/components/Header.tsx

@@ -1,19 +1,20 @@
 import React from "react";
+import ChangeAPI from "./ChangeAPI";
+import { useState } from "react";
 import Cookies from "js-cookie";
 
 const Header: React.FC = () => {
-  const setApiKey = () => {
-    const apiKey = prompt("Enter your API key:");
-    if (apiKey) {
-      Cookies.set("apiKey", apiKey);
-    }
-    console.log(Cookies.get("apiKey"));
-  };
+  const [apiCard, setApiCard] = useState(false);
+  const apiKey = Cookies.get("apiKey") || "";
+
   return (
-    <header>
-      <h1>Weather App</h1>
-      <button onClick={() => setApiKey()}>Set API Key</button>
-    </header>
+    <>
+      <header>
+        <h1>Weather App</h1>
+        <button onClick={() => setApiCard(true)}>Set API Key</button>
+      </header>
+      {apiCard && <ChangeAPI currentAPIKey={apiKey} />}
+    </>
   );
 };