Wanderlust project

Thanks!

This is the link to the Wanderlust project:
https://www.codecademy.com/paths/web-development/tracks/webdev-intermediate-javascript/modules/intermediate-javascript-requests/projects/wanderlust

This is the link of Foursquare API, where I am requested to input a URL:
https://foursquare.com/developers/register

1 Like

Could somebody have a glance pls on this issue i’ve got doing Wanderlust.

Untitled

[https://gist.github.com/f58424b12ae9adb33761bf481c604017]

Thanks.

1 Like

In your code, I don’t see where you assign the variables: url or forecastUrl. From the first error shown in your screenshot, it looks like perhaps you used http:// instead of https:// when you assigned the value to the forecastUrl variable.

2 Likes

yes it is true, i mistyped it, it is ok now with “secure” http, but now there occured another error in console like ‘400’!

2 Likes

I found it, there was a mistake in r.44 instead of method $input.val() i put there city.

2 Likes

Hi there,
it’s might be a trite question, however, in which section of the Wanderlust code updating for more venues and randomizing option to show of last should be done? In the AJAX async fetch request itself or in the Rendering function section? I do not catch a logic. Thank you for response.

Doesn’t work.
[https://gist.github.com/bb95254e6bbc0f1e807efe2609903362]

3 Likes

Where you located your randomizing code is fine, and it does what is expected. It doesn’t do what you intended, but it just needs tweaking. You are returning 10 venues from Foursquare, but you are only using the first 5:

let randomIndex = Math.floor(Math.random() * 5);  //change 5 to 10 to include all results

This logic still won’t act quite right because it’s possible that Math.random could give you the same randomIndex multiple times. I ran your code, and got one of the venues twice. You’ll need to include logic to select 4 unique randomIndex's.
Good Luck! && Happy Coding!

3 Likes

I hadn’t added the random functionality to my project until now. The way I did it was to write a separate function to create an array of unique random numbers to use as the index for the venues array. My code:
(SPOILER ALERT!!)

const renderVenues = (venues) => {
  const randomIndex = generateRandomResults(venues.length);
  $venueDivs.forEach(($venue, index) => {
    const venue = venues[randomIndex[index]];
    const venueIcon = venue.categories[0].icon;
    const venueImgSrc = `"${venueIcon.prefix}bg_64${venueIcon.suffix}"`;
    let venueContent = `<h2>${venue.name}</h2>
<img class="venueimage" src=${venueImgSrc}/>
<h3>Address:</h3>
<p>${venue.location.address}</p>
<p>${venue.location.city}</p>
<p>${venue.location.country}</p>`;
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const generateRandomResults = numResults => {
  const randomIndexArray = [];
  arrayLength = numResults < 4 ? numResults : 4; // small towns may not have 4 venues
  while(randomIndexArray.length < arrayLength) { 
    const randomNumber = Math.floor(Math.random() * numResults);
    if (!randomIndexArray.includes(randomNumber)) {
      randomIndexArray.push(randomNumber);
    }
  }
  return randomIndexArray;
}
1 Like

Hi, thanks a lot. Appreciate!

2 Likes

Hi, it is a nice piece of code describes right and understandable logic, perfectly targeted to the aim deploying all neccessary basic knowledge we have learned so far. Nonetheless it is a quite grieve thing that the idea to write these technological steps would never come to my mind at that moment even in its imperfect form, eventhough, as it said, it is a passed learning fundamental materials for me. The impuls to start of generating processes doesn’t work. Anyway, I appreciate it as an impetus for a further struggle.

2 Likes

Why there in your code you added signs of html while instructions of project have also but not in everywhere you’ve done it? Should we write this code in conjunction with html?

1 Like

Task 31:
“Now construct the HTML string to add the new venue. You can use your knowledge of the venue object shape and this HTML template or follow the steps below. Open the hint for more information about implementing from the HTML template.”

I chose to construct the HTML string rather than following the steps to use the provided createVenueHTML located in the helpers.js file.

Don’t get discouraged. There are many ways this randomizing could be accomplished. Frequently when I look back at code I’ve written, I wonder why in the world I did it that way. As we acquire new knowledge, we can almost always improve on things we’ve done in the past. I’m new to JavaScript, but I’ve been writing code in other languages for many years. As you gain knowledge and experience, things will come to mind that you wouldn’t have thought possible before. Seeing how someone else has accomplished a task frequently gives me ideas to improve my own code. Keep at it! Happy Coding!

1 Like

Thanks for support. It is left nothing for me, at this moment, than to copy your code trying to apply it. Though lots of miscelaneous typos have been made, even while applying (copying) not own snippets, what is quite distracting from focusing on logic itself.

As it is always, when you fixed allegedly last mistakes, you can be sure that there are always minimum three others hidden left :)) . Under the header ‘WEATHER’ the name of the city is missing. It is probably because of ‘categories’ is undefined. ???

[https://gist.github.com/f57d3c676295d8fff39e831e80353602]

1 Like


Is this what you’re referring to? I substituted your renderVenues function for mine, and got the desired result shown.

UPDATE
Just ran your entire code, and the city name is missing. Working on it…

1 Like

yes, that is. Sorry it is above the ‘WEATHER’, not under it.

1 Like

Well, I found a fix, but honestly I am at a loss to explain why it makes any difference. It does work though.

 const renderVenues = (venues) => {
  $destination.append(`<h2>${venues[0].location.city}</h2>`); //moving this line to here from the end of the function made it work
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:

I have it at the end of my function, and it works, but for some as of yet inexplicable reason, it only works with your code at the beginning of the function. :man_shrugging:

1 Like

Oh great! It is strange behaviour indeed. I will try to play with it too. Thanks. Have a nice rest of the day!

1 Like

My best guess is that it has to do with the async functions messing with the expected order of execution of the statements in the code.

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

I would bet that since getForecast() is an asynchronous function that when it finishes the return satement is executed, and that is happening before the: destination.append(`<h2>{venues[0].location.city}`); statement gets executed.

1 Like

Hi, tell me please if it is appropriately to apply the following sample of logic, to solve such an instance, like it is reflecting the answers for the next patern of questions ‘what we have?’ ‘what it does?’ and ‘when it does?’? Thank you.

1 Like

Sorry. I’m not quite sure what you’re asking. If you’re asking whether it’s appropriate to ask the questions you listed to determine if our code has met the requirements specified, then I would say, yes. Those are very good questions to ask. Again, my apologies if I am misunderstanding your question.

1 Like