Skip to content

food-save #45

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
itsKanika wants to merge 1 commit into
base: main
Choose a base branch
from
Open

food-save #45

Show file tree
Hide file tree
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
69 changes: 69 additions & 0 deletions food-save/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>food++</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>food++</h1>
</div>
<ul>
<li><a href="#meals">meals</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div>
<button onclick="alert('Login feature coming soon!')">Login</button>
<button onclick="alert('Signup feature coming soon!')">Sign Up</button>
</div>
</nav>
</header>

<section class="hero">
<h1>Save on Delicious Meals</h1>
<p>Get food from your favorite restaurants at a fraction of the price.</p>
<input type="text" id="searchInput" placeholder="Search restaurants near you...">
<button onclick="searchRestaurants()">Search</button>
</section>

<section class="meals" id="meals">
<h2>Discounted Meals</h2>
<div id="mealsContainer">
<!-- Meals will be dynamically generated here -->
</div>
</section>

<section class="partners" id="partners">
<h2>Our Restaurant Partners</h2>
<ul>
<li>Italian Restaurant</li>
<li>Mexican Delight</li>
<li>Green Bistro</li>
<li>Burger Town</li>
<li>Sushi Express</li>
</ul>
</section>

<section class="cta">
<h2>Don’t Miss Out!</h2>
<p>Join us in reducing food waste while enjoying great meals at low prices.</p>
<button onclick="alert('Explore more feature coming soon!')">Explore More</button>
</section>

<footer id="contact">
<p>Contact Us: info@food++.com</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</footer>

<script src="script.js"></script>
</body>
</html>
74 changes: 74 additions & 0 deletions food-save/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `
<img src="${meal.image}" alt="${meal.name}">
<h3>${meal.name}</h3>
<p>${meal.restaurant}</p>
<p class="price">${meal.price}</p>
`;
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 = '<p>No meals found.</p>';
} else {
filteredMeals.forEach((meal) => {
const mealItem = document.createElement("div");
mealItem.classList.add("meal-item");

mealItem.innerHTML = `
<img src="${meal.image}" alt="${meal.name}">
<h3>${meal.name}</h3>
<p>${meal.restaurant}</p>
<p class="price">${meal.price}</p>
`;
mealsContainer.appendChild(mealItem);
});
}
}

159 changes: 159 additions & 0 deletions food-save/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}