Magic Meal : An online food ordering website
Project Details

This project involved creating the mockup of the website from the provided design documents and website references. The webpages contain custom JavaScript and CSS animations with sleek HTML Inerfaces. The website also involves html5 - video integration on the homepage while maintaining the website responsive at all the viewports. The wesite involves Google Maps API integration and a fancy JavaScript driven price calculator.

Functional operation

  1. Food ordering website with Google Maps API Integration. Uses JavaScript Location API to calculate Latitude and Longitude.
  2. JavaScript / JQuery Driven price Calculator. Custom CSS and JavaScript based animations.
  3. Custom scrollable sidebar (click to view)
  4. Bootstrap Modal based location finder and login system
  5. Completely responsive at all the viewports.
Technologies used
  1. HTML5 / CSS / Javascript / JQuery : Twitter Bootstrap's grid system with custom CSS

Demo Url :
Logged-in Version :
List page :,html

Project Snapshot (Click to expand and view screenshots)
Home Page
Video Integration on the homepage. Video is replaced by static image on the lower screen widths.
List of Restaurants based on selections
This page shows the list of the restaurants based on the selection on the homepage.
List Page with more filter options
This page shows more filters that can be applied on the page to narrow down restaurant search.
Login Modal
Present on all the pages if the user is not logged-in. for logged-in version of the page please click here
Google Map integration on the homepage to select location
Restaurant Menu page
Javascript driven price calculator
The price calculator calculates the time of cooking as well as the price estimate to deliver the food to the customer.
Magicmeal Signup page
Food delivery and payment options