Wild West Bite - Restaurant Menu Website

Wild West Bite is a web application that presents the menu of a restaurant in a user-friendly manner. The project aims to provide customers with an easy-to-navigate interface to explore menu items, add them to their cart, and submit orders with optional remarks.

Design Process

Target Audience

The website is designed for restaurant customers who want to view the menu, add items to their cart, and place orders online. The goal is to enhance the user experience by providing a visually appealing and intuitive interface.

User Stories

As a user, I want to browse the restaurant menu to see the available dishes and their details.
As a user, I want to add items to my cart and view the total before placing an order.
As a user, I want the option to include remarks or special instructions when adding items to the cart.
As a user, I want a responsive website that works well on different devices.

Existing Features

Dynamic Header and Footer: The website dynamically loads the header and footer using script.js for consistency across pages.
Navigation Bar: A navigation bar allows users to easily navigate between different sections of the website, including Home, Menu, My Cart, and Contact, with highlight function.
Menu Items: Each menu item is presented with an image, name, description, price, and an "Add to Cart" button. Recommended items are highlighted.
Shopping Cart: A hidden shopping cart section allows users to add items while browsing the menu. The cart is hidden on the menu page to maintain focus on menu items, it can be seen on the cart.html
Modal for Remarks: A modal prompts users for remarks when adding items to the cart, enhancing the user's ability to customize their order.
FeedBack Page: With validation of data,ensure users can provide feedback with the right details.

Features Left to Implement

Add to cart: The add to cart button is shown but not aligned.
Special offers: Bringing user to the sections that shows dishes that are in promotion
Member: Allow Users to sign up as member and enjoy futher discount
Clear cart by items: Allow users to choose which items to remove from their cart.

Technology Used

HTML: The standard markup language for creating web pages.
CSS: The style sheet language used for designing the presentation of the HTML.
JavaScript: A programming language used for dynamic behavior on the website.
Normalize.css: A CSS file used to normalize styles across different browsers, ensuring consistent rendering.
Google Fonts - Raleway: The Raleway font from Google Fonts is used for a visually appealing text presentation.

Testing

Contact Form Scenario

Go to the "Contact Us" Page:
- Navigate to the "Contact Us" page.
Submit the Empty Form:
- Attempt to submit the form without filling out any fields.
- Verify that an error message about the required fields appears.
Submit Form with an Invalid Email:
- Enter an invalid email address in the form.
- Verify that a relevant error message appears.
Submit Form with Valid Inputs:
- Fill out the form with all inputs valid.
- Verify that a success message appears.

Browser and Screen Testing

The code has been tested on Mobile layout (Iphone 14 Max Pro)

The navigation bar and menu items have a responsive design to ensure usability on different devices.
Forms and buttons have appropriate styling for an intuitive user interface.