Karavan Yemeği Menüsü Planlayıcısı

Aşağıda, Karavan Yemeği Menüsü Planlayıcısı için geliştirdiğimiz kodun detaylı ve samimi bir açıklamasını bulabilirsiniz. Kod, kullanıcıların karavan seyahatleri sırasında kolayca menü ve alışveriş listesi oluşturmasını sağlayacak şekilde tasarlanmıştır. Bu aracımız ilginizi çektiyse Arabam Karavan Çekebilir mi? Hesaplama Aracı ile Hemen Öğren?Geziyoo.co içeriğimize veya Karavan kampı bulmakta zorlanıyormusunuz GEZİYOO.CO ana sayfamıza bakabilirsiniz. Karavan Yemeği Menüsü Planlayıcısı html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: 'Roboto', sans-serif; background-color: #f9f9f9; color: #333; } /* Kapsayıcıyı ekranın izin verdiği alan kadar kullanacak şekilde ayarlandı */ #menu-generator { width: 100%; max-width: 100%; margin: 0 auto; padding: 20px; background: #fff; box-sizing: border-box; } h2, h3 { color: #fe4641; text-align: center; } .full-width-btn { display: block; width: 100%; margin-top: 10px; padding: 15px 0; font-size: 16px; } button { background-color: #fe4641; color: #fff; border: none; padding: 10px 20px; margin: 5px; border-radius: 4px; cursor: pointer; transition: background 0.3s ease; } button:hover { background-color: #e0433e; } table { width: 100%; border-collapse: collapse; margin: 20px 0; } table, th, td { border: 1px solid #ccc; } th, td { padding: 10px; text-align: center; } th { background-color: #f2f2f2; } .favorite-menu, #action-buttons { margin-top: 30px; } .menu-card { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; } .menu-header { background-color: #fe4641; color: #fff; padding: 5px; border-radius: 4px; margin-bottom: 10px; } .delete-fav-btn { position: absolute; top: 10px; right: 10px; background-color: #c0392b; } .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { #menu-generator { padding: 15px; } table, th, td { font-size: 14px; } /* Flex yapısı küçük ekranlarda alt alta sıralanır */ #menu-container { flex-direction: column; } } /* Karavan Gün Seçimi */ #day-selection { text-align: center; margin: 20px 0; } #day-selection label { margin: 0 5px; } /* Başlangıçta gizli butonlar */ #action-buttons { display: none; text-align: center; } #diet-filters { text-align: center; margin-top: 20px; } #diet-filters label { margin: 0 10px; } /* Menü ve Alışveriş Listesi için Flex konteyner */ #menu-container { display: flex; justify-content: space-between; gap: 20px; } /* Her iki bölümün eşit alan kaplaması */ #menu-result, #shopping-list-result { flex: 1; } Karavan Yemeği Menüsü Planlayıcısı Bu araç sayesinde karavan seyahatlerinizde, taşınabilir malzeme avantajıyla hazırlayabileceğiniz özel menü ve alışveriş listesi oluşturabilirsiniz. Seyahat günlerinizi ve beslenme tercihlerinizi belirledikten sonra, "Seçilen Günler İçin Menü Oluştur" butonuna tıklayarak size özel öneriler alabilirsiniz. Karavan Seyahat Günlerinizi Belirleyin Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Pazar Beslenme Tercihlerinizi Seçin Vegan Vejetaryen Glutensiz Tavuk Balık Et Seçilen Günler İçin Menü Oluştur Favorilere Ekle PDF Olarak İndir Favorileri Temizle Favori Menüler Bu araç, Karavan Yemeği Menüsü Planlayıcısı tarafından geliştirilmiştir. // Global değişken: Oluşturulan menü verileri saklanır. let currentMenuData = []; // Genişletilmiş tarif listesi: Karavan ortamına uygun, taşınabilir malzeme avantajıyla hazırlayabileceğiniz seçenekler. const recipes = { kahvalti: [ { name: "Sıcak Sandviç & Omlet", tags: ["vejetaryen"], ingredients: ["Ekmek", "Yumurta", "Peynir", "Domates"] }, { name: "Hazır Yulaf Lapası", tags: ["vegan", "glutensiz", "vejetaryen"], ingredients: ["Yulaf ezmesi", "Süt veya su", "Meyve"] }, { name: "Enerji Barı ve Meyve", tags: ["vejetaryen"], ingredients: ["Enerji barı", "Meyve"] }, { name: "Karavan Usulü Menemen", tags: ["et"], ingredients: ["Yumurta", "Domates", "Biber", "Soğan"] }, { name: "Kahvaltılık Avokado Sandviç", tags: ["vejetaryen"], ingredients: ["Tam buğday ekmeği", "Avokado", "Domates", "Salatalık"] }, { name: "Sebzeli Omlet", tags: ["vejetaryen", "glutensiz"], ingredients: ["Yumurta", "Ispanak", "Mantar", "Biber"] }, { name: "Meyveli Smoothie", tags: ["vegan", "glutensiz"], ingredients: ["Meyve", "Bitkisel süt", "Chia tohumu"] }, { name: "Klasik Türk Kahvaltısı", tags: ["vejetaryen"], ingredients: ["Zeytin", "Peynir", "Bal", "Ekmek", "Domates", "Salatalık"] }, { name: "Pancake ve Bal", tags: ["vejetaryen"], ingredients: ["Un", "Yumurta", "Süt", "Bal"] }, { name: "Chia Puding", tags: ["vegan", "glutensiz"], ingredients: ["Chia tohumu", "Bitkisel süt", "Meyve"] }, { name: "Protein Shake", tags: ["vegan", "glutensiz"], ingredients: ["Protein tozu", "Meyve", "Bitkisel süt"] } ], ogle: [ { name: "Soğuk Makarna Salatası", tags: ["vejetaryen"], ingredients: ["Makarna", "Zeytinyağı", "Karışık sebzeler", "Peynir"] }, { name: "Tavuklu Wrap", tags: ["tavuk"], ingredients: ["Tortilla", "Izgara tavuk", "Marul", "Sos"] }, { name: "Ton Balıklı Salata", tags: ["balik"], ingredients: ["Konserve ton balığı", "Marul", "Domates", "Mısır"] }, { name: "Hızlı Sandviç", tags: [], ingredients: ["Ekmek", "Jambon", "Peynir", "Marul"] }, { name: "Vegan Nohut Salatası", tags: ["vegan", "glutensiz", "vejetaryen"], ingredients: ["Nohut", "Maydanoz", "Zeytinyağı", "Limon"] }, { name: "Kinoa ve Avokado Salatası", tags: ["vejetaryen", "glutensiz"], ingredients: ["Kinoa", "Avokado", "Kiraz domates", "Roka"] }, { name: "Mercimek Çorbası", tags: ["vejetaryen", "glutensiz"], ingredients: ["Mercimek", "Soğan", "Havuç", "Baharatlar"] }, { name: "Falafel Tabağı", tags: ["vegan", "glutensiz"], ingredients: ["Nohut", "Maydanoz", "Baharatlar", "Tahin"] }, { name: "Izgara Sebze Salatası", tags: ["vejetaryen", "glutensiz"], ingredients: ["Patlıcan", "Biber", "Kabak", "Zeytinyağı"] }, { name: "Humus ve Sebzeler", tags: ["vegan", "glutensiz"], ingredients: ["Nohut", "Tahini", "Zeytinyağı", "Sebzeler"] }, { name: "Sebzeli Quinoa Bowl", tags: ["vejetaryen", "glutensiz", "vegan"], ingredients: ["Quinoa", "Kabak", "Biber", "Ispanak"] } ], aksam: [ { name: "Makarna & Hazır Sos", tags: ["vejetaryen"], ingredients: ["Makarna", "Hazır domates sosu"] }, { name: "Izgara Tavuk & Sebze", tags: ["tavuk"], ingredients: ["Tavuk fileto", "Karışık sebzeler", "Baharatlar"] }, { name: "Konserve Chili", tags: ["et"], ingredients: ["Konserve chili", "Ekmek"] }, { name: "Balık Izgara", tags: ["balik"], ingredients: ["Balık filetosu", "Limon", "Zeytinyağı"] }, { name: "Hızlı Makarna Salatası", tags: ["vejetaryen"], ingredients: ["Makarna", "Zeytinyağı", "Sebzeler"] }, { name: "Karavan Usulü Kızartma", tags: ["et"], ingredients: ["Sosis", "Patates", "Ketçap"] }, { name: "Sebzeli Krep", tags: ["vejetaryen"], ingredients: ["Krep hamuru", "Ispanak", "Domates", "Peynir"] }, { name: "Kırmızı Et Güveç", tags: ["et"], ingredients: ["Kırmızı et", "Sebzeler", "Baharatlar", "Domates sosu"] }, { name: "Sebzeli Curry", tags: ["vegan", "glutensiz"], ingredients: ["Nohut", "Kabak", "Patlıcan", "Curry baharatı"] }, { name: "Kremalı Mantar Soslu Tavuk", tags: ["tavuk"], ingredients: ["Tavuk", "Mantar", "Kremalı sos", "Baharatlar"] }, { name: "Izgara Köfte", tags: ["et"], ingredients: ["Kıyma", "Soğan", "Baharatlar", "Ekmek kırıntısı"] }, { name: "Fırında Sebzeli Somon", tags: ["balik"], ingredients: ["Somon", "Brokoli", "Limon", "Zeytinyağı"] }, { name: "Vegan Dolma", tags: ["vegan", "glutensiz", "vejetaryen"], ingredients: ["Biber", "Patates", "Domates", "Baharatlar"] } ] }; // Seçili günleri al: Hiç seçim yapılmazsa tüm günler varsayılır. function getSelectedDays() { const checkboxes = document.querySelectorAll(".day-checkbox"); let selected = []; checkboxes.forEach(cb => { if (cb.checked) { selected.push(cb.value); } }); return selected.length > 0 ? selected : ["Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"]; } // Diyet filtrelerine göre uygun tarifi getir. function getFilteredRecipe(mealType) { let selectedFilters = []; if(document.getElementById("filter-vegan").checked) selectedFilters.push("vegan"); if(document.getElementById("filter-vejetaryen").checked) selectedFilters.push("vejetaryen"); if(document.getElementById("filter-glutensiz").checked) selectedFilters.push("glutensiz"); if(mealType !== "kahvalti") { if(document.getElementById("filter-tavuk").checked) selectedFilters.push("tavuk"); if(document.getElementById("filter-balik").checked) selectedFilters.push("balik"); if(document.getElementById("filter-et").checked) selectedFilters.push("et"); } let availableRecipes = recipes[mealType]; if(selectedFilters.length > 0) { availableRecipes = availableRecipes.filter(r => selectedFilters.every(filter => r.tags.includes(filter))); if(availableRecipes.length === 0) { availableRecipes = recipes[mealType]; } } return availableRecipes[Math.floor(Math.random() * availableRecipes.length)]; } // Menü oluştur ve alışveriş listesini hazırla. function generateMenu() { const selectedDays = getSelectedDays(); let menuData = []; let menuHTML = "GünKahvaltıÖğle YemeğiAkşam Yemeği"; selectedDays.forEach(day => { let kahvalti = getFilteredRecipe("kahvalti"); let ogle = getFilteredRecipe("ogle"); let aksam = getFilteredRecipe("aksam"); menuData.push({ day, kahvalti, ogle, aksam }); menuHTML += ` ${day} ${kahvalti.name} ${ogle.name} ${aksam.name} `; }); menuHTML += ""; document.getElementById("menu-result").innerHTML = menuHTML; currentMenuData = menuData; document.getElementById("action-buttons").style.display = "block"; document.getElementById("save-favorite-btn").disabled = false; document.getElementById("download-pdf-btn").disabled = false; generateShoppingList(); } // Alışveriş listesi oluştur. function generateShoppingList() { if(currentMenuData.length === 0){ return; } let ingredientsSet = new Set(); currentMenuData.forEach(dayData => { ["kahvalti", "ogle", "aksam"].forEach(meal => { dayData[meal].ingredients.forEach(ing => ingredientsSet.add(ing)); }); }); let ingredientsList = Array.from(ingredientsSet); let listHTML = "Alışveriş Listesi"; ingredientsList.forEach(item => { listHTML += `${item}`; }); listHTML += ""; document.getElementById("shopping-list-result").innerHTML = listHTML; } function saveFavoriteMenu() { let favorites = JSON.parse(localStorage.getItem('favoriteMenus')) || []; let menuHTML = document.getElementById("menu-result").innerHTML; favorites.push({menu: menuHTML, date: new Date().toLocaleString()}); localStorage.setItem('favoriteMenus', JSON.stringify(favorites)); loadFavorites(); } function loadFavorites() { let favorites = JSON.parse(localStorage.getItem('favoriteMenus')) || []; let container = document.getElementById("favorites-container"); container.innerHTML = ""; favorites.forEach((fav, index) => { let card = ` Favori Menü #${index + 1} - ${fav.date} Sil ${fav.menu} `; container.innerHTML += card; }); } function deleteFavorite(index) { let favorites = JSON.parse(localStorage.getItem('favoriteMenus')) || []; favorites.splice(index, 1); localStorage.setItem('favoriteMenus', JSON.stringify(favorites)); loadFavorites(); } function clearFavorites() { localStorage.removeItem('favoriteMenus'); loadFavorites(); } async function downloadPDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFont("Helvetica"); doc.text("Karavan Menüsü", 10, 10); doc.autoTable({ html: '#menu-result table', startY: 20, theme: 'grid', headStyles: { fillColor: [254, 70, 65] }, styles: { font: 'Helvetica' } }); doc.save("karavan_menu.pdf"); } document.getElementById("generate-menu-btn").addEventListener("click", generateMenu); document.getElementById("save-favorite-btn").addEventListener("click", saveFavoriteMenu); document.getElementById("clear-favorites-btn").addEventListener("click", clearFavorites); document.getElementById("download-pdf-btn").addEventListener("click", downloadPDF); window.addEventListener('load', loadFavorites);

Kazdağları Ücretli ve Ücretsiz En İyi 19 Kamp Alanı

Vize : Nedir? Çeşitleri? Nasıl Alınır? 2025 Ücretleri

Silifke’de Ücretli ve Ücretsiz Denize Sıfır 11 Kamp Alanı

Doğanın İnsanlar Üzerindeki İnanılmaz 6 Etkisi

Araklı Bungalov Oteller ve Bungalov Evler

Tiny House Evlerde Değerli Belgeler ve Öğeler Nasıl Saklanır?

Kudret Havuzu : Nerede? Nasıl Gidilir? Giriş Ücreti 2025

Afyon Bungalov Oteller ve Afyon Bungalov Evler

Dikili Kamp Alanları, Dikili’de En İyi 12 Kamp Alanı

Tiny House Satın Alırken Dikkat Etmeniz Gereken 5 Önemli Konu

Karavan Yemeği Menüsü Planlayıcısı