Skip to content

Commit

Permalink
up1
Browse files Browse the repository at this point in the history
  • Loading branch information
@GXcells
GXcells committed Jun 30, 2024
1 parent f40c778 commit cf88f4d
Show file tree
Hide file tree
Showing 4 changed files with 449 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
# GXcells.github.io
# recipeweek
137 changes: 137 additions & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
// Function to load recipes from data.json
async function loadRecipes() {
try {
const response = await fetch('./data.json');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error("Could not load recipes:", error);
return {};
}
}

function getRandomMainCourseRecipes(data, count = 5) {
const mainCourseRecipes = Object.values(data).filter(recipe => recipe.category === 'main course' && recipe.country === "Mexico");
const shuffled = mainCourseRecipes.sort(() => 0.5 - Math.random());
return shuffled.slice(0, count);
}

function displayRecipes(recipes, container = document.getElementById('recipesContainer')) {
container.innerHTML = '';
recipes.forEach(recipe => {
const recipeDiv = document.createElement('div');
recipeDiv.classList.add('recipe');
const isFavorite = isFavoriteRecipe(recipe.name);
recipeDiv.innerHTML = `
<img src="${recipe.IMG}" alt="${recipe.name}">
<div class="recipe-info">
<h2>${recipe.name}</h2>
<p>Country: ${recipe.country}</p>
<p>Prep Time: ${recipe.prep_time}</p>
<a href="${recipe.URL}" target="_blank">View Recipe</a>
<button class="view-ingredients">View Ingredients</button>
</div>
<i class="favorite-icon ${isFavorite ? 'fas' : 'far'} fa-heart ${isFavorite ? 'active' : ''}"></i>
`;
container.appendChild(recipeDiv);

const favoriteIcon = recipeDiv.querySelector('.favorite-icon');
favoriteIcon.addEventListener('click', (e) => {
e.stopPropagation();
toggleFavorite(recipe, favoriteIcon);
});

const viewIngredientsButton = recipeDiv.querySelector('.view-ingredients');
viewIngredientsButton.addEventListener('click', (e) => {
e.stopPropagation();
showIngredients(recipe);
});
});
}

function toggleFavorite(recipe, icon) {
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
const index = favorites.findIndex(fav => fav.name === recipe.name);

if (index === -1) {
favorites.push(recipe);
icon.classList.remove('far');
icon.classList.add('fas', 'active');
} else {
favorites.splice(index, 1);
icon.classList.remove('fas', 'active');
icon.classList.add('far');
}

localStorage.setItem('favorites', JSON.stringify(favorites));
}

function isFavoriteRecipe(recipeName) {
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
return favorites.some(fav => fav.name === recipeName);
}

function showFavorites() {
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
displayRecipes(favorites);
}

function showIngredients(recipe) {
const modal = document.getElementById('ingredientsModal');
const modalTitle = document.getElementById('modalTitle');
const ingredientsList = document.getElementById('ingredientsList');

modalTitle.textContent = `Ingredients for ${recipe.name}`;
ingredientsList.innerHTML = '';
recipe.ingredients.forEach(ingredient => {
const li = document.createElement('li');
li.textContent = ingredient;
ingredientsList.appendChild(li);
});

modal.style.display = 'block';
}

function closeModal() {
const modal = document.getElementById('ingredientsModal');
modal.style.display = 'none';
}

async function initializeApp() {
const data = await loadRecipes();

document.getElementById('newRecipesButton').addEventListener('click', () => {
const randomRecipes = getRandomMainCourseRecipes(data);
displayRecipes(randomRecipes);
});

document.getElementById('favorites').addEventListener('click', (e) => {
e.preventDefault();
showFavorites();
});

document.getElementById('shuffler').addEventListener('click', (e) => {
e.preventDefault();
const randomRecipes = getRandomMainCourseRecipes(data);
displayRecipes(randomRecipes);
});

// Close modal when clicking on the close button or outside the modal
document.querySelector('.close').addEventListener('click', closeModal);
window.addEventListener('click', (event) => {
const modal = document.getElementById('ingredientsModal');
if (event.target === modal) {
closeModal();
}
});

// Initial load
const initialRecipes = getRandomMainCourseRecipes(data);
displayRecipes(initialRecipes);
}

// Start the app
initializeApp();
138 changes: 138 additions & 0 deletions data.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
{
"0": {
"name": "French Dishh",
"country": "France",
"prep_time": "15 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20191025/101153_w1024h768c1cx2592cy1728cxt0cyt0cxb5184cyb3456.jpg",
"URL": "https://www.marmiton.org/recettes/recette_mousse-au-chocolat-au-thermomix_382571.aspx",
"ingredients": [
"200g dark chocolate",
"6 eggs",
"50g sugar",
"1 pinch of salt"
]
},
"1": {
"name": "Italian Dish",
"country": "Italy",
"prep_time": "20 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20140223/45644_w1024h768c1cx1824cy1368.jpg",
"URL": "https://www.marmiton.org/recettes/recette_sauce-blanche-froide-a-l-echalote-et-estragon_315170.aspx",
"ingredients": [
"2 cups heavy cream",
"1 shallot, minced",
"2 tbsp fresh tarragon, chopped",
"Salt and pepper to taste"
]
},
"2": {
"name": "Spanish Dessert",
"country": "Spain",
"prep_time": "25 min",
"category": "dessert",
"IMG": "https://assets.afcdn.com/recipe/20160913/32524_w1024h768c1cx2880cy1920.jpg",
"URL": "https://www.marmiton.org/recettes/recette_knodels-farcis-aux-prunes-quenelles-aux-quetsches_10901.aspx",
"ingredients": [
"500g plums",
"500g potatoes",
"150g flour",
"2 eggs",
"50g sugar"
]
},
"3": {
"name": "French Main Course",
"country": "France",
"prep_time": "30 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20161005/1099_w1024h768c1cx2592cy1728.jpg",
"URL": "https://www.marmiton.org/recettes/recette_salade-de-legumes-grilles_44826.aspx",
"ingredients": [
"2 zucchinis",
"2 eggplants",
"2 bell peppers",
"1 red onion",
"Olive oil",
"Balsamic vinegar",
"Salt and pepper"
]
},
"4": {
"name": "Japanese Dish",
"country": "Japan",
"prep_time": "10 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20191109/102147_w1024h768c1cx2144cy1424cxt0cyt0cxb4288cyb2848.jpg",
"URL": "https://www.marmiton.org/recettes/recette_soupe-a-l-oignon-au-cookeo_382876.aspx",
"ingredients": [
"4 large onions",
"2 tbsp butter",
"1 tbsp flour",
"1 liter beef broth",
"100ml white wine",
"Salt and pepper"
]
},
"5": {
"name": "Mexican Appetizer",
"country": "Mexico",
"prep_time": "45 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20200414/109653_w1024h768c1cx1639cy1658cxt0cyt0cxb3278cyb3316.jpg",
"URL": "https://www.marmiton.org/recettes/recette_gnocchi-de-patate-douce_392192.aspx",
"ingredients": [
"500g sweet potatoes",
"150g flour",
"1 egg",
"Salt",
"Nutmeg"
]
},
"6": {
"name": "tatin echalotes",
"country": "Mexico",
"prep_time": "45 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20141205/7498_w1024h768c1cx2808cy1872.jpg",
"URL": "https://www.marmiton.org/recettes/recette_tatin-d-echalotes-et-de-canard_333545.aspx",
"ingredients": [
"500g sweet potatoes",
"150g flour",
"1 egg",
"Salt",
"Nutmeg"
]
},
"7": {
"name": "Pommes de terre farcies au sardines",
"country": "Mexico",
"prep_time": "45 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20230126/139871_w1024h768c1cx1000cy750cxt0cyt0cxb2000cyb1500.jpg",
"URL": "https://www.marmiton.org/recettes/recette_pommes-de-terre-farcies-aux-sardines_52625.aspx",
"ingredients": [
"500g sweet potatoes",
"150g flour",
"1 egg",
"Salt",
"Nutmeg"
]
},
"8": {
"name": "Tarte ete aux abricots",
"country": "Mexico",
"prep_time": "45 min",
"category": "main course",
"IMG": "https://assets.afcdn.com/recipe/20160223/20426_w1024h768c1cx250cy375.jpg",
"URL": "https://www.marmiton.org/recettes/recette_tarte-d-ete-aux-abricots_61223.aspx",
"ingredients": [
"500g sweet potatoes",
"150g flour",
"1 egg",
"Salt",
"Nutmeg"
]
}
}
Loading

0 comments on commit cf88f4d

Please sign in to comment.