Wanderlust photo retrieval rendering

Link: https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust

I’ve completed the wanderlust challenge…but there is something I really would like to do. On the photo retrieval challenge (43), I am able to call the photo’s to the console, but I cannot seem to get the images to render on the wanderlust webpage…I’m starting to think it is a CSS problem that I haven’t figured out yet. Any ideas? My Main.js code and helper code are below. See the link for the CSS.
So far I’ve edited the helper.js, but It doesn’t seem to do anything. I’ve tried disabling the original venue fuction in the helper.js and replace one just leave my version active, but nothing renders at all. I’m a bit confuzzled. See my code below, minus the keys

the Main.js code:


// Foursquare API Info
const url = 'https://api.foursquare.com/v2/venues/explore?near=';
const photosUrl = 'https://api.foursquare.com/v2/venues/';
//photos request -> 'https://api.foursquare.com/v2/venues/VENUE_ID/photos?'


// APIXU Info

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4"),$("#venue5")];
const $weatherDivs = [$("#weather1"), $("#weather2"), $("#weather3"), $("#weather4")];
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:
 const getVenues = async () => {
   const limit = 'limit=10';
   const city = $input.val();
   const urlToFetch = `${url}${city}&${limit}&client_id=${clientId}&client_secret=${clientSecret}&v=20190203`;
  try{
    const response = await fetch(urlToFetch);
    if (response.ok){
     
      console.log(response);
      const jsonResponse = await response.json();
      const venues = jsonResponse.response.groups[0].items.map(item=>item.venue);
      //const venue
                     
      console.log('------Venues----------')
      return venues
      console.log('------Venues----------')
    }
    else {
      throw new Error('Request Failed!');
    }
  
  } catch(error){
    console.log(error.message)
  }
};





//Shuffle Venues
      let shuffle =(venueslist)=> {
      //method called shuffle for the venue array. The method returns a randomly sorted array of all the venue objects.
    let value = venueslist.length;
    //while venue is not empty
    while (value > 0){
      //pick random venue
    let order = Math.floor(Math.random()*value);
    //reduce venue list
    value--;
    
    //swap last element
     let temp = venueslist[value];
        venueslist[value] = venueslist[order];
        venueslist[order] = temp;
    }
    return venueslist
  }
      //End
 

const getForecast = async () => {
  
  const foreLocation = $input.val();
  const urlToFetch = `${forecastUrl}${apiKey}&q=${foreLocation}&days=4&hour=11`;
try{
  const response = await fetch(urlToFetch);
  if(response.ok){
    const jsonResponse = await response.json();
    const days = jsonResponse.forecast.forecastday;
    //const sunRiseSet = jsonResponse.forecast.forecastday.astro;
    console.log('-------getforecastjsonResponse---------')
    console.log(jsonResponse)
    console.log('---------getforecastjsonResponse-------')
    
    return days;
    //console.log(days)
  }
  else
  {throw new Error('Request Failed!')}
}catch(error){
  console.log(error.message)
}
}


//Get Venue photos
const getVenuePhotos = async (venueID)=>{
  //const venueID = venue.id;
  const UrlSuffix = '/photos?'
  const urlToFetch = `${photosUrl}${venueID}${UrlSuffix}&limit=1&client_id=${clientId}&client_secret=${clientSecret}&v=20190203`;
  try{
    const response = await fetch(urlToFetch)
    if(response.ok)
      {const jsonResponse = await response.json();
    const newURLtext = response;
    const photoSize = '100x100'
    const photoPrefix = jsonResponse.response.photos.items[0].prefix;
    const photoSuffix = jsonResponse.response.photos.items[0].suffix;
    const venuePhotoSrc =`${photoPrefix}${photoSize}${photoSuffix}`;
    let photos = createVenuePhotoHTML();   
       console.log('get photos response');
       console.log(response);
       console.log('get photos response');
       //console.log(photoPrefix);
       //console.log(photoSuffix);
       console.log(venuePhotoSrc);
       console.log('---------RenderPhotoSourceResponse-------')
                   return venuePhotoSrc;
       
       
      }
  }catch(error){
    console.log(error.message)
  }
};


// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
//add your code here
    const venue = venues[index];
    const venueID = venue.id;//for photos
    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);
  //Test response - console
    console.log(venueID);
    
    
    let addVenuePhoto = createVenuePhotoHTML(getVenuePhotos(venueID));
    $venue.append(addVenuePhoto);
    
    
    
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);}


const renderForecast = (days) => {
  $weatherDivs.forEach(($day, index) => {
    // Add your code here:
    const currentDay = days[index];
    
    let weatherContent = createWeatherHTML(currentDay);
    $day.append(weatherContent);
  });
  
}



const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDivs.forEach(day => day.empty());
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues().then(venues=>renderVenues(shuffle(venues)));
  getForecast().then(forecast=>renderForecast(forecast));
  return false;
}

$submit.click(executeSearch)

See the helper.js code below:

const createVenueHTML = (name, location, iconSource) => {
  //add 'photoSource' to input
  return `<h2>${name}</h2>
  <img class="venueimage" src="${iconSource}"/>
  <h3>Address:</h3>
  <p>${location.address}</p>
  <p>${location.city}</p>
  <p>${location.country}</p>
`;
}
  


   
  const createVenuePhotoHTML = (photoSource) => {
   return
//changed class name to venuephoto instead of venue image
    `<h3>Photo:</h3>
     <img class="venuephoto" src="${photoSource}"/>
		 <p>${photoSource}</p>
`;
}


const createWeatherHTML = (currentDay) => {
  return `<h2> High: ${currentDay.day.maxtemp_f}</h2>
    <h2> Low: ${currentDay.day.mintemp_f}</h2>
		<h2> Sunrise: ${currentDay.astro.sunrise}</h2>
		<h2> Sunset: ${currentDay.astro.sunset}</h2>
    <img src="https://${currentDay.day.condition.icon}" class="weathericon" />
    <h2>${weekDays[(new Date(currentDay.date)).getDay()]}</h2>`;
}
1 Like

Im not a pro but maybe it has something to do with you using only const and not let because let will let you change it but const is one time set.

1 Like

I don’t have time to code today, but I’ll give that a try this weekend

1 Like