diff --git a/food-save/index.html b/food-save/index.html new file mode 100644 index 0000000..6d99227 --- /dev/null +++ b/food-save/index.html @@ -0,0 +1,69 @@ + + + + + + food++ + + + +
+ +
+ +
+

Save on Delicious Meals

+

Get food from your favorite restaurants at a fraction of the price.

+ + +
+ +
+

Discounted Meals

+
+ +
+
+ +
+

Our Restaurant Partners

+ +
+ +
+

Don’t Miss Out!

+

Join us in reducing food waste while enjoying great meals at low prices.

+ +
+ + + + + + diff --git a/food-save/script.js b/food-save/script.js new file mode 100644 index 0000000..2e76e2b --- /dev/null +++ b/food-save/script.js @@ -0,0 +1,74 @@ +const meals = [ + { + name: "Spaghetti Carbonara", + restaurant: "Italian Restaurant", + price: "$5.99", + image: "https://example.com/meal1.jpg", + }, + { + name: "Chicken Burrito", + restaurant: "Mexican Delight", + price: "$4.50", + image: "https://example.com/meal2.jpg", + }, + { + name: "Vegan Salad", + restaurant: "Green Bistro", + price: "$3.99", + image: "https://example.com/meal3.jpg", + }, + { + name: "Cheeseburger", + restaurant: "Burger Town", + price: "$2.99", + image: "https://example.com/meal4.jpg", + }, + ]; + + // Load meals into the page + window.onload = () => { + const mealsContainer = document.getElementById("mealsContainer"); + meals.forEach((meal) => { + const mealItem = document.createElement("div"); + mealItem.classList.add("meal-item"); + + mealItem.innerHTML = ` + ${meal.name} +

${meal.name}

+

${meal.restaurant}

+

${meal.price}

+ `; + mealsContainer.appendChild(mealItem); + }); + }; + + // Search functionality (basic) + function searchRestaurants() { + const query = document.getElementById("searchInput").value.toLowerCase(); + const mealsContainer = document.getElementById("mealsContainer"); + mealsContainer.innerHTML = ''; // Clear previous meals + + const filteredMeals = meals.filter( + (meal) => + meal.name.toLowerCase().includes(query) || + meal.restaurant.toLowerCase().includes(query) + ); + + if (filteredMeals.length === 0) { + mealsContainer.innerHTML = '

No meals found.

'; + } else { + filteredMeals.forEach((meal) => { + const mealItem = document.createElement("div"); + mealItem.classList.add("meal-item"); + + mealItem.innerHTML = ` + ${meal.name} +

${meal.name}

+

${meal.restaurant}

+

${meal.price}

+ `; + mealsContainer.appendChild(mealItem); + }); + } + } + \ No newline at end of file diff --git a/food-save/style.css b/food-save/style.css new file mode 100644 index 0000000..1d79778 --- /dev/null +++ b/food-save/style.css @@ -0,0 +1,159 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + } + + header { + background-color: #2ecc71; + color: white; + padding: 15px; + text-align: center; + } + + header nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + } + + nav ul { + list-style: none; + display: flex; + gap: 20px; + } + + nav ul li a { + color: white; + text-decoration: none; + font-weight: bold; + } + + .hero { + background-color: #3498db; + color: white; + padding: 100px 20px; + text-align: center; + } + + .hero h1 { + font-size: 3rem; + } + + .hero input[type="text"] { + padding: 10px; + width: 40%; + margin-right: 10px; + border: none; + border-radius: 5px; + } + + .hero button { + padding: 10px 20px; + background-color: #e74c3c; + border: none; + color: white; + border-radius: 5px; + cursor: pointer; + } + + .meals { + padding: 50px; + background-color: #f8f8f8; + } + + .meals h2 { + text-align: center; + margin-bottom: 20px; + } + + .meal-item { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + margin-bottom: 20px; + } + + .meal-item img { + width: 100%; + border-radius: 10px; + } + + .meal-item h3 { + margin-top: 10px; + } + + .meal-item p { + color: #7f8c8d; + } + + .meal-item .price { + color: #e74c3c; + font-size: 1.2rem; + margin-top: 10px; + } + + .partners { + text-align: center; + padding: 50px; + } + + .partners h2 { + margin-bottom: 20px; + } + + .partners ul { + list-style: none; + padding: 0; + } + + .partners ul li { + display: inline; + margin: 0 15px; + font-weight: bold; + color: #2ecc71; + } + + .cta { + text-align: center; + padding: 50px; + background-color: #3498db; + color: white; + } + + .cta button { + padding: 10px 20px; + background-color: #f39c12; + border: none; + color: white; + font-size: 1.2rem; + border-radius: 5px; + cursor: pointer; + } + + footer { + background-color: #2c3e50; + color: white; + padding: 20px; + text-align: center; + } + + footer ul { + list-style: none; + padding: 0; + } + + footer ul li { + display: inline; + margin: 0 10px; + } + + footer ul li a { + color: white; + text-decoration: none; + } + \ No newline at end of file