├── menu
├── php
├── Readme
├── style
├── script
└── index


/menu:
--------------------------------------------------------------------------------
1 | [
2 |   { "name": "Pizza", "price": "$10" },
3 |   { "name": "Burger", "price": "$6" },
4 |   { "name": "Pasta", "price": "$8" },
5 |   { "name": "Sushi", "price": "$12" },
6 |   { "name": "Salad", "price": "$5" }
7 | ]
8 | 


--------------------------------------------------------------------------------
/php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if ($_SERVER["REQUEST_METHOD"] === "POST") {
 3 |     $name = $_POST['name'];
 4 |     $email = $_POST['email'];
 5 |     $message = $_POST['message'];
 6 | 
 7 |     $to = "support@delishdelivery.com";
 8 |     $subject = "New Contact Message";
 9 |     $body = "Name: $name\nEmail: $email\nMessage:\n$message";
10 |     $headers = "From: $email";
11 | 
12 |     if (mail($to, $subject, $body, $headers)) {
13 |         echo "Message sent successfully!";
14 |     } else {
15 |         echo "Message failed to send.";
16 |     }
17 | }
18 | ?>
19 | 


--------------------------------------------------------------------------------
/Readme:
--------------------------------------------------------------------------------
 1 | # Online Food Delivery Website
 2 | 
 3 | **DelishDrop** is a simple responsive web app for food ordering.
 4 | 
 5 | ## Features
 6 | - HTML5/CSS3 and JavaScript
 7 | - Menu display from JSON
 8 | - Order form with confirmation
 9 | 
10 | ## Files
11 | - `index.html` — Main page
12 | - `style.css` — Styling
13 | - `script.js` — Interaction logic
14 | - `menu.json` — Sample menu data
15 | - `README.md` — Project guide
16 | 
17 | ## How to Run
18 | Open `index.html` in a browser. JavaScript dynamically loads the menu and handles order submission.
19 | 
20 | ## License
21 | MIT
22 | 


--------------------------------------------------------------------------------
/style:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Arial, sans-serif;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   background-color: #f8f8f8;
 6 | }
 7 | 
 8 | header {
 9 |   background-color: #ff5722;
10 |   color: white;
11 |   padding: 10px 20px;
12 |   display: flex;
13 |   justify-content: space-between;
14 |   align-items: center;
15 | }
16 | 
17 | nav a {
18 |   color: white;
19 |   margin-left: 15px;
20 |   text-decoration: none;
21 | }
22 | 
23 | main {
24 |   padding: 20px;
25 | }
26 | 
27 | section {
28 |   margin-bottom: 30px;
29 | }
30 | 
31 | form input, form button {
32 |   display: block;
33 |   margin: 10px 0;
34 |   padding: 10px;
35 |   width: 100%;
36 |   max-width: 400px;
37 | }
38 | 
39 | footer {
40 |   background-color: #333;
41 |   color: white;
42 |   text-align: center;
43 |   padding: 10px;
44 | }
45 | 


--------------------------------------------------------------------------------
/script:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function () {
 2 |   const menuItems = [
 3 |     { name: 'Pizza', price: '$10' },
 4 |     { name: 'Burger', price: '$6' },
 5 |     { name: 'Pasta', price: '$8' }
 6 |   ];
 7 | 
 8 |   const menuContainer = document.getElementById('menu-items');
 9 |   menuItems.forEach(item => {
10 |     const div = document.createElement('div');
11 |     div.textContent = `${item.name} - ${item.price}`;
12 |     menuContainer.appendChild(div);
13 |   });
14 | 
15 |   const form = document.getElementById('order-form');
16 |   const confirmation = document.getElementById('confirmation');
17 | 
18 |   form.addEventListener('submit', function (e) {
19 |     e.preventDefault();
20 |     const name = document.getElementById('name').value;
21 |     const item = document.getElementById('item').value;
22 |     const quantity = document.getElementById('quantity').value;
23 | 
24 |     confirmation.textContent = `Thank you ${name}, your order of ${quantity} ${item}(s) has been placed!`;
25 |     form.reset();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/index:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Online Food Delivery</title>
 7 |   <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |   <header>
11 |     <h1>DelishDrop</h1>
12 |     <nav>
13 |       <a href="#menu">Menu</a>
14 |       <a href="#about">About</a>
15 |       <a href="#contact">Contact</a>
16 |     </nav>
17 |   </header>
18 | 
19 |   <main>
20 |     <section id="menu">
21 |       <h2>Menu</h2>
22 |       <div id="menu-items"></div>
23 |     </section>
24 | 
25 |     <section id="about">
26 |       <h2>About Us</h2>
27 |       <p>DelishDrop delivers your favorite meals hot and fresh to your doorstep.</p>
28 |     </section>
29 | 
30 |     <section id="contact">
31 |       <h2>Contact</h2>
32 |       <form id="order-form">
33 |         <input type="text" id="name" placeholder="Your Name" required>
34 |         <input type="text" id="item" placeholder="Food Item" required>
35 |         <input type="number" id="quantity" placeholder="Quantity" required>
36 |         <button type="submit">Place Order</button>
37 |       </form>
38 |       <p id="confirmation"></p>
39 |     </section>
40 |   </main>
41 | 
42 |   <footer>
43 |     <p>&copy; 2025 DelishDrop</p>
44 |   </footer>
45 | 
46 |   <script src="script.js"></script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------