geo-app.html

<!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;
      }
      button {
        font-size: 24px;
      }
  </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) {

                let clientId = 'D3ZJR3WCUQIDBTF5RHZYQKBYLDAC1SEJG5WRHEBBL0DVMO5O'
                let clientSecret = 'TV00UP2BM323WTK0QHKXTVSA3YMRCHNZPLTH5WPTGML0CPCT'

                let requestString = `https://api.foursquare.com/v2/venues/explore?client_id=${clientId}&client_secret=${clientSecret}&v=20180323&limit=1&ll=${userLat},${userLon}&query=coffee`

                // fetch(requestString)
                // .then(function(response) {
                // // Code for handling API response
                // console.log(response)
                // })
                // .catch(function(error) {
                // // Code for handling errors
                // console.log(error)
                //  });


                    let response = await request(requestString)
                    let json = await response.json()
                    console.log(json)
                    document.body.innerHTML = json.response.gr

            }


  </script>
</html>