Wander lust issue

I’ve completed the (basic steps, not the extra) of the Javascript final project of Wander Lust, but when I try to search for a city nothing comes up. I tried to correct my code by replacing anything I might have written wrong with the code available in the hints. But even when I enter a city into the search bar, I do not receive any result for anything. What am I doing wrong?

Code in the code-byte below

const {createVenueHTML} = require('./helpers.js'); // 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=20180101`; try{ const response = await fetch(urlToFetch); const jsonResponse = await response.json(); console.log(jsonResponse); const venues = jsonResponse.response.groups[0].items.map(item => item.valueToStore); console.log(venues); return venues; if(response.ok){ console.log(response); } }catch(error){ console.log(error); } } 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 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 = (day) => { // Add your code here: const weatherContent = createWeatherHTML(day); $weatherDiv.append(weatherContent); let weatherContent = ''; $weatherDiv.append(weatherContent); } const executeSearch = () => { $venueDivs.forEach(venue => venue.empty()); $weatherDiv.empty(); $destination.empty(); $container.css("visibility", "visible"); getForecast().then(forecast => renderForecast(forecast)); getVenues().then(venues => return renderVenues(venues)); getForecast() return false; } $submit.click(executeSearch)

Hey Salim! How you doing?

If you’re interested about the extra steps check out this thread:

You posted also your API’s secret keys, I hope that you redacted them before posting, if you didn’t simply edit your post.

What am I doing wrong?

At line 87 you have an extra return. Oneline arrow functions return by default. See this:

Also, you forgot to async the arrow function getForecast() :wink:

And here you have some cleanup to do:

const renderForecast = (day) => {
  // Add your code here:
  const weatherContent = createWeatherHTML(day);
  $weatherDiv.append(weatherContent);
  
	let weatherContent = '';
  $weatherDiv.append(weatherContent);
}

Hope this helps solve your issue :slight_smile:

Ahh crap, I forgot to remove my API keys. See that why I need to take a cybersecurity course. I need to learn how to properly hide what’s important! :smiley:

That being said, for the arrow function. I did leave out the return originally, but kept it in to see if it made a difference, when it did not happen. I left it in there.

I’ll clean up the code and tell you what happens momentarily…

Thank you for the quick reply. I really appreciate it.

Well, theoretically it doesn’t actually happen anything to you if you created this API keys only for this project. The worst that can happen is that somebody else uses them to make requests to the server, but being free APIs the tier is pretty limited.
Anyway is good practice to be careful :wink:

I’ll clean up the code and tell you what happens momentarily…
Thank you for the quick reply. I really appreciate it.

You’re welcome, yes let me know :slight_smile:

OK so I finally got around to checking the stuff (I also deleted the free tier API keys and got new ones) but it still did not make a difference.

I did some more cleaning. I discovered that I did not import the createweatherHTML. But none of that seemed to make any difference. No matter what city I put in it does not show anything in the box beneath it.

Here is my code (API keys/secret removed.

const {createVenueHTML, createWeatherHTML} = require('./helpers.js'); // 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=20200401'; try { const response = await fetch(urlToFetch); if (response.ok) { const jsonResponse = await response.json(); const venues = jsonResponse.response.groups[0].items.map(item => item.venue); console.log(venues); return venues; } } catch(error){ console.log(error); } } const getForecast = async () => { 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 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 = (day) => { // Add your code here: let weatherContent = createWeatherHTML(day); $weatherDiv.append(weatherContent); } const executeSearch = () => { $venueDivs.forEach(venue => venue.empty()); $weatherDiv.empty(); $destination.empty(); $container.css("visibility", "visible"); getForecast().then(forecast => renderForecast(forecast)); getVenues().then(venues => renderVenues(venues)); getForecast() return false; } $submit.click(executeSearch)

I did not import the createweatherHTML.

You shouldn’t.

Try opening the console tab of devtools in the project browser and see what errors you get. In the meanwhile I’ll check your code. :wink:

Edit:
@salimfarhat Why do you have an extra getForecast() at line 135?

If you delete that, then your code is perfect (excluding the import thing you did at the top, you got to delete that too).

Let me know!

It works! The line 135 just needed removing.

I realize that I had some difficulty in writing some of the lines of code, like coming up with the URL strings to combine (concatinate?), but I figure once I am more familiar with that syntax it should be as simple as the other stuff.

I had to do a lot of copy-over to make sure I didn’t make a mistake, but it works! I’ll get to seeing the stuff you provided on doing the extras to learn now. It was quite an adventure doing this!

I first did the Javascript course back in 2016 and it sure has changed. The 2016 course was a zygote compared to all the stuff they added to it now. I had no idea WHAT Javascript was capable of before. Now I just need to do projects with this and python and Java. I think they’re the last step I need before becoming employable with the skills and finally land my dream job.

1 Like

Great!

Concatenate, but I am not a native English speaker so don’t trust me! xD
I’d advise to install a multi-language dictionary in your browser (from settings/languages in all chromium based browser applications) and set the spell check and correction with a right click:
image

but I figure once I am more familiar with that syntax it should be as simple as the other stuff.

In this exercise specifically there was a net usage of JQuery which I think was not clever in a JS course, as it is an external library that is dying since several years.

I first did the Javascript course back in 2016 and it sure has changed.

Here on Codeacademy? I don’t remember there was that. But I may remember wrong. I did the Ruby on Rails course, thinking that together with HTML and CSS was enough, so fun (ironic) when I realised that JS would have been a thousand times better choice. :man_shrugging:

Now I just need to do projects with this and python and Java. I think they’re the last step I need before becoming employable with the skills and finally land my dream job.

I honestly wish you a lot of luck for it! I’m sure that you can do it if you hardwork for it, I’d advise to follow any of the Career Paths course available here on Codeacademy as there are some interesting JS projects that in this course are not present.

Also, I’d advise to check out the API’s for Web Animations (WAAPI) and DOM on MDN website as they’re truly useful in webdev :wink:

Cheers,