Wanderlust Issue

Does anyone know why the Wanderlust project only displays three attractions instead of the intended four? I didn’t even realize the code was intended to grab four until part 39 mentioned to adjust the code to grab more than four venues. The $venueDivs by default have four, and even adding an additional one does nothing, the project only displays three venues. Either I screwed up something in the code (posted below) or there’s an error on Codecademy’s part.

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

// OpenWeather Info
const openWeatherKey = '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"), $("#venue5")];
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=5&client_id=${clientId}&client_secret=${clientSecret}&v=20210615`
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      console.log(response);
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      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}`;
    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");
  getVenues().then(venues => renderVenues(venues));
  getForecast().then(forecast => renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)

Screen cap for reference to what I see:

1 Like

I would also like to know the answer to this

I am still in the middle of this one myself but I stumbled upon your question and I assume that it has something to do with the html file only having 3 div elements to display attractions. Maybe adding more would display more attractions?

Hi @ambahjones - I also faced this issue but resolved it like you mention above by adding additional HTML element within the #venues section

<section id="venues">
        <div class="venue" id="venue1"></div>
        <div class="venue" id="venue2"></div>
        <div class="venue" id="venue3"></div>
        <div class="venue" id="venue4"></div>
        <div class="venue" id="venue5"></div>
        <div class="venue" id="venue6"></div>
      </section>