Projeto usando JavaScript implementação do site mobile do DrivenEats, um restaurante especial que entrega seu pedido em 6 minutos. Para isso, o restaurante só trabalha com um tipo específico de pedido: o combo de Prato+Bebida+Sobremesa. O site permite de forma fácil a escolha do seu combo, enviando em seguida o pedido por WhatsApp diretamente para o restaurante.
My first project using JavaScript was the implementation of the mobile site called DrivenEats. The website allows you to easily choose your combo, as well as input the NAME and ADDRESS information, then send a standardized message with the summary of the order and all the data via WhatsApp directly to the restaurant.
-
GENERAL
- Do not use any library to implement this project (jQuery, lodash, react, etc), or other languages that compile to JS (TypeScript, ELM, etc), only pure JavaScript.
- The project must be developed using Git and GitHub, in a public repository.
- For each requirement implemented make a commit with a descriptive message of what you have evolved.
-
LAYOUT
- Apply layout for mobile
- Top and close order button must have fixed placement and not scroll with scrollbar
- You can use random images and text to illustrate the page, but vary the price for each item in the same category
- The fonts used are: Righteous (restaurant name and category titles) and Roboto (other texts)
- To make the shadows present in some elements, research on how to apply shadows in CSS and play around with the values until it looks like the layout images
- To make products scroll horizontally, use
overflow-x: scroll
. In desktop mode a scroll is displayed, but in mobile mode not.
-
ITEM SELECTION
- When clicking on an item, it must be marked as selected
- When clicking on an item, if there is already an item selected in the same category, it must be deselected and the new item clicked must be the new selected item
- When clicking on an item already marked, it is not necessary to unmark it
-
END ORDER BUTTON
- By default, the checkout button should be disabled. When clicking the button in this state, nothing should happen.
- When the user has selected the items from the 3 categories, the button must change to the enabled state, following screen layout
-
ORDER SUBMISSION
- Upon finalizing the order, the user must be forwarded to WhatsApp Web, in conversation with the restaurant's contact, with a standard message already filled in
-
BONUS
- Ask for name and address
- When clicking on checkout, issue two
prompt
to the user asking for their name and address. This information must then be added to the final message that is sent by WhatsApp - Confirm the data before finalizing the order
- When clicking "Checkout" instead of going to WhatsApp direct, first review the purchase by a Bonus screen