turingschool-examples · pitter3 · Aug 26, 2023 · Aug 27, 2023 · Aug 27, 2023 · Aug 27, 2023
diff --git a/README.md b/README.md
@@ -1,18 +1,25 @@
-# What's Cookin'? Starter Kit
+# What's Cookin'
 
-The details of this project are outlined in the <a href="https://frontend.turing.edu/projects/What%27sCookin-PartOne.html" target="\__blank">project spec</a>.
+### Abstract:
+View delicious meals, sauces, desserts and more from over 40 different recipes! Search for specific recipes based on ingredients or name. Filter recipes with the included filters. Click on a recipe for a detailed ingredients and directions pop-up. Save a recipe to the saved recipe section by clicking the button on the bottom of the recipe container.
 
-## Set Up
+### Installation Instructions:
+No need to install! View here - [GitHub Pages](DEPLOYED URL HERE)
 
-1. Within your group, decide on **one** person to have the project repository on their Github account. This person will *fork* this repository - on the top right corner of the page, click the fork button.
-1. Add all group members and your PM as collaborators on the repo  
-1. All group members should then clone down the forked repository. Since you don't want your project to be named "whats-cookin-starter-kit", add an optional argument after the repo url when cloning. The command should look like this: `git clone [remote-address] [what your group wants to name the repo]`.
-1. Once you have cloned the repo, change into the directory and install the project dependencies. Run `npm install` or `npm i` to install project dependencies.
-1. Run `npm start` in the terminal to see the HTML page (you should see some boilerplate HTML displayed on the page).  
-    - `Control + C` is the command to stop running the local server. Closing the terminal without stopping the server first could allow the server to continue to run in the background and cause problems.  
-        - This command is not specific to Webpack; make note of it for future use.
-1. Do not run `npm audit fix --force`. This will update to the latest version of packages. We need to be using `[email protected]` which is not the latest version. If you start to run into Webpack errors, first check that all group members are using the correct version.
+## Preview of App:
+![WhatsCookinGif](GIF URL HERE)
 
-## Testing
 
-Mocha and chai are already set up, with a boilerplate test for you.
+## Context:
+This is our first group project of Mod 2 at Turing School of Software & Design. We were given ~1 week to create this project from scratch using a provided comp found [here](https://frontend.turing.edu/projects/module-2/whats-cookin-part-one.html).
+
+## Contributors:
+[Johann Dee](https://github.com/joh-ann), [Nicole Rue](https://github.com/nicolerue), [Patrick Eitel](https://github.com/pitter3)
+
+## Learning Goals:
+- Use object and array prototype methods to perform data manipulation.
+- Create a user interface that is easy to use and clearly displays information.
+- Write DRY, reusable code that follows SRP and trends toward function purity.
+- Implement a robust testing suite using TDD.
+- Make network requests to retrieve data.
+- Collaborate productively and professionally as a team. Ensure all team members are able to be heard and contribute throughout the project.
diff --git a/dist/bundle.js b/dist/bundle.js
@@ -2,7 +2,7 @@
 
 /******/ (() => { // webpackBootstrap
   var __webpack_exports__ = {};
-  alert('hello')
+  // alert('hello')
   /******/
 })()
   ;
diff --git a/dist/index.html b/dist/index.html
@@ -1,12 +1,92 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
-    <title>Whats Cookin</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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=Kumbh+Sans:wght@200;300;800;900&family=Manrope:wght@200;700;800&family=Merienda:wght@400;800&family=Poppins:wght@100&family=Sora:wght@200;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/src/styles.css" />
+    <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=Cedarville+Cursive&family=Manrope:wght@400;700&family=Poppins&display=swap" rel="stylesheet"><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=Caveat:wght@400;500;600&family=Cedarville+Cursive&family=Inter:wght@100;200;300;400;500;700&family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,800;1,200&family=Quicksand:wght@300;400;500;600&family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
+    <title>What's Cookin'?</title>
   </head>
   <body>
-    <h1>Whats Cookin</h1>
+    <!-- START OF HOME PAGE -->
+    <main>
+    <header>
+      <h1>What's Cookin'</h1>
+    </header>
+    <section class="nav">
+      <input class="input-name" type="text" placeholder="Search Recipe by Name.." />
+      <input class="input-ingredient" type="text" placeholder="Search Recipe by Ingredient.." />
+
+      <section class="tag-buttons">
+        <!-- tag buttons go here -->
+      </section>
+      <button class="view-saved">View Saved Recipes</button>
+    </section>
+    <section class="recipes">
+      <div class="recipe-card">
+        <!--recipe cards go here-->
+        <button class="save-recipe-btn">Save Recipe</button>
+       </div>
+       <div class="recipe-card">
+        <button class="save-recipe-btn">Save Recipe</button>
+      </div>
+      <div class="recipe-card">
+        <button class="save-recipe-btn">Save Recipe</button>
+        </div>
+        <div class="recipe-card">
+        <button class="save-recipe-btn">Save Recipe</button>
+        </div>
+      </div>
+    </section>
+    <!-- modal -->
+    <section class="modal">
+    <div class="modal-overlay">
+      <div class="modal-container">
+        <ul class = "modal-tags">
+        </ul>
+        <div class="modal-title-directions">
+         <h3 class="modal-title"></h3>
+         <h3 class="modal-directions">
+          Directions
+         </h3>
+         <h4 class="modal-directions-details">
+          <ul class="modal-directions-list">
+            <li></li>
+          </ul>
+         </h4>
+        </div>
+        <div class="modal-ingredients-cost">
+          <h3 class="modal-cost"></h3>
+          <h3 class="modal-ingredients">
+            ~Ingredients~
+          </h3>
+          <h4 class="modal-ingredients-details">
+          <ul class="modal-ingredients-list">
+          </ul>
+        </h4>
+        </div>
+
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="close-btn">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+
+      </div>
+    </div>
+  </section>
+        <!-- end of modal -->
+  </main>
+  <!-- END OF HOME PAGE -->
+
+  </main>
+  <!-- END OF HOME PAGE -->
   </body>
   <!-- Do not include the scripts.js file here - it is done automatically by the webpack server -->
   <script src="bundle.js"></script>
-</html>
+</html>
diff --git a/images/antipasti.png b/images/antipasti.png
diff --git a/images/antipasto.png b/images/antipasto.png
diff --git a/images/appetizer.png b/images/appetizer.png
diff --git a/images/breakfast.png b/images/breakfast.png
diff --git a/images/brunch.png b/images/brunch.png
diff --git a/images/condiment.png b/images/condiment.png
diff --git a/images/dinner.png b/images/dinner.png
diff --git a/images/dip.png b/images/dip.png
diff --git a/images/hor d'oeuvre.png b/images/hor d'oeuvre.png
diff --git a/images/lunch.png b/images/lunch.png
diff --git a/images/main course.png b/images/main course.png
diff --git a/images/main dish.png b/images/main dish.png
diff --git a/images/morning meal.png b/images/morning meal.png
diff --git a/images/salad.png b/images/salad.png
diff --git a/images/sauce.png b/images/sauce.png
diff --git a/images/side dish.png b/images/side dish.png
diff --git a/images/snack.png b/images/snack.png
diff --git a/images/spread.png b/images/spread.png
diff --git a/images/starter.png b/images/starter.png
diff --git a/images/turing-logo.png b/images/turing-logo.png
diff --git a/src/apiCalls.js b/src/apiCalls.js
@@ -1,4 +1,25 @@
 // Your fetch requests will live here!
 
+export const fetchUsers = fetch(
+  "https://what-s-cookin-starter-kit.herokuapp.com/api/v1/users"
+)
+  .then((response) => response.json())
+  .then((data) => {
+    return data.users;
+  });
 
-console.log('I will be a fetch request!')
+export const fetchIngredients = fetch(
+  "https://what-s-cookin-starter-kit.herokuapp.com/api/v1/ingredients"
+)
+  .then((response) => response.json())
+  .then((data) => {
+    return data.ingredients;
+  });
+
+export const fetchRecipes = fetch(
+  " https://what-s-cookin-starter-kit.herokuapp.com/api/v1/recipes"
+)
+  .then((response) => response.json())
+  .then((data) => {
+    return data.recipes;
+  });
diff --git a/src/data/ingredients-test-data.js b/src/data/ingredients-test-data.js
@@ -0,0 +1,29 @@
+const ingredientsTestData = [
+  {
+    "id": 20081,
+    "name": "wheat flour",
+    "estimatedCostInCents": 142
+  },
+  {
+    "id": 18372,
+    "name": "bicarbonate of soda",
+    "estimatedCostInCents": 582
+  },
+  {
+    "id": 1123,
+    "name": "eggs",
+    "estimatedCostInCents": 472
+  },
+  {
+    "id": 19335,
+    "name": "sucrose",
+    "estimatedCostInCents": 902
+  },
+  {
+    "id": 19206,
+    "name": "instant vanilla pudding",
+    "estimatedCostInCents": 660
+  }
+];
+
+export default ingredientsTestData