food
"Create a responsive, single-page food delivery application like Zomato or Swiggy using only HTML, CSS, and JavaScript (no frameworks). The app should simulate user interaction and have dynamic UI updates using JavaScript. Include the following features divided into key modules:
🧑🍳 1. Home Page & Restaurant Listing
A header navbar with logo, search bar, login button
A location selector (dropdown or modal)
A carousel/banner section for promotions
Display a list of restaurants with:
Restaurant Name
Ratings & Reviews
Cuisine Tags (e.g., Indian, Chinese, Pizza)
Estimated Delivery Time
Restaurant Image
Use JavaScript to load restaurant data from a local mock JSON or JS array.
📜 2. Restaurant Details & Menu View
When a user clicks on a restaurant card:
Open a new section/modal with:
Restaurant name, image, ratings
Dynamic food menu list categorized by type (e.g., Starters, Main Course, Desserts)
Each item should show:
Item name
Price
Short description
“Add to Cart” button
Data should be loaded dynamically using JavaScript.
🛒 3. Cart System (Client-side using JS)
Add/remove food items from cart using buttons
Display total price, quantity, and list of added items
Add “Place Order” button (which simulates order placed)
Cart should be a popup or side panel
Use localStorage to persist cart data on page reload
👤 4. User Authentication Simulation
Simple modal for login/signup with email & password
Use localStorage to simulate user login session
After login, show user icon and name instead of login button
🛍 5. Order History (Optional Advanced)
Store placed orders in localStorage
Display past orders on a separate section with date, items, and total amount
⚙ 6. Admin Simulation (Basic)
A hidden admin page that can:
Add/edit restaurant info
Add/edit menu items
View order stats (from stored data)
Use basic form inputs and localStorage to simulate updates.
🎨 UI & Styling
Use clean and modern CSS
Make it fully responsive for mobile and desktop
Use CSS grid/flexbox for layout
Include hover effects, transitions, and popups
💡 Technical Constraints
No external JS frameworks like React/Vue
Only vanilla JavaScript, HTML, and CSS
Use localStorage for storing:
Cart
User session
Order history
Mock restaurant data
Use modular JavaScript (functions for each action)
📦 Output Files:
Structure your files like this:
/food-app/
│
├── index.html
├── style.css
├── script.js
├── /assets/
│ ├── images/
│ └── icons/
└── /data/
└── mockRestaurants.js
✅ Bonus Feature Ideas (Optional):
Rating/feedback system
Search filter (by rating, cuisine, time)
Pagination or infinite scroll
Order tracking steps (like “Preparing”, “Out for Delivery”, “Delivered”)
Delivery partner mock profile
✅ Example Usage:
👉 You can feed this prompt directly to ChatGPT or Copilot:
"Generate a single-page food delivery web app using HTML, CSS, and JavaScript with restaurant listing, dynamic menu, cart system with localStorage, and order placement simulation."
Devendra Pandey
shared this idea