Https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust

https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust

Hello,
In the wanderlust project, I am stuck at step 13:
I get the code 404, nothing is displayed.
To find the error, I write ‘response’ on the console before testing " if (response.ok)".
I then see that response.ok=false, but I will need help to know why…
Thanks in advance for help !

Here is my code (I removed my API and clientSecret keys)

"
/ Foursquare API Info
const clientId = ’ ';
const clientSecret = ’ ';
const url = ‘https://api.foursquare.com/v2/venues/explore?near=’;

// 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 venueDivs = [("#venue1"), ("#venue2"), ("#venue3"), $("#venue4")];
const weatherDiv = ("#weather1");
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=20210326’;

try {
const response = await fetch(urlToFetch);
/// to see what’s in response :
console.log(‘response=’,response);
if (response.ok) {console.log(response);}
}
catch(error) {console.log(error);}
};

const getForecast = () => {

}

// Render functions
const renderVenues = (venues) => {
$venueDivs.forEach(($venue, index) => {
// Add your code here:

let venueContent = '';
$venue.append(venueContent);

});
destination.append(`<h2>{venues[0].location.city}`);
}

const renderForecast = (day) => {
// Add your code here:

let weatherContent = '';

$weatherDiv.append(weatherContent);
}

const executeSearch = () => {
$venueDivs.forEach(venue => venue.empty());
$weatherDiv.empty();
$destination.empty();
$container.css(“visibility”, “visible”);
getVenues()
getForecast()
return false;
}

$submit.click(executeSearch)
"

Hello, and happy 1 year anniversary in the forums!

Error 404 means that the page wasn’t found, so it’s a good idea to make sure the URL you’re fetching is what you believe it should be. Try adding a log of the URL you generate for the API call. Is it what it should be?

Click for another hint

This is the URL you’re generating.

const urlToFetch = '${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20210326';

You are using single-quote marks instead of backticks, so it isn’t a template literal.

1 Like

Thank you so much for your advice!!!
Displaying console.log(urlToFetch) I got {url}{city}&limit=1 (…)
So I realized that it’s a quillemets problem: I shouldn’t have used the apostrophe (key of 4 on my azerty keyboard), but the real quote (key of £). It happened to me when I was starting JS, but I forgot, it’s very subtle!
Thank you again for your help that unblocked my problem! :smiley:

1 Like