There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in #get-help.
Agree with a comment or answer? Like () to up-vote the contribution!
I wasn’t able to progress beyond step one despite my code matching everything in the solution. To circumvent that I opted to copy the code but that subsequently filled in the checks for the next two steps so I feel cheated out of this.
Hi okrashiso,
I came across the same issue as yours. Try everything I can do but still cannot pass the first step. And end up with copying the solution code. I guess it’s a bug.
I deleted the comment at the top and eventually managed to work through the content. Very frustrating as lost a lot of time on this exercise wondering what I had done wrong.
Hello mate, figured they linked both javascript files in the HTML head, so basically allowing the lastly added script to have all the declarations in the first script.
Guess this is a simple way to go around importing. but still, on a larger scale, you will be loading scripts you really don’t need into a page, so importing is still the best approach as it brings in just what is needed.
But that doesn’t make sense because the file with all the functions, helperFunctions.js, is loaded in the HTML last. Meaning main.js should have a bunch of ReferenceErrors. I don’t get how everything still works but it does lol
I don’t know much about this stuff, but I don’t see why main.js should have Reference Errors.
Looking at the index.html file (via the folder icon), the scripts are placed at the bottom just before the closing body tag. So, the html elements in the page will be created before the scripts are executed. helperFunctions.js is indeed placed after main.js, but only the getSuggestions() function in main.js tries to access a helper function. getSuggestions is only called by the displaySuggestions function, and displaySuggestions doesn’t get triggered till the submit button is clicked. Even though main.js doesn’t know about helper functions yet, but it won’t throw a reference error until an actual call to an unknown helper function is made. But getSuggestions is an asynchronous function, so by the time a call to a helper function is made, helperFunctions.js would have loaded.
The above is just my thought process. As I said, I don’t know much about this, so I can be wrong.
I see, yeah it makes sense that it wouldn’t result in a reference error due to the event listener. I wonder if eventListeners are asynchronous themselves?
I think it is not to be taken literally. =)
We use helper’s function renderResponse in .then() callback function.
In this then() we’ve got resolved Promise from previous .then() with response.json() value. This value is not JSON, it’s any js object that can be represented by json, ei objects, arrays, string ect. and put it into renderResponse().
If we get falsey res then console.log(res.status) triggers an Error “Cannot read properties of null (reading ‘status’)”. It’s what we needed). But we’ll get another error:
helperFunctions.js:6 Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘status’)
at renderResponse (helperFunctions.js:6:21)
at main.js:27:9
Because of any exception in .then() will return rejected Promise. We don’t have appropriate .catch() handler for the rejection, we get Uncaught (in promise).
The behavior of the handler function follows a specific set of rules. If a handler function:
…
throws an error, the promise returned by then gets rejected with the thrown error as its valu.
You can test it. Add res = null;
const renderResponse = (res) => {
// Handles if res is falsey
res = null;//<<<<<<---------
if(!res){
console.log(res.status);
}
PS: or there is a typo))) if res = false or 0, we console.log → undefined.
I hope I can get a clarification . I’ve studied HTML, CSS, and Basic JS which I continued to an Advanced JS course. I can follow the instructions for this chapter’s exercises but am I supposed to understand how the whole Datamuse API program works? The whole and every detail of the sample program? I am kinda surprised that the lesson went to this from this. Please help me understand.
I don’t think you’re supposed to know the whole “how” Datamuse API program works. The extra file i.e., the helper file is only for your curiosity as to what renderResponse() could be.
I was thinking about that too. But I can’t help it I am worried that maybe someday I will bump into a similar scenario in the future or it will be asked in an interview as a test =( Furthermore, whenever I open files that aren’t supposed to be opened up, I see comments in the code from Codecademy and I will get curious and tell myself things like “Why Codecademy putting comments in this? Why are they explaining how this snippet functions?”.
This mindset will make me take longer duration to finish this course =( It feels like I will not be competent enough without tweaking things in details =(
But yeah, I will try my best not to worry too much =(
We seriously need to understand why there were no imports nor exports and it still worked. HTML-linked? We weren’t introduced to that yet, so why would they do this to us?
) below.
) to up-vote the contribution!
