This app alows the user to map out a piknik plan. The user has several options for food type and type of destination, as well as distance range.
The code deploys a series of modals, which are launched by the Piknik button on the landing page. In the first modal there is a user form in which the user can enter their location and answer a few choice questions about range, food, and destination. In the second modal the user sees a container with 3 cards; the first with starting address, the second two display address, images, and descriptions or information about the chosen locations. The final page will display a map with the user's starting point, food pick-up point, and destination point drawn out. On each page is a Piknik button which reveals the following modal.
- Employs a CSS framework called Foundation.
- Uses modals, input forms, a footer, and cards to display content.
- Is interactive: uses a form to obtain user input and responds in following modal.
- Uses at least two server-side APIs.
- APIs are obtained with the .fetch method.
- The MapBox API allows us to map out our locations with lat. and long. inputs.
- The TomTom API allows us to obtain a list of restaurants that are in the categories that the user choses in the input form.
- Uses client-side storage to store data: when the user clicks save, previous search results will be saved and then displayed in the form input modal on click.
This is the wireframe our group created in the planning stages of our project, which resembles the final layout.
https://bracamon.github.io/Piknik/
Lara Zegart
- Github:
- Gitlab:
- LinkedIn:
- Email:
Alfredo Bracamontes-Ochoa
- Github: bracamon
- Gitlab: @bracamon
- LinkedIn: Alfredo Bracamontes
- Email: [email protected]
John Delizo
- Github:
- Gitlab:
- LinkedIn:
- Email:
Shelsy Barrera
- Github: Shellsea31
- Gitlab: @Shellsea
- LinkedIn: Shelsy Barrera
- Email: [email protected]