Moroccan Restaurant Ordering App is a responsive web application that lets users explore a range of traditional Moroccan dishes and easily place orders. The app incorporates a user-friendly interface with a rating system at the end to allow customers to share their dining experience. Whether it's a delicious tagine, couscous, or mint tea, users can browse through the menu and enjoy an authentic Moroccan food experience, right from their device. The app also allows users to add multiple items of the same dish, automatically updates the price, and offers a simple checkout process.
- Browse through a variety of traditional Moroccan dishes such as Tagine, Couscous, and Mint Tea.
- Add multiple items of the same dish:
- Users can click the "+" button to add more of the same dish to their order.
- When more than one item of the same dish is added, the price automatically updates to reflect the quantity.
- For example, if you add two items of Tagine, the app will display "Tagine x2" next to the item in the order summary.
- Remove items:
- A "Remove" button will appear next to item in the order summary.
- Clicking the "Remove" button will decrease the quantity of the item by one in case there is more than one item of same dish.
- If the quantity reaches zero, the item will be removed from the order altogether.
- The price automatically updates when the quantity is changed.
- Proceed to payment: After reviewing the order, the user can proceed to enter their payment details.
- Thank You message and rating system: Once the payment is complete, users will see a "Thank You" message and can rate their experience.
- Browse through the menu and click the "+" button to add dishes to your order.
- If you want to add multiple quantities of the same dish, keep clicking the "+" button to increase the number of items. The price will automatically update based on the quantity.
- If you want to remove an item, click the "Remove" button next to the dish. The item count will decrease, and the price will adjust accordingly.
- Once you're ready to complete your order, click the "Complete Order" button to proceed to the payment page.
- Enter your card details, then click the "Pay" button to finalize your purchase.
- After completing the payment, you'll see a "Thank You" message and be prompted to rate your experience.
Check out the live version of the app here: https://moroccan-restaurant-ordering-scrimba.netlify.app
- HTML
- CSS
- JavaScript
The app is designed with a Moroccan theme to reflect the cultural richness of Moroccan cuisine. The header features a Moroccan pattern background to give users an authentic feel of the food culture.
Contributions are welcome! Please feel free to fork this repository, make your changes, and submit a pull request.
Developed as a solo project for the Frontend Career Path on Scrimba.
Moroccan Restaurant Ordering App in Phone Mockup:
App in Desktop View:
