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.
-
Responsive Design:
- The website is designed to be responsive and adaptable to different screen sizes, including desktop, medium, and mobile views.
-
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.
-
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.
-
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.
-
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.
-
Clone the repository to your local machine.
git clone https://github.com/<your-user-name>/resturant-menu-application/
-
Open the
index.html
file in a web browser.open index.html
-
Explore the restaurant menu website and enjoy the responsive design and interactive features.
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.
- Add more items to the menu array for a richer user experience.
- Implement additional features, such as user authentication or an order system.