Skip to content

gurjeetsinghvirdee/restaurant-menu-application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Restaurant Menu Website

This project is a minor project completed during the Coding Ninjas course. It involves creating a responsive restaurant menu website using HTML, CSS, Bootstrap, and JavaScript. The website displays a menu with various food items, categorized into starters, mains, desserts, and beverages. Users can filter items based on categories and use a search functionality to find specific dishes.


Features:

  1. Responsive Design:

    • The website is designed to be responsive and adaptable to different screen sizes, including desktop, medium, and mobile views.
  2. Navbar:

    • The website features a navigation bar (navbar) with navigation links and a search input field.
    • For medium and mobile views, a navbar toggler is included for better user experience.
  3. Menu Display:

    • The menu items are displayed using Bootstrap's card component.
    • Each item shows its title, price, description, and category.
    • The menu is dynamically rendered using JavaScript based on a provided menu array.
  4. Filter Buttons & Search Functionality:

    • Users can filter menu items based on categories using filter buttons.
    • The search input allows users to search for specific items based on keywords.
  5. Styling:

    • The website utilizes a color scheme with color codes #333745, #E63462, #FE5F55, #C7EFCF, #EEF5DB for a cohesive and visually appealing design.
    • The layout and styling ensure a clean and modern look.

Instructions for Running the Project:

  1. Clone the repository to your local machine.

    git clone https://github.com/<your-user-name>/resturant-menu-application/
  2. Open the index.html file in a web browser.

    open index.html
  3. Explore the restaurant menu website and enjoy the responsive design and interactive features.

Project Structure:

  • index.html: Main HTML file containing the structure of the website.
  • styles.css: CSS file containing the styling for the website.
  • app.js: JavaScript file for dynamic rendering of menu items and implementing functionality.

Future Improvements:

  • Add more items to the menu array for a richer user experience.
  • Implement additional features, such as user authentication or an order system.