Skip to content

Commit

Permalink
Added save and load function
Browse files Browse the repository at this point in the history
  • Loading branch information
@GXcells
GXcells committed Jul 30, 2024
1 parent 9bf7971 commit 8c28b41
Show file tree
Hide file tree
Showing 3 changed files with 313 additions and 1 deletion.
85 changes: 84 additions & 1 deletion app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
////// LARGE CHANGE TO DO : modify code so that i nfavorites and recipes it adds only the "recipeID" and then use it to retrieve recipes directly fro mdatabase instead of saving the recipes themselves in favorites and slected recipes in local storage
////////////////////////

// Function to load recipes from data.json
// Function to load recipes from database data.json
async function loadRecipes() {
try {
const response = await fetch('./data.json');
Expand Down Expand Up @@ -263,6 +263,81 @@ function CopyToClipboard() {
navigator.clipboard.writeText(copiedText);
}

///////////////////////// LEFT SIDEBAR MENU EVENT LISTENERS ///////////////////////////////////////////////////////
document.addEventListener('DOMContentLoaded', function() {
const menuToggle = document.querySelector('.menu-toggle');
const menuIcon = document.getElementById('menu-icon');
const sidebar = document.querySelector('.sidebar');
const bodySel = document .querySelector('body');

menuToggle.addEventListener('click', function() {
sidebar.classList.toggle('open');
// this toggle means turn on or off the class .open in the sidebar depending on if it was on or off before running the button (that is defiend by document.querySelector('.sidebar'); this does not remove the .class .sidebar' but it add the class .open to .sidebar.
//so if toggle on this will trigger the css style .sidebar.open that has left =0 so wil lshow the sidebar because before was left =-250.
if (sidebar.classList.contains('open')) {
console.log("Sidebar is open")
menuIcon.classList.remove('fa-bars');
menuIcon.classList.add('fa-times');
bodySel.classList.add('blockedScroll');//this add the class "blockedScroll" to bodysel which is the HTML element "Body" selected just above using const bodySel = document .querySelector('body');
} else {
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
bodySel.classList.remove('blockedScroll');
}
});
});
///////////////////////////
function saveData() {
const last_recipesList = JSON.parse(localStorage.getItem('last_recipes')) || [];
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
const selected = JSON.parse(localStorage.getItem('selectedRecipes')) || [];
const data = JSON.stringify({
version: "v6.10",
last_recipes: last_recipesList,
favorites: favorites,
selected: selected
}, null, 4); // Indentation of 4 spaces
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'random_recipe.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}


//////////////////////////////////////////////
function loadData() {
if (confirm(`Loading data will overwrite current favorites and recipes of the week.
You should save current state to file before continuing`)) {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'application/json';
input.onchange = function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const data = JSON.parse(e.target.result);
const last_recipes = data.last_recipes || [];
const favorites = data.favorites || [];
const selected = data.selected || [];
localStorage.setItem('last_recipes', JSON.stringify(last_recipes));
localStorage.setItem('favorites', JSON.stringify(favorites));
localStorage.setItem('selectedRecipes', JSON.stringify(selected));
displayRecipes(last_recipes);
};
reader.readAsText(file);
};
input.click();
};
}



/////////////////////////////////////////////

async function initializeApp() {
const data = await loadRecipes();
Expand All @@ -274,6 +349,14 @@ async function initializeApp() {
document.getElementById('recipesContainer').style.display = 'grid';
document.getElementById('selectionOfWeekContainer').style.display = 'none';
});
document.getElementById('newRecipesButton1').addEventListener('click', () => {
const randomRecipes = getRandomMainCourseRecipes(data);
//displayRecipes(randomRecipes);
displayRandomRecipes(data)
document.getElementById('recipesContainer').style.display = 'grid';
document.getElementById('selectionOfWeekContainer').style.display = 'none';
});

document.getElementById('showsumIngredientsButton').addEventListener('click', () => {
const randomRecipes = getRandomMainCourseRecipes(data);
//displayRecipes(randomRecipes);
Expand Down
138 changes: 138 additions & 0 deletions data2.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"
]
}
}
91 changes: 91 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
flex-direction: column;
align-items: center;
}
.blockedScroll{
overflow-y:hidden;
}
.banner {
position: fixed;
top: 0;
Expand Down Expand Up @@ -129,6 +132,23 @@
#newRecipesButton:hover {
background-color: #27ae60;
}

#newRecipesButton1 {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 10px 20px;
font-size: 1em;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#newRecipesButton1:hover {
background-color: #27ae60;
}

#showsumIngredientsButton {
margin-top: 20px;
padding: 10px 20px;
Expand Down Expand Up @@ -198,16 +218,87 @@
margin-bottom: 20px;
grid-column: 1 / -1;
}

/* Style of Side nav*/
.menu-toggle {

font-size: 24px;
cursor: pointer;
z-index: 1000;
color: #7EBDC3;
}

.sidebar {
position: fixed;
top: 0;
left: -250px; /* makes the sidebar hidden because at -250pixels o nthe left and the sidebar is 250pixel width so becomes hidden*/
width: 250px;
height: 100%;
background: #333;
transition: left 0.3s ease;
z-index: 500;
}

.sidebar ul {
position: absolute;
padding-top: 4rem;
padding-left: 0;
list-style: none;

margin: 0;
}

.sidebar ul li {
padding: 20px;
border-bottom: 1px solid #444;
}

.sidebar ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
display: flex;
align-items: center;
}

.sidebar ul li a i {
margin-right: 10px;
}

.sidebar.open { /* if element with class .sidebar.open it will make the element left to be set at 0 o nthe screen so it will show the sidebar*/
left: 0;
}


</style>
</head>
<body>
<div class="banner">
<div class="menu-toggle">
<i class="fas fa-bars" id="menu-icon"></i>

</div>
<nav class="sidebar">
<ul>
<li><a href="#"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="#" onclick="saveData()"><i class="fas fa-file-download" id="save-icon" onclick="saveData()"></i> Save data</a></li>
<li><a href="#" onclick="loadData()"><i class="fas fa-file-upload" id="load-icon" onclick="loadData()"></i> Load data</a></li>

<li><a href="#"><i class="fas fa-info"></i> About</a></li>
</ul>
</nav>
<a href="index.html" id="shuffler">Shuffler</a>
<a href="#" id="favorites">Favorites</a>
<a href="#" id="selectionOfWeek">Selection of the week</a>
</div>




<h1>Random Main Course Recipes</h1>
<button id="newRecipesButton1">Show New Recipes</button>
<div id="recipesContainer"></div>

<div id="selectionOfWeekContainer"></div>
<button id="newRecipesButton">Show New Recipes</button>
<button id="showsumIngredientsButton">Show all Ingredients for the week selection</button>
Expand Down

0 comments on commit 8c28b41

Please sign in to comment.