Wanderlust

Get Help JavaScript
,
#1

When I run the javascript for the Wanderlust project on my Google browser, this is what I get:

  1. init {context: document, selector: “#button”}

  2. context: document

  3. selector: “#button”

  4. proto: Object(0)

Not sure what I am doing wrong.

This is the code:
// Foursquare API Info
const clientId = ‘NNNBT33ZMEPTZTIWVPDYAMTOGUUVLW14HG55CJQOPXC4WXNJH’;
const clientSecret = ‘I0ZZADFJ3CEOKCSDRHF1MXFBJGLABVLF0VGI3SXFVF32ZQPSL’;
const url = ‘https://api.foursquare.com/v2/venues/explore?near=’;

// OpenWeather Info
const openWeatherKey = ‘d007c620016fdaf9c592b6dc6c2d7453’;
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’ + client_id +’&client_secret=’ + client_secret + ‘&v=20200808’;

try{
const response = await fetch(urlToFetch);
if(response.ok){
console.log(response);
const jsonResponse = await response.json();
console.log(jsonResponse);
}

} 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)

#2

Hi!

Can you repost your code pressing the </> before pasting? It’ll make it easier for people to troubleshoot.

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

// OpenWeather Info
const openWeatherKey = 'd007c620016fdaf9c592b6dc6c2d7453';
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=' + client_id +'&client_secret=' + client_secret + '&v=20200808'; 

  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);

  } 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}</h2>`);
}

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)