Codecademy export
// Foursquare API Info | |
const clientId = 'PFUGRAI4R03K5FLNY2HXTV35I1HSQK14FTG4PWA22WQJMNCD'; | |
const clientSecret = 'KF2TDCXEE3ZRF1HPRV01EZD0G5AAQHH0XJWFGSY35WLNDEP4'; | |
const url = 'https://api.foursquare.com/v2/venues/explore?near='; | |
// APIXU Info | |
const apiKey = '20093e6975ba40acbaf160016192905'; | |
const forecastUrl = 'https://api.apixu.com/v1/forecast.json?key='; | |
// Page Elements | |
const $input = $('#city'); | |
const $submit = $('#button'); | |
const $destination = $('#destination'); | |
const $container = $('.container'); | |
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4"), $("#venue5")]; | |
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4"), $("#weather5")]; | |
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; | |
// Add AJAX functions here: | |
const getVenues = async() => { | |
const city = $input.val(); | |
const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20190513`; | |
try { | |
const response = await fetch(urlToFetch); | |
if(response.ok) { | |
const jsonResponse = await response.json(); | |
console.log(jsonResponse); | |
const venues = jsonResponse.response.groups[0].items.map(item => item.venue); | |
for (const venue of venues){ | |
venue.photoUrl = getVenuesPhoto(venue.id); | |
} | |
console.log(venues); | |
return venues; | |
} else { | |
throw new Error('Request failed!'); | |
} | |
} catch(error) { | |
console.log(error.message); | |
} | |
} | |
const getVenuesPhoto = async (venueId) => { | |
const urlToFetch = `https://api.foursquare.com/v2/venues/${venueId}/photos?limit=1&client_id=${clientId}&client_secret=${clientSecret}&v=20190513`; | |
try { | |
const response = await fetch(urlToFetch); | |
if (response.ok) { | |
const jsonResponse = await response.json(); | |
const venuesPhoto = `${jsonResponse.response.venue.photos.groups[0].items[0].prefix}200x200${jsonResponse.response.venue.photos.groups[0].items[0].suffix}`; | |
console.log(venuesPhoto); | |
return venuesPhoto; | |
} | |
} | |
catch(error) { | |
console.log(error.message); | |
} | |
} | |
const getForecast = async() => { | |
const urlToFetch = `${forecastUrl}${apiKey}&q=${$input.val()}&days=5&hour=11`; | |
try{ | |
const response = await fetch(urlToFetch); | |
if(response.ok) { | |
const jsonResponse = await response.json(); | |
console.log(jsonResponse); | |
const days = jsonResponse.forecast.forecastday; | |
return days; | |
} else {throw new Error('Request failed!');} | |
} catch(error) { | |
console.log(error.message); | |
} | |
} | |
// Render functions | |
const renderVenues = (venues) => { | |
$venueDivs.forEach(async ($venue, index) => { | |
// Add your code here: | |
const randomIndex = generateRandomResults(venues.length) | |
const venue = venues[randomIndex[index]]; | |
const venueIcon = venue.categories[0].icon; | |
const venueImgSrc = `${venueIcon.prefix}bg_64${venueIcon.suffix}`; | |
let venuePhotoSrc = getVenuesPhoto(venue.id).then(photoUrl => {let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc, venue.photoUrl); | |
$venue.append(venueContent); | |
}); | |
}); | |
$destination.append(`<h2>${venues[0].location.city}</h2>`); | |
} | |
const generateRandomResults = numOfResults => { | |
const randomIndexArray = []; | |
arrayLength = numOfResults < 6 ? numOfResults: 10; | |
while(randomIndexArray.length < arrayLength){ | |
const randomNumber = Math.floor(Math.random() * numOfResults); | |
if(!randomIndexArray.includes(randomNumber)){ | |
randomIndexArray.push(randomNumber); | |
} | |
} | |
return randomIndexArray; | |
} | |
const renderForecast = (days) => { | |
$weatherDivs.forEach(($day, index) => { | |
// Add your code here: | |
const currentDay = days[index]; | |
let weatherContent = createWeatherHTML(currentDay); | |
$day.append(weatherContent); | |
}); | |
} | |
const executeSearch = () => { | |
$venueDivs.forEach(venue => venue.empty()); | |
$weatherDivs.forEach(day => day.empty()); | |
$destination.empty(); | |
$container.css("visibility", "visible"); | |
getVenues().then(venues => renderVenues(venues)); | |
getForecast().then(forecast => renderForecast(forecast)); | |
return false; | |
} | |
$submit.click(executeSearch) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment