I went through this project and did it the best I could. I type in “Bangkok” in the city search and nothing comes up. I will post the code. Did I do it right?
// Foursquare API Info
const foursquareKey = '';
const url = 'https://api.foursquare.com/v3/places/search';
// OpenWeather Info
const openWeatherKey = '';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';
// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $placeDivs = [$("#place1"), $("#place2"), $("#place3"), $("#place4")];
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const options = {
method: 'GET',
headers: {
Accept: 'application/json',
Authorization: fsq3ebB+4pBa3n9HAxJqqex91RmO4LpTiEK4hEB3CCOaJV0=';
}
};
// Add AJAX functions here:
const getPlaces = async () => {
const city = $input.val();
const urlToFetch = `${url}${city}$limit=10`;
try {
const response = await fetch(urlToFetch, options);
} catch(error) {
console.log(error);
}
if (response.ok) {
const jsonResponse = await response.json();
console.log(jsonResponse);
const places = jsonResponse.results;
console.log(places);
return places;
}
};
const getForecast = () => {
const urlToFetch = `${weatherURL}?q=${$input.val()}&APPID=${openWeatherKey}`;
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
return jsonResponse;
} catch(error) {
console.log(error);
}
}
};
// Render functions
const renderPlaces = (places) => {
$placeDivs.forEach(($place, index) => {
// Add your code here:
const place = places[index];
const placeIcon = place.categories[0.icon;
const placeImgSrc = `${placeIcon.prefix}bg_64${placeIcon.suffix}`;
const placeContent = createPlaceHTML(place.name, place.location, placeImgSrc);
$place.append(placeContent);
});
$destination.append(`<h2>${places[0].location.locality}</h2>`);
};
const renderForecast = (forecast) => {
const weatherContent = createWeatherHTML(forecast);
$weatherDiv.append(weatherContent);
};
const executeSearch = () => {
$placeDivs.forEach(place => place.empty());
$weatherDiv.empty();
$destination.empty();
$container.css("visibility", "visible");
getPlaces();
getForecast().then(forecast +> renderForecast(forecast));
return false;
}
$submit.click(executeSearch);
The project is at https://www.codecademy.com/courses/learn-intermediate-javascript/projects/wanderlust