This is a frontend app built with Vanilla JS, HTML, and Skeleton CSS. It provides users with list of options for their one day vacation time in Austin, TX.

The main page is linked to the script file, which looks at each checkbox provided, and if it is checked, passes the corresponding API call (Google Maps Place API) into a Promise.all() method with a nested asynchronous mapping function. The mapping function returns a list of objects that each contain an id letter and the json data from the first returned object of the API list (which provides up to 20 objects).

The API call routes have a dynamic function that interpolates a random lat/long pair from within a given geo-rectangle of the city. This helps to prevent duplicate locations from appearing in the results.

The id letter of each object generated by the mapping function is then checked against the class names of the li elements to match with the proper time of day (morning, afternoon, evening, late-night). The matched object is also checked to see if it is a duplicate or if the li elements are already occupied by others objects' json data. If the object passes the tests it fills the li's inner HTML with the name of the place and google maps location link based on lat/long coordinates.

The conditional logic is limited in that if three checkboxes in one time category (ex. morning) are all checked, the last option (in this case culture) will always be omitted. Potentially in the future, I could randomize the results list order to provide a less predictable outcome for this limitation.

Another limitation comes from the API itself, which does not provide an easy way to provide a google maps link that has the name of the the place as the result. What the user sees are cardinal directions in place of the name. This is a confusing issue which could be rectified by utilizing other google maps APIs that are more sophisticated than the Places API.