https://github.com/gurjeetsinghvirdee/restaurant-menu-application
Restaurant Menu Application
https://github.com/gurjeetsinghvirdee/restaurant-menu-application
bootstrap5 codingninjas html-css-javascript web-development
Last synced: 2 months ago
JSON representation
Restaurant Menu Application
- Host: GitHub
- URL: https://github.com/gurjeetsinghvirdee/restaurant-menu-application
- Owner: gurjeetsinghvirdee
- Created: 2024-01-23T09:57:40.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-23T10:12:11.000Z (over 2 years ago)
- Last Synced: 2025-05-26T00:08:18.166Z (about 1 year ago)
- Topics: bootstrap5, codingninjas, html-css-javascript, web-development
- Language: JavaScript
- Homepage: https://gurjeetsinghvirdee.github.io/restaurant-menu-application/
- Size: 9.77 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
```bash
git clone https://github.com//resturant-menu-application/
```
2. Open the `index.html` file in a web browser.
```bash
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.