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

frontend/src/components/ChangeAPI.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { changeAPIcookie } from "../utils/changeAPIcookie";
+
+interface Props {
+  currentAPIKey: string;
+}
+
+function ChangeAPI({ currentAPIKey }: Props) {
+  const [apiKey, setApiKey] = useState(currentAPIKey);
+
+  return (
+    <div>
+      <h2>Change API Key</h2>
+      <p>Update your API key to fetch weather data.</p>
+      <form>
+        <label htmlFor="apiKey">API Key:</label>
+        <input
+          type="text"
+          id="apiKey"
+          name="apiKey"
+          placeholder="Enter your API key"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          required
+        />
+        <button type="button" onClick={() => changeAPIcookie(apiKey)}>
+          Update API Key
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default ChangeAPI;

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} />}
+    </>
   );
 };
 

frontend/src/utils/changeAPIcookie.ts

@@ -0,0 +1,7 @@
+import Cookies from "js-cookie";
+import { myToast } from "./toastify";
+
+export const changeAPIcookie = (newApiKey: string) => {
+  Cookies.set("apiKey", newApiKey);
+  myToast("API key updated successfully!", "success");
+};