Wanderlust Project Help - Desperate

Get Help
#1

Hi, I am trying to work through the Wanderlust project and I think I have finished the code. However at some point everything stops working and nothing is displayed when you type in a city. I have gone over the code so many times that I just need someone else to take a look and tell me what’s wrong. I can’t seem to find anything wrong with the code.

The console says Uncaught SyntaxError: Unexpected token ‘catch’

I removed the catch from the block and tried running it again and it told me the catch was missing.

Here is a link to the exercise and my full code.
Please help me figure this out, I have been trying for days and it’s making me really doubt that I can even do this anymore.

https://www.codecademy.com/paths/web-development/tracks/webdev-intermediate-javascript/modules/intermediate-javascript-requests/projects/wanderlust

// Foursquare API Info
const clientId = '**ClientID Removed**';
const clientSecret = '**ClientSecret Removed**';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = '**Weather Key Removed**';
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=20210901"`;
  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) => {
    // Add your code here:
const venue = venues[index];
const venueIcon = venue.categories[0].icon;
const venueImgSrc = `"${venueIcon.prefix}bg_64${venueIcon.suffix}"`;
const 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");
  getVenues().then (venues => renderVenues(venues));
  getForecast().then (forecast => renderForecast(forecast));
  return false;
};

$submit.click(executeSearch);

Thank you for any feedback, I just want to learn.

#2

Hi,

You have two try/catch statements in your code. Which one does the error point to?

In either case, an unexpected token error means that the token or keyword that appears was not expected by the compiler. This means that something that preceded is unfinished in syntax (because it expects some sort of closing token).

You could just try to eyeball it or methodically use commenting out strategy on the code right before the catch to check the offending line.

#3

Thanks for the help, it does seem to be running now…sort of. The error code now says:

DevTools failed to load source map: Could not load content for https://www.codecademy.com/webpack/platform~253ae210.fbb0ea9c12af49dcf971.chunk.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

The functions seem to run but nothing gets displayed, just a blank white box. Any idea why that would be? It must be something with the render functions but I don’t see any problems here

#4

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.