I am trying to finish the Wanderlust project but got stuck on the first steps. Could anyone tell me how to get the client ID and the client secret of Foursquare API and the key of APIXU? It seems that I must have a URL (for the APP I am supposed to develop) in order to apply for a client ID and a client secret?
could you provide a link?
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
Could somebody have a glance pls on this issue iâve got doing Wanderlust.
[https://gist.github.com/f58424b12ae9adb33761bf481c604017]
Thanks.
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.
yes it is true, i mistyped it, it is ok now with âsecureâ http, but now there occured another error in console like â400â!
I found it, there was a mistake in r.44 instead of method $input.val() i put there city.
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]
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!
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;
}
Hi, thanks a lot. Appreciate!
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.
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?
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!
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. ???
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âŚ
yes, that is. Sorry it is above the âWEATHERâ, not under it.
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.
Oh great! It is strange behaviour indeed. I will try to play with it too. Thanks. Have a nice rest of the day!
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.