Week2

[eugeneFr9]

Finished the application, week2

[remarcmij]

Hi Andrew Evgenii, while there are some issues you need to look at I think you did a good job here.

Unfortunately you did not completely follow the homework instruction and create your homework in the /homework folder. As a consequence your code was not checked by ESLint.

Please address the comments in your week 3 homework.

[remarcmij]

From your indentation I suspect that you intended to create a block scope here to prevent your function from polluting the global scope. However, to do so, you must use curly braces, i.e.:

'use strict';
{
  const URL_Rep = ...
  //...

[remarcmij]

Because you created your homework in a different folder than was specified in the homework assignment, your code is not checked by ESLint (you are missing an .eslintrc file in the Week1 folder where you placed your homework). These are the warnings and errors that ESLint produced:

/Users/jimcramer/hackyourfuture/class16/genegr88/Week1/github.js
   4:9   warning  Identifier 'URL_Rep' is not in camel case                    camelcase
   6:9   warning  'dateOfRepository' is never reassigned. Use 'const' instead  prefer-const
  13:90  warning  Missing semicolon                                            semi
  59:9   warning  Missing semicolon                                            semi
  69:94  warning  Missing semicolon                                            semi
  72:14  warning  'err' is defined but never used                              no-unused-vars
  73:31  warning  'error' is not defined                                       no-undef
  86:72  warning  Missing semicolon                                            semi
  87:89  warning  Missing semicolon                                            semi
  91:70  warning  Missing semicolon                                            semi
  92:9   warning  Missing semicolon                                            semi
  95:2   error    Newline required at end of file but not found                eol-last

✖ 12 problems (1 error, 11 warnings)

[remarcmij]

The preceding two blank lines are meaningless and should be removed.

Add a single blank line between function definitions.

[remarcmij]

Use dot notation to access object properties if you know the property name beforehand:

const contributorsURL = repository.contributors_url;

This gives IDE's such as VSCode and linters such ESLint a better chance to analyze your code.

Use square brackets only if the property name is "computed", e.g.

const fullName = `${firstName} ${lastName}`;
const person = people[fullName];

[remarcmij]

You have a mix of single and double quotes for string delimiters. Choose one and then use it consistently throughout your code.

[remarcmij]

The .catch() should be at the end of the promise chain. Currently your error handling does not work correctly because the .catch() method returns a new promise that resolves to undefined (because you are not returning anything in the function body of your catch handler). Next, you chain a .then on that new promise which expects a contributors array but instead gets undefined. While it might look okay in the UI, the code is wrong.

[remarcmij]

1. The .catch() should be at the end of the promise chain.
2. The argument is called err but you are trying to access error.

I assume you haven't actually tried to force an error as the assignment asked, otherwise you would have caught this error.

[remarcmij]

Below is the HTML that your code generates for the contributors table. If you look at the documentation for tbody you will find that the only children allowed at tr elements.

<table id="contributorsTable">
  <tbody id="contributorsTbody">
    <a href="https://github.com/gijscor" target="_blank" class="contributorsLink">
      <tr id="15912395" class="contributorsTr">
        <td id="gijscorTd" class="inform-contrib">
          <img src="https://avatars0.githubusercontent.com/u/15912395?v=4" alt="picture of gijscor" class="contributor-images">
        </td>
        <td class="inform-contrib contributor-name">gijscor</td>
        <td class="inform-contrib contributor-number">12</td>
      </tr>
    </a>
    <a href="https://github.com/wouterkleijn" target="_blank" class="contributorsLink">
      <tr id="37488847" class="contributorsTr">
        <td id="wouterkleijnTd" class="inform-contrib">
          <img src="https://avatars1.githubusercontent.com/u/37488847?v=4" alt="picture of wouterkleijn" class="contributor-images">
        </td>
        <td class="inform-contrib contributor-name">wouterkleijn</td>
        <td class="inform-contrib contributor-number">4</td>
      </tr>
    </a>
  </tbody>
</table>

[remarcmij]

You will notice that there is a slight delay between showing the repo info and the contributors info. Time-wise it looks like this.

[show repo][clear contributors container][fetch contributors].......[show contributors]

You can improve on the user experience by postponing the (re-)rendering until the contributor data has been returned:

[fetch contributors].......[clear contributors container][render contributors][show repo]

Now, while the contributors are being fetched the screen remains unchanged.

To achieve this in your code, swap the two lines as follows:

renderContributors(containerForContributors, repositories[event.target.value]);
renderRepository(container, repositories[event.target.value]);

Then, in your renderContributors() function, postpone clearing out the containerForContributors until after you have received the response from the network:

function renderContributors(containerForContributors, repository) {
  const contributorsURL = repository['contributors_url'];
  createAndAppend('p', containerForContributors, { text: 'Contributions' });
  fetchJSON(contributorsURL)
    .then(contributors => {
      containerForContributors.innerHTML = "";
     //...