<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Glycover Meal
Planner</title>
<style>
body { font-family: Arial,
sans-serif; margin:0; background:#f4f4f4; }
header { background:#1e90ff; color:#fff; padding:1em; text-align:center; }
.container { display:flex; flex-wrap:wrap;
padding:1em; }
.card {
background:#fff; border-radius:10px;
padding:1em; margin:0.5em; flex:1 1 300px; box-shadow:0 2px 6px rgba(0,0,0,0.1);}
img { width:100%;
border-radius:10px; }
button { background:#1e90ff; color:white; border:none; padding:0.5em; margin-top:5px; cursor:pointer; border-radius:5px; }
button:hover
{ background:#0d6efd; }
input, select { padding:0.5em;
margin:0.5em; }
.controls { text-align:center; }
ul { list-style:none; padding:0; }
.modal { display:none; position:fixed; top:0; left:0;
width:100%; height:100%; background:rgba(0,0,0,0.5);
justify-content:center; align-items:center; }
.modal-content { background:white;
padding:20px; border-radius:8px; width:90%; max-width:600px;
}
.close-btn
{ background:red; }
@media(max-width:768px){ .controls
input{width:90%;} }
</style>
</head>
<body>
<header><h1>Glycover
Meal Planner</h1></header>
<div class="controls">
<input type="text" id="search"
placeholder="Search recipes..." onkeyup="searchRecipes()">
<select id="catSelect"
onchange="filterCategory()"></select>
</div>
<div class="container">
<div
class="card">
<h2>Recipes</h2>
<div id="recipeList"></div>
</div>
<div
class="card">
<h2>Meal
Plan</h2>
<ul id="planList"></ul>
<h3>Shopping
List</h3>
<ul id="shoppingList"></ul>
</div>
</div>
<div id="recipeModal"
class="modal">
<div
class="modal-content">
<button
class="close-btn" onclick="closeModal()">Close</button>
<div id="modalBody"></div>
</div>
</div>
<script>
const BASE_URL = 'https://www.themealdb.com/api/json/v1/1';
fetch(`${BASE_URL}/list.php?c=list`).then(res=>res.json()).then(data=>{
const catSelect=document.getElementById('catSelect');
catSelect.innerHTML='<option
value="all">All Categories</option>';
data.meals.forEach(c=>{
const opt=document.createElement('option');
opt.value=c.strCategory;
opt.textContent=c.strCategory;
catSelect.appendChild(opt);
});
});
function renderRecipes(meals){
const container=document.getElementById('recipeList'); container.innerHTML='';
meals.forEach(meal=>{
const div=document.createElement('div');
div.innerHTML=`<img src='${meal.strMealThumb}'
alt='${meal.strMeal}'><h4>${meal.strMeal}</h4>
<button
onclick="showDetails('${meal.idMeal}')">Details</button>
<button
onclick="addToPlan('${meal.strMeal}','${meal.strMealThumb}')">Add to Plan</button>`;
container.appendChild(div);
});
}
function searchRecipes(){
const q=document.getElementById('search').value;
fetch(`${BASE_URL}/search.php?s=${q}`).then(res=>res.json()).then(data=>renderRecipes(data.meals||[]));
}
function filterCategory(){
const cat=document.getElementById('catSelect').value;
if(cat==='all'){ searchRecipes(); }
else{
fetch(`${BASE_URL}/filter.php?c=${cat}`).then(res=>res.json()).then(data=>renderRecipes(data.meals||[]));
}
}
function showDetails(id){
fetch(`${BASE_URL}/lookup.php?i=${id}`).then(res=>res.json()).then(data=>{
const meal=data.meals[0]; let
html=`<h2>${meal.strMeal}</h2><img src='${meal.strMealThumb}'><p>${meal.strInstructions}</p><h3>Ingredients:</h3><ul>`;
for(let
i=1;i<=20;i++){ if(meal['strIngredient'+i]) html+=`<li>${meal['strIngredient'+i]} - ${meal['strMeasure'+i]}</li>`;
}
html+='</ul>'; document.getElementById('modalBody').innerHTML=html;
document.getElementById('recipeModal').style.display='flex';
});
}
function closeModal(){document.getElementById('recipeModal').style.display='none';}
let shoppingSet=new Set();
function addToPlan(name,img){
const planList=document.getElementById('planList'); const li=document.createElement('li');
li.textContent=name; planList.appendChild(li);
shoppingSet.add(name);
renderShopping();
}
function renderShopping(){
const shop=document.getElementById('shoppingList'); shop.innerHTML='';
shoppingSet.forEach(item=>{ const li=document.createElement('li');
li.textContent=item; shop.appendChild(li); });
}
searchRecipes();
</script>
</body>
</html>