Skip to content

Update script.js #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update script.js #114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 67 additions & 82 deletions advance-projects/ishratUmar18-RecipeApp/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,115 +10,100 @@ getRandomMeal();
fetchFavMeals();

async function getRandomMeal() {
const resp = await fetch("https://www.themealdb.com/api/json/v1/1/random.php");
const resp = await fetch("https://www.themealdb.com/api/json/v1/1/random.php");
const respData = await resp.json();
const randomMeal = respData.meals[0];

const respData = await resp.json();
const randomMeal = respData.meals[0];
console.log(randomMeal);

console.log(randomMeal);

addMeal(randomMeal, true);
addMeal(randomMeal, true);
}

async function getMealById(id) {
const resp = await fetch(
"https://www.themealdb.com/api/json/v1/1/lookup.php?i="+id);

const respData = await resp.json();
const resp = await fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`);
const respData = await resp.json();
const meal = respData.meals[0];

const meal = respData.meals[0];

return meal;
return meal;
}

async function getMealsBySearch(term) {
const resp = await fetch(
"https://www.themealdb.com/api/json/v1/1/search.php?s="+term);

const respData = await resp.json();
const meals = respData.meals;
const resp = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${term}`);
const respData = await resp.json();
const meals = respData.meals;
return meals;
}

return meals;
function addMeal(mealData, random = false) {
const meal = document.createElement("div");
meal.classList.add("meal");

meal.innerHTML = `
<div class="meal-header">
${random ? `<span class="random">Random Recipe</span>` : ""}
<img src="${mealData.strMealThumb}" alt="${mealData.strMeal}" />
</div>
<div class="meal-body">
<h4>${mealData.strMeal}</h4>
<button class="fav-btn">
<i class="fas fa-heart"></i>
</button>
</div>
`;

const btn = meal.querySelector(".meal-body .fav-btn");
btn.addEventListener("click", () => {
if (btn.classList.contains("active")) {
removeMealLS(mealData.idMeal);
btn.classList.remove("active");
} else {
addMealLS(mealData.idMeal);
btn.classList.add("active");
}

function addMeal(mealData, random = false) {
const meal = document.createElement('div');
meal.classList.add('meal');

meal.innerHTML = `
<div class="meal-header">
${random ? `<span class="random">
Random Recipe
</span>` : ""}

<img
src="${mealData.strMealThumb}"
alt="${mealData.strMeal}" />
</div>
<div class="meal-body">
<h4>${mealData.strMeal}</h4>
<button class="fav-btn">
<i class="fas fa-heart"></i>
</button>
</div>
`;
const btn = meal.querySelector('.meal-body .fav-btn');
btn.addEventListener('click', () =>{
if(btn.classList.contains('active')){
removeMealLS(mealData.idMeal)
btn.classList.remove("active");
} else{
addMealLS(mealData.idMeal);
btn.classList.add("active");
}
fetchFavMeals();
});

fetchFavMeals();
});
meal.addEventListener("click", () => {
showMealInfo(mealData);
});

meal.addEventListener('click', () => {
showMealInfo(mealData);
});

mealsEl.appendChild(meal);
mealsEl.appendChild(meal);
}

function addMealLS(mealId){
const mealIds = getMealsLS();
localStorage.setItem('mealIds', JSON.stringify([...mealIds, mealId]));
function addMealLS(mealId) {
const mealIds = getMealsLS();
localStorage.setItem("mealIds", JSON.stringify([...mealIds, mealId]));
}

function removeMealLS(mealId){
const mealIds = getMealsLS();
localStorage.setItem('mealIds', JSON.stringify(mealIds.filter((id) => id !== mealId)));
function removeMealLS(mealId) {
const mealIds = getMealsLS();
localStorage.setItem(
"mealIds",
JSON.stringify(mealIds.filter((id) => id !== mealId))
);
}

function getMealsLS(){
const mealIds = JSON.parse(localStorage.getItem('mealIds'));

return mealIds === null ? [] : mealIds;
function getMealsLS() {
const mealIds = JSON.parse(localStorage.getItem("mealIds"));
return mealIds === null ? [] : mealIds;
}

async function fetchFavMeals() {
// clean the container
favouriteContainer.innerHTML = "";

const mealIds = getMealsLS();

for(let i = 0; i < mealIds.length; i++){
// clean the container
favouriteContainer.innerHTML = "";

const mealIds = getMealsLS();

const mealId = mealIds[i];

meal = await getMealById(mealId);

addMealFav(meal);
}

for (let i = 0; i < mealIds.length; i++) {
const mealId = mealIds[i];
meal = await getMealById(mealId);
addMealFav(meal);
}
}

function addMealFav(mealData) {

const favMeal = document.createElement('li');
const favMeal = document.createElement("li");

favMeal.innerHTML = `
<img
Expand Down Expand Up @@ -203,4 +188,4 @@ searchBtn.addEventListener('click', async () =>{

popupCloseBtn.addEventListener("click", () => {
mealPopup.classList.add("hidden");
});
});