This app allows users to search for places to go on "Date Night". When a user searches for something the results are displayed in a list as well as on a map for visual representation. The direct link for the app is here!
When the page first loads it will ask you for permission to collect your location. This is done using html geolocation. This data is used for the api call to foursquare as well as centering the google map to your position. If the user declines a input box will appear prompting the user to input a location. Geocoding is then used to derive a lat lng from their input.
This is the main screen for the app. The three buttons below the title are for food, drinks, or entertainment. If a user clicks on one
of these buttons it will send an api request to foursquare with the corresponding section. The search field allows a user to enter a
specific place or type of food. This value is used in the api call to foursquare as a query.
When a user clicks on a button or types in a query and searches the homepage is hidden with js-hide-display and the results are
unhidden. The map will take the location data from the foursquare api call and create markers which are placed. The map is centered on
the user's location.
The list is generated with javascript and the data recieved from the foursquare api. The more info link takes the user to foursquare for more information such as menu, pictures, and reviews.
At the top of the screen you are able to search again which unhides the home page and hides the result page. Also the markers are cleared
by clearing the coordinates [] and the search bar value is reset. When another search is performed the dom is resest by setting results
to an empty string.
- HTML
- CSS
- Javascript
- jQuery
- Google Maps Javascript Api
- Google Maps Geocoding Api
- Foursquare Api
This page was made responsive using flexbox and @media querys
