emadmri / hyf-javascript3 Goto Github PK

Hi Emad, here is my feedback on your week 2 homework.

This feedback is for the 'promises' version in your week2 folder.

Your application seems to work fine, but I have lots of issues to address.

1. You have not followed up yet on my feedback with respect to dynamically creating all HTML except for the <div id="root"></div> element. Please do so for week 3.

2. Your repo is missing an .eslintrc file. Please add one as mentioned here.

3. Your code indentation is off. Are you using VSCode for all your HYF homework with the settings that we recommend? If not, please install and use VSCode as per the VSCode Tips for all your homework.

4. I get lots of ESLint warnings in your code. I suspect that you have not enabled ESLint. For instance, you make a reference to a function renderError() in main(), but you did not create that function. I guess you didn't actually try your code under an error condition as I asked in this slack message. If you open the Chrome Developer tools console (which I recommend you always do when developing) you could have seen an error message:

app.js:17 Uncaught ReferenceError: renderError is not defined
    at main (app.js:17)

5. In HYF we do not allow the use of Bootstrap for the homework. You should create your own CSS. Note that this statement won't load your CSS file:

<link rel="stylesheet" type="text/css"  href="../css/style.css" />

You cannot use .. to go to the parent of the folder containing your .html file. Browser and servers will not allow it.

6. In your function main() you create a number of variables with .getElementById() but they are rightly flagged as unused by ESLint.

function main() {
  const root = document.getElementById('root'); // <-- unused
  const selectContainer = createAndAppend('div', root) // <-- unused
  const repository = document.getElementById('repository') // <-- unused
  const description = document.getElementById('description') // <-- unused
  const fork = document.getElementById('fork ') // <-- unused
  const updated = document.getElementById('updated ') // <-- unused
  const contributions = document.getElementById('contributions') // <-- unused

  fetchJSON(url)
    .then(data => createSelect(data))
    .catch(err => renderError(err));
}

Referring to the same code snippet above, there is no need for the arrow functions (and of course, you will need to create the renderError() function):

fetchJSON(url)
  .then(createSelect)
  .catch(renderError);

7. In your function filterData() you make reference to, for instance, a variable repository:

repository.innerHTML = 'Repository:' + " "

ESLint marks this variable as undefined. If you think you defined it in function main() then you are wrong. The variables that you defined in function main() are local to that function. The fact that your code still runs is because of an obscure remnant in browser implementations that creates global variables for all id and name attributes that you use in HTML. It is a bad practice to rely on this, and in your case it is hiding a programming error.

The same issue is present in various places in your code.

8. As I mentioned in my previous feedback, please use semicolons to terminate all JavaScript statements.

9. One I forgot: I only see a subset of HYF repos. That is because you set the page_size in the URL to 30. The assignment specified that is should be set to 100. See this.

Hi Emad,

While your app seems to work, you seem to have ignored step 3 from the assignment:

3. The body of your index.html should contain a single div element like this: <div id="root"></div>.

Instead, you have hard-code the fixed HTML elements directly in index.html. Dynamically creating these elements in JavaScript is part of the assignment so that you can learn and practice this. Can you please modify this in your implementation, and I will continue the review.

Note that for week 2, the homework is to use promises.

BTW, in HYF we have standardised on using semi-colons to terminate statements.