phase-1-mock-cc-flatburger's Introduction

Phase 1 Mock Code Challenge: Flatburger

Flatiron's Burger Restaurant is open for business! You will be using a local API and building out the frontend for our app, Flatburger.

To view in VSCode, right click on the README.md file and select "Open Preview".

Demo

Use this image as an example of how the app should look once it is complete.

Setup

Run this command to get the backend started:

json-server --watch db.json

Test your server by visiting this route in the browser:

http://localhost:3000/burgers

Then, open the index.html file on your browser to run the application.

Write your code in the src/index.js file. The base URL for your API will be http://localhost:3000.

Deliverables

As a user, I can:

See all of the burger names in a div with the id of restaurant-menu. Create a span tag with the name of the burger and add it to the div#restaurant-menu once you have retrieved the burger data from the server. You will need to make a GET request to the following endpoint to retrieve the burger data:

GET /burgers

Example response:
[
   {
     "id": 1,
     "name": "Flatburger",
     "image": "./assets/food/flatburger.jpeg",
     "number_in_cart": 0
   },
   {
     "id": 2,
     "name": "Maple Bacon Burger",
     "image": "./assets/food/maple-bacon-burger.jpeg",
     "number_in_cart": 0
   }
]

When the burger in the div#restaurant-menu is clicked, display the burger's details in the div#food-detail.
When the form#add-to-cart-form is submitted, add the value from the input field to the burger displayed in the div#food-detail. No persistence is needed. The number in cart should be cumulative. For example, if a burger currently has 7 for the number in cart, and a user add another 7 to the number in cart via the form, the number in cart displayed for the burger should increase to 14.

Recommend Projects