diff --git a/dist/index.html b/dist/index.html index 630ecfc1c1..51be351635 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,12 +1,87 @@ - + - - Whats Cookin + + + Hungry? -

Whats Cookin

+
+
+

Find a Recipe

+
+
+

Search Bar

+
+ + +
+
+
+

Tags

+ +
+
+
+ Placeholder image 1 + Placeholder image 2 + Placeholder image 3 +
+
+
+ + + + + + + - - diff --git a/pull_request_template.md b/pull_request_template.md new file mode 100644 index 0000000000..ed87e2bb9b --- /dev/null +++ b/pull_request_template.md @@ -0,0 +1,12 @@ +What kind of change does this PR introduce? +[] Bug fix (non-breaking change which fixes an issue) +[] New feature (non-breaking change which adds functionality) +[] Breaking change (fix or feature that would cause existing functionality to change) + +Issue/feature/bug description: + +Checklist before requesting a review +[] I have performed a self-review of my code +[] I have refactored my code before this push +[] The commit message follows our guidelines +[] My code follows the code style of this project. diff --git a/src/data/sample-ingredients.js b/src/data/sample-ingredients.js new file mode 100644 index 0000000000..f595b803f3 --- /dev/null +++ b/src/data/sample-ingredients.js @@ -0,0 +1,57 @@ +export const sampleIngredients = [ +{ + "id": 9079, + "name": "dried cranberries", + "estimatedCostInCents": 921 +}, +{ + "id": 11935, + "name": "catsup", + "estimatedCostInCents": 666 +}, +{ + "id": 12151, + "name": "pistachio", + "estimatedCostInCents": 813 +}, +{ + "id": 11821, + "name": "red sweet peppers", + "estimatedCostInCents": 1027 +}, +{ + "id": 6615, + "name": "vegetable stock", + "estimatedCostInCents": 613 +}, +{ + "id": 1055062, + "name": "boneless skinless chicken breasts", + "estimatedCostInCents": 897 +}, +{ + "id": 1002030, + "name": "black pepper", + "estimatedCostInCents": 441 +}, +{ + "id": 6168, + "name": "tabasco sauce", + "estimatedCostInCents": 859 +}, +{ + "id": 19296, + "name": "runny honey", + "estimatedCostInCents": 742 +}, +{ + "id": 98871, + "name": "hawaiian sweet rolls", + "estimatedCostInCents": 535 +}, +{ + "id": 1001, + "name": "butter", + "estimatedCostInCents": 618 +}, +]; \ No newline at end of file diff --git a/src/data/sample-recipes.js b/src/data/sample-recipes.js new file mode 100644 index 0000000000..c91a1a8f27 --- /dev/null +++ b/src/data/sample-recipes.js @@ -0,0 +1,586 @@ +export const sampleRecipes = [ +{ + "id": 991136, + "image": "https://spoonacular.com/recipeImages/991136-556x370.jpg", + "ingredients": [ + { + "id": 1001, + "quantity": { + "amount": 0.25, + "unit": "cup" + } + }, + { + "id": 98871, + "quantity": { + "amount": 12, + "unit": "" + } + }, + { + "id": 19296, + "quantity": { + "amount": 0.25, + "unit": "cup" + } + }, + { + "id": 6168, + "quantity": { + "amount": 2, + "unit": "tablespoons" + } + }, + { + "id": 1002030, + "quantity": { + "amount": 0.25, + "unit": "teaspoon" + } + }, + { + "id": 1055062, + "quantity": { + "amount": 1, + "unit": "pound" + } + } + ], + "instructions": [ + { + "instruction": "Place chicken in a 3-qt. slow cooker. Toss with 2 tablespoons hot sauce and pepper; cook, covered, on low until tender, 3-4 hours.", + "number": 1 + }, + { + "instruction": "Remove chicken; discard cooking juices. In a small saucepan, combine butter, honey and remaining hot sauce; cook and stir over medium heat until blended. Shred chicken with two forks; stir into sauce and heat through.", + "number": 2 + }, + { + "instruction": "Serve on rolls with optional ingredients as desired. Freeze option: Freeze cooled chicken mixture in freezer containers. To use, partially thaw in refrigerator overnight. Microwave, covered, on high in a microwave-safe dish until heated through, stirring occasionally and adding a little water or broth if necessary.", + "number": 3 + } + ], + "name": "Buffalo Chicken Sliders", + "tags": [ + "lunch", + "main course", + "main dish", + "dinner" + ] +}, +{ + "id": 583738, + "image": "https://spoonacular.com/recipeImages/583738-556x370.jpg", + "ingredients": [ + { + "id": 18372, + "quantity": { + "amount": 0.75, + "unit": "teaspoon" + } + }, + { + "id": 19334, + "quantity": { + "amount": 0.5, + "unit": "cup" + } + }, + { + "id": 1123, + "quantity": { + "amount": 1, + "unit": "" + } + }, + { + "id": 20081, + "quantity": { + "amount": 1.75, + "unit": "cups" + } + }, + { + "id": 16098, + "quantity": { + "amount": 0.75, + "unit": "cup" + } + }, + { + "id": 10019151, + "quantity": { + "amount": 8, + "unit": "oz" + } + }, + { + "id": 2047, + "quantity": { + "amount": 0.5, + "unit": "teaspoon" + } + }, + { + "id": 1145, + "quantity": { + "amount": 0.5, + "unit": "cup" + } + }, + { + "id": 2050, + "quantity": { + "amount": 1, + "unit": "teaspoon" + } + }, + { + "id": 19335, + "quantity": { + "amount": 0.5, + "unit": "cup" + } + } + ], + "instructions": [ + { + "instruction": "Preheat oven to 350°F. Line two baking sheets with parchment paper.", + "number": 1 + }, + { + "instruction": "Combine the flour, baking soda and salt in a medium bowl. Set aside.In the bowl of a stand mixer, beat the butter, peanut butter and sugars, until light and fluffy.", + "number": 2 + }, + { + "instruction": "Add in the egg and vanilla.Gradually add in the flour mixture on low speed. Stir until dough forms. Then stir in Reese's Pieces by hand.Using a cookie dough scoop or your hands, form balls of dough with 1 heaping tablespoon of dough. Gently flatten cookie dough (to form a disk shape) and place on prepared baking sheets.", + "number": 3 + }, + { + "instruction": "Bake for 9 minutes and remove from oven.", + "number": 4 + }, + { + "instruction": "Let cool for 5 minutes before transferring cookies to a wire rack to cool completely.Note: Cookies will not spread much at all and will look like they are not done baking. But I promise they are! Once they finish cooling, the cookie and chocolate will become firm and you will have a magically soft and crumbly cookie!", + "number": 5 + } + ], + "name": "Reese's Pieces Peanut Butter Cookies", + "tags": [ + "antipasti", + "starter", + "snack", + "appetizer", + "antipasto", + "hor d'oeuvre" + ] +}, +{ + "id": 601216, + "image": "https://spoonacular.com/recipeImages/601216-556x370.jpg", + "ingredients": [ + { + "id": 1041009, + "quantity": { + "amount": 2, + "unit": "tablespoons" + } + }, + { + "id": 10018413, + "quantity": { + "amount": 1, + "unit": "" + } + }, + { + "id": 2044, + "quantity": { + "amount": 3, + "unit": "leaves" + } + }, + { + "id": 10111529, + "quantity": { + "amount": 0.5, + "unit": "cup" + } + }, + { + "id": 4053, + "quantity": { + "amount": 1, + "unit": "teaspoon" + } + }, + { + "id": 11477, + "quantity": { + "amount": 1, + "unit": "cup" + } + } + ], + "instructions": [ + { + "instruction": "Saute the zucchini in the olive oil on high heat. Season generously with salt and pepper. Stir and leave alone for a little while, so you get a little bit of texture from the browning on the zucchini.While you’re sauteing, toast the flatbread in the oven at 400 degrees.When the zucchini is soft and just slightly browned, remove from the heat. Take the flatbread out of the oven and spread the zucchini on the flatbread.Top with the fresh tomatoes, cheese, and fresh basil.", + "number": 1 + }, + { + "instruction": "Cut, serve, and enjoy!", + "number": 2 + } + ], + "name": "Farmer’s Market Flatbread Pizza", + "tags": [ + "side dish" + ] +}, +{ + "id": 226562, + "image": "https://spoonacular.com/recipeImages/226562-556x370.jpg", + "ingredients": [ + { + "id": 9019, + "quantity": { + "amount": 2, + "unit": "tablespoons" + } + }, + { + "id": 18079, + "quantity": { + "amount": 1, + "unit": "cup" + } + }, + { + "id": 16069, + "quantity": { + "amount": 1, + "unit": "cup" + } + }, + { + "id": 19334, + "quantity": { + "amount": 2, + "unit": "tablespoons" + } + }, + { + "id": 11124, + "quantity": { + "amount": 1, + "unit": "cup" + } + }, + { + "id": 2009, + "quantity": { + "amount": 0.25, + "unit": "teaspoon" + } + }, + { + "id": 9079, + "quantity": { + "amount": 0.3333333333333333, + "unit": "cup" + } + }, + { + "id": 11165, + "quantity": { + "amount": 0.25, + "unit": "cup" + } + }, + { + "id": 11215, + "quantity": { + "amount": 3, + "unit": "" + } + }, + { + "id": 1002014, + "quantity": { + "amount": 0.5, + "unit": "teaspoon" + } + }, + { + "id": 2042, + "quantity": { + "amount": 0.5, + "unit": "teaspoon" + } + }, + { + "id": 11935, + "quantity": { + "amount": 2, + "unit": "tablespoons" + } + }, + { + "id": 4053, + "quantity": { + "amount": 2, + "unit": "tablespoon" + } + }, + { + "id": 11282, + "quantity": { + "amount": 1, + "unit": "cup" + } + }, + { + "id": 12151, + "quantity": { + "amount": 0.5, + "unit": "cup" + } + }, + { + "id": 11821, + "quantity": { + "amount": 1, + "unit": "cup" + } + }, + { + "id": 1102047, + "quantity": { + "amount": 8, + "unit": "servings" + } + }, + { + "id": 6615, + "quantity": { + "amount": 3, + "unit": "cups" + } + } + ], + "instructions": [ + { + "instruction": "Wash the lentils and place into a pot along with the vegetable broth. Bring to a boil, then reduce heat to medium-low and simmer, for about 40 minutes.", + "number": 1 + }, + { + "instruction": "Add more broth or water if necessary", + "number": 2 + }, + { + "instruction": "Meanwhile, warm the oil in a pan.", + "number": 3 + }, + { + "instruction": "Add the onions and cook for about 4 minutes or until soft.", + "number": 4 + }, + { + "instruction": "Add the carrots, bell pepper and garlic. Cook for about 3 minutes more. Set aside.When the lentils are ready mash them slightly with a potato masher or a fork.Preheat the oven to 350º F.In a large bowl, mix the onion mixture, mashed lentils, apple sauce, cranberries, pistachios, bread crumbs, cilantro, chili powder, cumin, thyme, salt and pepper.Line a loaf pan with parchment paper.", + "number": 5 + }, + { + "instruction": "Transfer the mixture to the loaf pan and press mixture into the pan with a spoon.", + "number": 6 + }, + { + "instruction": "Mix the glaze ingredients in a small bowl and spread evenly over the top.", + "number": 7 + }, + { + "instruction": "Bake for about 45 minutes.", + "number": 8 + }, + { + "instruction": "Transfer the pan to a wire rack and let the loaf cool a bit. Run a table knife around the edge of the pan and turn the loaf out onto a serving plate.", + "number": 9 + } + ], + "name": "Vegan Lentil Loaf", + "tags": [ + "side dish" + ] +}, +{ + "id": 605132, + "image": "https://spoonacular.com/recipeImages/605132-556x370.jpg", + "ingredients": [ + { + "id": 1001, + "quantity": { + "amount": 2, + "unit": "tablespoons" + } + }, + { + "id": 20027, + "quantity": { + "amount": 0.25, + "unit": "cup" + } + }, + { + "id": 1123, + "quantity": { + "amount": 1, + "unit": "" + } + }, + { + "id": 1125, + "quantity": { + "amount": 2, + "unit": "" + } + }, + { + "id": 1077, + "quantity": { + "amount": 2, + "unit": "cups" + } + }, + { + "id": 2050, + "quantity": { + "amount": 1, + "unit": "teaspoon" + } + }, + { + "id": 19335, + "quantity": { + "amount": 0.3333333333333333, + "unit": "cup" + } + } + ], + "instructions": [ + { + "instruction": "In a heavy saucepan, stir together the milk and 1/4 cup of sugar. Bring to a boil over medium heat.", + "number": 1 + }, + { + "instruction": "In a medium bowl, whisk together the egg yolks and egg. Stir together the remaining sugar and cornstarch; then stir them into the egg until smooth. When the milk comes to a boil, drizzle it into the bowl in a thin stream while mixing so that you do not cook the eggs. Return the mixture to the saucepan, and slowly bring to a boil, stirring constantly so the eggs don' t curdle or scorch on the bottom.", + "number": 2 + }, + { + "instruction": "When the mixture comes to a boil and thickens, remove from the heat. Stir in the butter and vanilla, mixing until the butter is completely blended in.", + "number": 3 + }, + { + "instruction": "Pour into a heat-proof container and place a piece of plastic wrap directly on the surface to prevent a skin from forming. Refrigerate until chilled before using.", + "number": 4 + } + ], + "name": "Pastry Cream", + "tags": [ + "side dish" + ] +}, +{ + "id": 618332, + "image": "https://spoonacular.com/recipeImages/618332-556x370.jpg", + "ingredients": [ + { + "id": 19912, + "quantity": { + "amount": 168, + "unit": "g" + } + }, + { + "id": 18371, + "quantity": { + "amount": 2, + "unit": "g" + } + }, + { + "id": 20027, + "quantity": { + "amount": 1, + "unit": "g" + } + }, + { + "id": 10019071, + "quantity": { + "amount": 42, + "unit": "g" + } + }, + { + "id": 1012010, + "quantity": { + "amount": 3, + "unit": "g" + } + }, + { + "id": 11424, + "quantity": { + "amount": 183, + "unit": "g" + } + }, + { + "id": 2047, + "quantity": { + "amount": 1, + "unit": "g" + } + }, + { + "id": 1145, + "quantity": { + "amount": 28, + "unit": "g" + } + }, + { + "id": 2050, + "quantity": { + "amount": 5, + "unit": "mL" + } + }, + { + "id": 10020080, + "quantity": { + "amount": 120, + "unit": "g" + } + } + ], + "instructions": [ + { + "instruction": "In a medium bowl, whisk together the flour, baking powder, cornstarch, cinnamon, and salt. In a separate bowl, whisk together the butter, pumpkin, and vanilla. Stir in the agave.", + "number": 1 + }, + { + "instruction": "Add the flour mixture, stirring just until incorporated. Fold in 2 tablespoons of chocolate chips. Chill the cookie dough for at least 30 minutes. (If chilling longer than 1 hour, cover the top of the bowl with foil.)Preheat the oven to 325F, and line a baking sheet with parchment paper or a silicone baking mat. Drop the cookie dough into 12 rounded scoops onto the prepared baking sheet. Flatten slightly, and press the remaining chocolate chips into the tops of the cookie dough.", + "number": 2 + }, + { + "instruction": "Bake at 325F for 15-17 minutes. Cool on the baking sheet for at least 10 minutes before turning out onto a wire rack.", + "number": 3 + } + ], + "name": "The Ultimate Healthy Soft & Chewy Pumpkin Chocolate Chip Cookies", + "tags": [ + "side dish" + ] + } +] + diff --git a/src/domUpdates.js b/src/domUpdates.js index 736840f15b..a6598ca868 100644 --- a/src/domUpdates.js +++ b/src/domUpdates.js @@ -1,11 +1,118 @@ -//NOTE: Your DOM manipulation will occur in this file +// Import the recipe.js functions +import { + filterRecipesByTag, + filterRecipesByName, + getIngredientNames, + calculateRecipeCost, + getRecipeDirections, +} from "../src/recipes"; -//Here is an example function just to demonstrate one way you can export/import between the two js files. You'll want to delete this once you get your own code going. -const displayRecipes = () => { - console.log(`Displaying recipes now`) +import recipeData from "./data/recipes"; +import ingredientsData from "./data/ingredients"; + +// DOM manipulation functions +function showAllRecipes(recipes) { + const resultsContainer = document.querySelector(".results-container"); + const recipePage = document.getElementById("recipe-page"); + + recipes.forEach((recipe, index) => { + const recipeCard = createRecipeCard(recipe); + resultsContainer.appendChild(recipeCard); + }); +} + +function showRecipePage(recipe) { + const recipePage = document.getElementById("recipe-page"); + recipePage.innerHTML = ` +

${recipe.title}

+ ${recipe.title} + `; +} + +function updateFilteredResults(recipes) { + const searchInput = document.querySelector(".search-bar input"); + const tags = Array.from(document.querySelectorAll(".tags a")) + .filter((tag) => tag.classList.contains("selected")) + .map((tag) => tag.innerText); + + const filteredRecipes = filterRecipesByName(recipes, searchInput.value); } +function updateResultsContainer(recipes) { + const resultsContainer = document.querySelector(".results-container"); + resultsContainer.innerHTML = ""; + + recipes.forEach((recipe) => { + const recipeCard = createRecipeCard(recipe); + resultsContainer.appendChild(recipeCard); + }); +} + +function createRecipeCard(recipe) { + const recipeCard = document.createElement("div"); + recipeCard.classList.add("recipe-card"); + + const image = document.createElement("img"); + image.src = recipe.image; + image.alt = "Recipe Image"; + recipeCard.appendChild(image); + + const title = document.createElement("h3"); + title.textContent = recipe.name; + recipeCard.appendChild(title); + + recipeCard.addEventListener("click", () => { + showRecipePage(recipe); + }); + + return recipeCard; +} + +// Event listeners +document + .querySelector(".search-bar form") + .addEventListener("submit", function (event) { + event.preventDefault(); // Prevent the default form submission behavior + + const searchInput = document.getElementById("searchInput").value; + const filteredRecipes = filterRecipesByName(recipeData, searchInput); + updateResultsContainer(filteredRecipes); + }); + +document.querySelectorAll(".tags a").forEach((tag) => { + tag.addEventListener("click", () => { + tag.classList.toggle("selected"); + updateFilteredResults(recipeData); + }); +}); + +document.addEventListener("DOMContentLoaded", function () { + setupSubmitButtonListener(); +}); + +function setupSubmitButtonListener() { + const submitButton = document.getElementById("submitButton"); + submitButton.addEventListener("click", search); +} + +function search() { + const searchInput = document.getElementById("searchInput").value; + const filteredRecipes = filterRecipesByName(recipeData, searchInput); + updateResultsContainer(filteredRecipes); + goBackToMain(); +} + +// Helper Functions +function toggleHiddenClass(className) { + const element = document.querySelector(`.${className}`); + if (element) { + element.classList.toggle("hidden"); + } +} + +function goBackToMain() { + toggleHiddenClass("main-container"); + toggleHiddenClass("result-page"); +} -export { - displayRecipes, -} \ No newline at end of file +export { showAllRecipes, updateFilteredResults }; diff --git a/src/recipes.js b/src/recipes.js index fac227aa19..4e95f80458 100644 --- a/src/recipes.js +++ b/src/recipes.js @@ -1,5 +1,77 @@ -//Here is an example demonstrating logic separated that can be imported into the scripts and test files. Feel free to update this later! +import "./data/recipes"; +import recipeData from "./data/recipes"; -export const findRecipeIngredients = recipe => { - console.log(recipe) -} \ No newline at end of file +// export const findRecipeIngredients = recipe => { +// console.log(recipe) +// } + +// function filterRecipesByTag(recipes, tags) { +// const filteredRecipesByTag = recipes.filter(recipe => { +// const allTagsMatch = tags.every(tag => recipe.tags.includes(tag)); +// return allTagsMatch; +// }); +// return filteredRecipesByTag; +// } + +function filterRecipesByTag(recipes, tag) { + const filteredRecipesByTag = recipes.filter((recipe) => { + return recipe.tags.includes(tag); + }); + return filteredRecipesByTag; +} + +function filterRecipesByName(recipes, name) { + const filteredRecipesByName = recipes.filter((recipe) => { + const upperCaseRecipeName = recipe.name.toUpperCase(); + return upperCaseRecipeName.includes(name.toUpperCase()); + }); + return filteredRecipesByName; +} + +function getIngredientNames(recipe, ingredientsData) { + return !recipe || !ingredientsData + ? "Error" + : recipe.ingredients.map( + (ingredient) => + getIngredientProperty(ingredient.id, ingredientsData, "name") || + "Ingredient not found" + ); +} + +function calculateRecipeCost(recipe, ingredientsData) { + const totalCost = + !recipe || !ingredientsData + ? 0 + : recipe.ingredients.reduce((acc, ingredient) => { + const ingredientCost = getIngredientProperty( + ingredient.id, + ingredientsData, + "estimatedCostInCents" + ); + return ( + acc + + (ingredientCost ? ingredientCost * ingredient.quantity.amount : 0) + ); + }, 0); + + return (totalCost / 100).toFixed(2); +} + +function getIngredientProperty(ingredientId, ingredientsData, property) { + const ingredientObject = ingredientsData.find( + (ingredientData) => ingredientData.id === ingredientId + ); + return ingredientObject ? ingredientObject[property] : null; +} + +function getRecipeDirections(recipe) { + return recipe.instructions; +} +export { + filterRecipesByTag, + filterRecipesByName, + getIngredientNames, + calculateRecipeCost, + getRecipeDirections, + getIngredientProperty, +}; \ No newline at end of file diff --git a/src/scripts.js b/src/scripts.js index 6e51b541eb..b14547cf0e 100644 --- a/src/scripts.js +++ b/src/scripts.js @@ -1,14 +1,20 @@ //NOTE: Data model and non-dom manipulating logic will live in this file. +// File Imports +import "./styles.css"; +import "./apiCalls"; +import "./images/turing-logo.png"; +import ingredientsData from "./data/ingredients"; +import recipeData from "./data/recipes"; +import usersData from "./data/users"; -import './styles.css' -import apiCalls from './apiCalls' -// An example of how you tell webpack to use an image (also need to link to it in the index.html) -import './images/turing-logo.png' -import ingredientsData from './data/ingredients' -// Below are examples of how you can import functions from either the recipes or domUpdates files. -import { findRecipeIngredients } from './recipes'; -import { displayRecipes } from './domUpdates' +// Function Imports +import { filterRecipesByTag, filterRecipesByName } from "./recipes"; +import { showAllRecipes, updateFilteredResults } from "./domUpdates"; -console.log(ingredientsData) -findRecipeIngredients("Dirty Steve's Original Wing Sauce") -displayRecipes(); \ No newline at end of file +// OnLoad Function Invokation +window.addEventListener("load", function () { + filterRecipesByTag(recipeData, tag); + // filterRecipesByName(recipeData, name); + showAllRecipes(recipeData); + updateFilteredResults(recipeData, ingredientsData); +}); diff --git a/src/styles.css b/src/styles.css index 2c4cbd7128..0e90a8fac4 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,3 +1,133 @@ +/* Reset some default styles */ +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +ol, +li { + margin: 0; + padding: 0; +} + body { - background-color: blueviolet; -} \ No newline at end of file + background-color: white; + font-family: "Playfair Display", serif; +} + +h1 { + text-align: center; + font-family: "Playball", cursive; + font-size: 5em; + margin-bottom: 15px; +} + +.main-container { + margin-top: -25px; +} + +#app { + max-width: 800px; + margin: 0 auto; + padding: 20px; + margin-top: 100px; +} + +.search-container { + border-radius: 15px; + border: 3px solid #000; + text-align: center; + margin-bottom: 20px; + width: 800px; + padding: 10px; + box-sizing: border-box; + display: flex; + justify-content: space-between; +} + +.search-bar { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + margin-left: 40px; +} + +input[type="text"] { + width: 400px; + padding: 10px; + font-size: 1em; + margin-right: 10px; +} + +.tags { + width: 400px; + display: flex; + flex-direction: column; +} + +ul { + list-style: none; + padding: 0; +} + +li a { + text-decoration: none; + color: #333; +} + +.recipe-carousel { + margin-bottom: 20px; + display: flex; + justify-content: space-between; +} + +.recipe-carousel img { + width: 30%; + height: auto; +} + +.hidden-filtered-results { + display: none; +} + +.results-container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.recipe-card { + border: 1px solid #ccc; + margin: 10px; + padding: 10px; + text-align: center; + max-width: 200px; + cursor: pointer; +} + +.recipe-card img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +#home-link { + display: flex; + flex-direction: row-reverse; + margin-top: 20px; + margin-right: 30px; +} + +.hidden { + display: none; +} + +.ingredients, +.directions { + margin-top: 20px; +} diff --git a/test/recipes-test.js b/test/recipes-test.js index 74d5f55293..1c5e7bff1a 100644 --- a/test/recipes-test.js +++ b/test/recipes-test.js @@ -1,8 +1,99 @@ import { expect } from 'chai'; -import { findRecipeIngredients } from '../src/recipes'; +import { filterRecipesByTag, filterRecipesByName, getIngredientNames, calculateRecipeCost, getIngredientProperty } from '../src/recipes'; +import { sampleRecipes } from '../src/data/sample-recipes'; +import { sampleIngredients } from '../src/data/sample-ingredients'; -describe('Recipe', () => { - it('Should be a function', () => { - expect(findRecipeIngredients).to.be.a('function'); +// describe('Recipe', () => { +// it('Should be a function', () => { +// expect(findRecipeIngredients).to.be.a('function'); +// }); +// }) + +describe('filterRecipesByTag', () => { + it('should filter recipes by tag', () => { + const filteredRecipes = filterRecipesByTag(sampleRecipes, 'side dish'); + const filteredRecipesIds = filteredRecipes.map(sampleRecipe => sampleRecipe.id); + expect(filteredRecipesIds).to.deep.equal([601216, 226562, 605132, 618332]); + }); + + + it('should return an empty array if no recipes match the tag', () => { + const filteredRecipes = filterRecipesByTag(sampleRecipes, 'tag does not exist'); + expect(filteredRecipes).to.deep.equal([]); + }); + + it('should return an empty array if no recipes or tags are provided', () => { + const filteredRecipes = filterRecipesByTag([], []); + expect(filteredRecipes).to.deep.equal([]); + }); +}); + + +describe('filterRecipesByName', () => { + it('should filter recipes by name', () => { + const filteredRecipes = filterRecipesByName(sampleRecipes, 'Cookies'); + const filteredRecipesIds = filteredRecipes.map(sampleRecipe => sampleRecipe.id); + expect(filteredRecipesIds).to.deep.equal([583738, 618332]); + }); + + it('should still filter correctly even if name is not correct case', () => { + const filteredRecipes = filterRecipesByName(sampleRecipes, 'cookies'); + const filteredRecipesIds = filteredRecipes.map(sampleRecipe => sampleRecipe.id); + expect(filteredRecipesIds).to.deep.equal([583738, 618332]); + }); + + it('should return an empty array if no recipes match the name', () => { + const filteredRecipes = filterRecipesByName(sampleRecipes, 'non-existent name'); + expect(filteredRecipes).to.deep.equal([]); + }); + + it('should return an empty array if no recipes or name is provided', () => { + const filteredRecipes = filterRecipesByName([], ''); + expect(filteredRecipes).to.deep.equal([]); + }); +}); + +describe('getIngredientNames', () => { + it('should determine the names of ingredients for a recipe', () => { + const sampleRecipe = sampleRecipes[0]; + const ingredientNames = getIngredientNames(sampleRecipe, sampleIngredients); + expect(ingredientNames).to.deep.equal(['butter', 'hawaiian sweet rolls', 'runny honey', 'tabasco sauce', 'black pepper', 'boneless skinless chicken breasts']) + }); + + it('should give an error message if invalid recipe or ingredients data is passed', () => { + const sampleRecipe = sampleRecipes[10]; + const ingredientNames = getIngredientNames(sampleRecipe, sampleIngredients); + expect(ingredientNames).to.equal('Error') + }); + + it('should return another message if an ingredient is not found in ingredients data', () => { + const sampleRecipe = { ingredients: [{ id: 'unknown' }] }; + const ingredientNames = getIngredientNames(sampleRecipe, sampleIngredients); + expect(ingredientNames).to.deep.equal(['Ingredient not found']); + }); +}); + +describe('calculateRecipeCost', () => { + it('should calculate the cost of a recipe correctly', () => { + const recipe = sampleRecipes.find(recipe => recipe.name === 'Buffalo Chicken Sliders'); + const cost = calculateRecipeCost(recipe, sampleIngredients); + expect(cost).to.equal('94.85'); + }); + + it('should return 0 if recipe or ingredients data is not provided', () => { + const recipe = null; + const cost = calculateRecipeCost(recipe, sampleIngredients); + expect(cost).to.equal('0.00'); + + const ingredientsData = null; + const sampleRecipe = sampleRecipes[0]; + const cost2 = calculateRecipeCost(sampleRecipe, ingredientsData); + expect(cost2).to.equal('0.00'); + }); + + it('should return 0 if recipe has no ingredients', () => { + const recipe = { ingredients: [] }; + const cost = calculateRecipeCost(recipe, sampleIngredients); + expect(cost).to.equal('0.00'); }); -}) \ No newline at end of file +});