Merge branch 'main' into OriginBranch

Author: coder12git

README.md

@@ -1 +1,78 @@
-# Bon-Hack-tit
+
+
+
+  
+  
+  
+  
+  <a id="about"> </a>
+
+# FoodMeets
+
+
+
+
+Plan your meals with ease, from weekly menus to random recipes and ingredient-based suggestions.
+
+
+iMage
+
+
+## How to Setup
+
+1) Install [Node js](https://nodejs.org/en/download/)
+
+2) Clone the repository 
+```
+git clone https://github.com/coder12git/Bon-Hack-tit.git
+
+```
+
+3) To install dependencies run
+```
+npm i
+
+```
+
+4) To start the server run
+```
+npm start
+
+```
+
+
+## Sample menu and recipe
+
+Image
+
+Image
+
+
+## What it does
+Our web application is designed to make meal planning more convenient and efficient for busy individuals. With three key features, users can easily create a weekly menu based on their dietary needs and preferences, generate recipes based on the ingredients they have on hand, and try something new with exciting recipe ideas.
+
+The first feature, 
+- **Create your weekly menu**: Allows users to customize their meal plan by inputting their diet details, target calories, preferred cuisines, and ingredients they want to include or exclude from recipes. This feature takes the stress out of meal planning by providing users with recipe ideas that meet their nutritional needs and taste preferences. 
+
+The second feature, 
+- **What's in your fridge**: Allows users to make the most of the ingredients they already have at home. By inputting the ingredients they have on hand and the number of recipes they want to generate, users can easily access a variety of recipe ideas to inspire their meals and reduce food waste.
+
+The third feature,
+- **Try something new today**: It is perfect for users looking to add some variety to their meal rotation. By selecting tags and the number of recipes they want, users can explore new recipes and expand their culinary horizons.
+
+Additionally, we wanted to provide users with **a convenient way to access their meal plans and recipes without having to constantly log into our web application**. That's why we added a feature that allows users to **download their menus and recipe lists in a PDF file**. This way, users can easily access their meal plans and recipes offline, and even print them out if needed. We believe that this feature adds a lot of value to our application, making it even more convenient and user-friendly for busy people who are always on the go.
+
+Overall, our web application provides a user-friendly and efficient solution for meal planning, recipe generation, and nutrient tracking to help busy individuals make healthier and more delicious meals every day.
+
+
+## How it works
+To use **FoodMeets**, start by navigating to the home page and selecting one of the three features available. For example, if you want to plan out your weekly menu, select the "Create Your Weekly Menu" feature. Next, enter details such as your dietary preferences, target calories, cuisine preferences, and any ingredients you want to include or exclude from your recipes. Once you've entered all the necessary information, click the submit button.
+
+You will then be taken to a page where you can see your weekly menus. Click on any of the meals to see the complete recipe for that meal, including ingredients and instructions on how to prepare it. If you want to save the recipe for later, simply click on the download button to download the recipe as a .pdf file.
+
+Similarly, you can use the other two features of FoodMeets, "What's In Your Fridge" and "Try Something New Today," by following the same process of entering the necessary details and clicking the submit button. 
+
+
+
+
+

app.js

@@ -13,9 +13,9 @@ app.set("view engine", "ejs");
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(express.static("public"));
 
-const apiKey = "c7d40af634094a53a02a542268b9f073";
+const apiKey = "f8f19f5552fe4a64a5bd79038933bb05";
 
-// All the get request to render differrent page.
+// All the get request to render different page.
 
 app.get("/", (req, res) => {
   res.render("home");
@@ -29,6 +29,10 @@ app.get("/inputIngredient", (req, res) => {
   res.render("inputIngredient");
 });
 
+app.get("/inputRandom", (req, res) => {
+  res.render("inputRandom");
+});
+
 // POST request to render menus for a week based on user input
 
 app.post("/mealList", async (req, res) => {
@@ -98,20 +102,71 @@ app.post("/ingredientList", async (req, res) => {
     const recipesData = await generateRecipesByIngredients.json();
 
     // Generate recipe information
+    const recipeInfoPromises = recipesData.map(async (recipe) => {
+      const recipeInfo = await fetch(
+        `https://api.spoonacular.com/recipes/${recipe.id}/nutritionWidget.json?apiKey=${apiKey}`
+      );
+      const infoData = await recipeInfo.json();
+      return {
+        ...recipe,
+        nutrients: infoData,
+      };
+    });
 
-    const recipeInfo = await fetch(
-      `https://api.spoonacular.com/recipes/complexSearch?apiKey=c7d40af634094a53a02a542268b9f073`
-    );
-    const results = recipeInfo.json();
+    // Wait for all recipe nutrient information to be fetched
+    const recipesWithNutrients = await Promise.all(recipeInfoPromises);
 
     res.render("planMealsByIngredients", {
-      recipes: recipesData,
-      results: results,
+      recipes: recipesWithNutrients,
     });
 
-    // res.send(recipesData);
+    // res.send(recipesWithNutrients);
   } catch (error) {
-    res.send(error);
+    res.send("Sorry! Some error occurred. Please try again!");
+    console.log(error);
+  }
+});
+
+//POST request to generate random list of recipes based on tags provided by user
+
+app.post("/randomList", async (req, res) => {
+  // Tags and number provided by user
+
+  const number = req.body.number;
+  let tags = req.body.tags;
+  if (typeof tags === "strings") {
+    tags = req.body.tags.split(",");
+  }
+
+  try {
+    const { default: fetch } = await import("node-fetch");
+    const generateRandomRecipes =
+      await fetch(`https://api.spoonacular.com/recipes/random?number=${number}&tags=${tags}&apiKey=${apiKey}
+    `);
+
+    const randomData = await generateRandomRecipes.json();
+
+    // Generate Recipe information including nutrients
+
+    const recipeInfoPromises = randomData.recipes.map(async (recipe) => {
+      const recipeInfo = await fetch(
+        `https://api.spoonacular.com/recipes/${recipe.id}/nutritionWidget.json?apiKey=${apiKey}`
+      );
+      const infoData = await recipeInfo.json();
+      return {
+        ...recipe,
+        nutrients: infoData,
+      };
+    });
+
+    // Wait for all recipe nutrient information to be fetched
+    const recipesWithNutrients = await Promise.all(recipeInfoPromises);
+
+    res.render("randomMeals", {
+      recipes: recipesWithNutrients,
+    });
+  } catch (error) {
+    res.send("Sorry! Some error occurred. Please try again!");
     console.log(error);
   }
 });

package.json

@@ -4,7 +4,7 @@
   "description": "Meal Planning Web App",
   "main": "server.js",
   "scripts": {
-    "start": "nodemon server.js"
+    "start": "node server.js"
   },
   "repository": {
     "type": "git",

public/css/styles.css

@@ -1,4 +1,5 @@
 body * {
+
     font-family: 'Montserrat', sans-serif;
 }
 .homeBody {
@@ -129,4 +130,6 @@ h3.homeTitle {
         height: 300px;
         width: 300px;
     }
+=======
+  font-family: "Montserrat", sans-serif;
 }

public/images/favicon.ico

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FoodMeets</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
@@ -36,10 +37,20 @@
             <!-- Row -->
             <div class="w-full xl:w-3/4 lg:w-11/12 flex">
                 <!-- Col -->
+
                 <div class="w-full optionsWrapper">
                     <h3 class="text-center homeTitle">Welcome - Let's plan some meals!</h3>
                     <form class="menuWrapper">
                       <a href="/inputWeekPlanMeals" class="weeklyMenu component">
+                <div
+                    class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12 bg-cover rounded-l-lg"
+                    style="background-image: url('/images/food.png')"
+                ></div>
+                <!-- Col -->
+                <div class="w-full lg:w-7/12 bg-white p-5 rounded-lg lg:rounded-l-none">
+                    <h3 class="pt-4 text-2xl text-center">Welcome - Let's plan some meals!</h3>
+                    <form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
+                      <a href="/inputWeekPlanMeals">
                         <button
                           class="textBackground"
                           type="button"> Create your weekly menu
@@ -51,12 +62,20 @@
                           type="button">What's in your fridge?
                     </button>
                       </a>
-                      <a href="file:///C:/Users/tulsa/OneDrive/Documents/GitHub/Bon-Hack-tit/views/inputIngredient.html" class="somethingNew component">
+                      <a href="/inputRandom" class="somethingNew component">
                         <button
                           class="textBackground"
                           type="button">Try something new today
                       </button>
                       </a>
+                    <br> <br>
+                    <a href="/inputRandom">
+                                    <button
+                                        class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline"
+                                        type="button">Try something new today
+                                    </button>
+                    </a>
+                    <br> <br>
 
 
                         </div>

views/home.ejs

@@ -4,12 +4,13 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Meal Planning App</title>
+    <title>FoodMeets</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
     <link
       href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
       rel="stylesheet"
     />
-    <link href="css/styles.css" rel="stylesheet" />
+    <link href="/css/styles.css" rel="stylesheet" />
   </head>
 
   <body class="font-mono bg-gray-400">
@@ -19,7 +20,7 @@
       class="flex items-center justify-between flex-wrap bg-orange-600 p-6"
     >
       <div class="flex items-center flex-shrink-0 text-white mr-6">
-        <span class="font-semibold text-xl tracking-tight">Plan Your Meal</span>
+        <span class="font-semibold text-xl tracking-tight">FoodMeets</span>
       </div>
       <div class="block md:hidden">
         <button