Wanderlust


#1

hey folks,
im having some trouble on this project (javascript->requests->wanderlust) https://www.codecademy.com/courses/intermediate-javascript-requests/projects/wanderlust?course_redirect=introduction-to-javascript

technically, im at step 40 and should see results log. weather is working, venues is not. i cant find the bug. any sage advice or thoughts?

my code is here: https://gist.github.com/3b806ff7c92e57cb7f05c91a8b9b0d0a OR below:
// Foursquare API Info
const clientId = ‘’;
const clientSecret = ‘’;
const url = ‘https://api.foursquare.com/v2/venues/explore?near=’;

// APIXU Info
const apiKey = ‘’;
const forecastUrl = ‘http://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")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
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=20180713;
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(location => location.venue);
console.log(venues);
return venues;
}
} catch (error) {
console.log(error);
}
};

const getForecast = async () => {
const urlToFetch = ${forecastUrl}${apiKey}&q=${$input.val()}&days=4&hour=11;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
console.log(jsonResponse);
const days = jsonResponse.forcast.forecastday;
return days;
}
} catch (error) {
console.log(error);
}
}

// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
const venue = venues[index];
const venueIcon = venue.categories[0].icon;
const venueImgSrc = ${venueIcon.prefix}&bg_64${venueIcon.suffix};
let venueContent = createVenueHTML(venue.name, venue.location, venueImgSrc);
$venue.append(venueContent);
});
$destination.append(<h2>${venues[0].location.city}</h2>);
}

const renderForecast = (days) => {
$weatherDivs.forEach(($day, index) => {
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)