Project 1: Piknik App

Developed By Function Junction

Description:

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.

Technologies Used:

• 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.

Images:

Wireframe

This is the wireframe our group created in the planning stages of our project, which resembles the final layout.

This Is Our Landing Page

Deployed Link:

https://shellsea31.github.io/Piknik/

Contributors

Lara Zegart

• Github

Alfredo Bracamontes-Ochoa

• Github

John Delizp

• Github

Shelsy Barrera

• Github: Shellsea31
• Gitlab: @Shellsea
• LinkedIn: Shelsy Barrera
• Email: elainesbarrera@gmail.com