Wanderlust - current weather

Hello!
I finally finished coding the wanderlust project.
It was a really hard project!!! :tired_face:
I can see the 3 top attractions but the current weather doesn’t work :frowning:
I also compared mine with the code of the live version of the project.

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

// OpenWeather Info
const openWeatherKey = '587951f13990c0b066f8b917134057f6';
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=20200903`;

  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}`;
    console.log(venueIcon);

    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:
$weatherDivs.forEach(($day, index) => {
  const currentDay = day[index];
	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)

This is my code and I hope someone can help me to see the current weather!
Thanks :smiley:

Where have you defined a variable called weatherDivs? You’re attempting to iterate over it with the .foreach() iterator, but it doesn’t exist…

I wonder if you’ve simply copied the code / approach from the handling of the venues, which is not quite the same as the weather…

1 Like

It’s working well now!!
It didn’t work at first so I’d tried a few ways to figure it out.
I just had to follow the instructions.
Thanks for your help!! :smiley:

1 Like