Mince is a full-stack web application that pulls from over 5,000 existing recipes through the utilization of RESTful APIs. Users can type in a certain type of dish they are looking for such as "chicken" and be taken to all the chicken recipes available. If logged in, the user can also create a list of their favorite recipes and shopping list! When they are ready to make the meal, users have the option of viewing the entire recipe guide for step-by-step guidance.
JavaScript ES6
HTML5 / CSS3
- To run this project, please go to the Mince Backend repo:
- Run ~ lite-server in your front end directory
- Click here!
function displayIngredientList(recipe) {
const $ul = document.createElement('ul');
$ul.className = 'ingredient_list';
const $ingredients = recipe.ingredients.map(ingredientToElement);
if (user_id) { $ingredients.forEach(addIngredientButton); }
$ingredients.forEach($ingredient => {
$ul.append($ingredient);
});
$main.append($ul);
return recipe;
}
function displayHomeLink() {
const $a = document.createElement('a');
$a.href = `index.html?user_id=${user_id}`;
$a.textContent = 'Go to Homepage';
const $ul = document.querySelector('ul.nav-bar');
$ul.append($a);
}
- Display sample of recipes from 5,000
- Filter through recipes through the search bar
- Go to full recipe page for step by step instruction on how to make the dish
- If logged-in, create a list of favorite recipes
- If logged-in, add items to user's shopping list based on recipe ingredients
To-Do List:
- Increase data size to provide up to 10k+ recipes
- Add 'viewed' tag to allow the user to know which recipes have already been viewed
Completed.
This app is built to carry out the CRUD framework
We created this app based on our own affinity for cooking and finding new recipes to use. We wanted this app to be personalized and flexible and uncomplicated for some apps on the market tend to look busy and not as easy to use.
Created by Sam Evans and Nyaradzo Bere