Kodehode-Stavanger · github-classroom · Apr 10, 2024 · Apr 10, 2024 · Apr 22, 2024 · Apr 23, 2024
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+VITE_EDAMAM_APP_ID = 84f7612f
+VITE_EDAMAM_APP_KEY = fc5d604e2641548209bdfaaec1e34129
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/nEc54K2B)
 # React API project
 
 ### In this project you will be using React to create a project using an API for content.

diff --git a/images/bg1.jpg b/images/bg1.jpg
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>API project</title>
+    <link rel="stylesheet" href="src/styles.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.8",
+    "history": "^5.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

diff --git a/pages/HomePage.jsx b/pages/HomePage.jsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+import axios from "axios";
+import "../src/App.css"; // Import CSS file for styling
+
+const HomePage = () => {
+  const [ingredients, setIngredients] = useState("");
+  const [recipes, setRecipes] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const handleInputChange = (event) => {
+    setIngredients(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+
+    try {
+      const response = await axios.get("https://api.edamam.com/search", {
+        params: {
+          q: ingredients,
+          app_id: import.meta.env.VITE_EDAMAM_APP_ID,
+          app_key: import.meta.env.VITE_EDAMAM_APP_KEY,
+        },
+      });
+
+      if (response.data.hits) {
+        setRecipes(response.data.hits.map((hit) => hit.recipe));
+      } else {
+        // Handle case when no recipes are found
+        setRecipes([]);
+      }
+    } catch (error) {
+      console.error("Error fetching recipes:", error);
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className="container">
+      <div className="search-container">
+        <h1>Meal Planner</h1>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            value={ingredients}
+            onChange={handleInputChange}
+            placeholder="Enter ingredients (comma separated)"
+          />
+          <button type="submit" disabled={loading}>
+            Search
+          </button>
+        </form>
+        {loading && <p>Loading...</p>}
+      </div>
+      <div className="recipe-container">
+        {recipes.map((recipe) => (
+          <div className="recipe-box" key={recipe.uri}>
+            <h2>{recipe.label}</h2>
+            <img src={recipe.image} alt={recipe.label} />
+            <ul>
+              {recipe.ingredients.map((ingredient, index) => (
+                <li key={index}>{ingredient.text}</li>
+              ))}
+            </ul>
+            <a href={recipe.url} target="_blank" rel="noopener noreferrer">
+              View Recipe
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/pages/NotFound.jsx b/pages/NotFound.jsx
@@ -0,0 +1,13 @@
+// NotFound.js
+import React from "react";
+
+const NotFound = () => {
+  return (
+    <div>
+      <h1>404 🙇‍♂️- Page Not Found</h1>
+      <p>OOPS!The page you are looking for does not exist🙅‍♂️.</p>
+    </div>
+  );
+};
+
+export default NotFound;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		VITE_EDAMAM_APP_ID = 84f7612f
		VITE_EDAMAM_APP_KEY = fc5d604e2641548209bdfaaec1e34129