Created
July 4, 2019 10:08
-
-
Save aliblackwell/df0123bc73f1045d695977f202895ce1 to your computer and use it in GitHub Desktop.
Geolocation app with Foursquare lookup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| body { | |
| background: #caffee; | |
| margin: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 48px; | |
| font-family: sans-serif; | |
| } | |
| button { | |
| font-size: 48px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button>Things around me!</button> | |
| </body> | |
| <script> | |
| let myButton = document.querySelectorAll('button')[0] | |
| myButton.addEventListener('click', () => { | |
| navigator.geolocation.getCurrentPosition(position => { | |
| let userLat = position.coords.latitude | |
| let userLon = position.coords.longitude | |
| let coords = userLat + '<br/> ' + userLon | |
| document.body.innerHTML = coords | |
| doFoursquare(userLat, userLon) | |
| }) | |
| }) | |
| async function doFoursquare(userLat, userLon) { | |
| // add your client id and secret here | |
| let clientId = 'xxx' | |
| let clientSecret = 'xxx' | |
| let requestString = `https://api.foursquare.com/v2/venues/explore?client_id=${clientId}&client_secret=${clientSecret}&v=20180323&limit=10&ll=${userLat},${userLon}&query=coffee` | |
| // fetch(requestString) | |
| // .then(function(response) { | |
| // // Code for handling API response | |
| // console.log(response) | |
| // response.json().then(function(data) { | |
| // console.log(data) | |
| // }) | |
| // }) | |
| // .catch(function(error) { | |
| // // Code for handling errors | |
| // console.log(error) | |
| // }); | |
| let response = await fetch(requestString) | |
| let json = await response.json() | |
| console.log(json) // json is all the data from foursquare | |
| let random = Math.floor(Math.random() * 5) + 0 // get a random number between 0 and 5 | |
| let venueName = json.response.groups[0].items[random].venue.name // pluck out random venue | |
| document.body.innerHTML = venueName | |
| } // END doFoursquare function | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment