Hi Elmira, here is my feedback on our homework.

1. Your repo is missing an .eslintrc.json file. Because of this ESLint is not checking you code. See VSCode Tips or the message I posted on slack on 6 Feb.
2. Your code formatting indicated to me that your are still missing one or more settings in VSCode user settings:

   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
   "editor.formatOnType": true,
   

   You also have redundant blank lines and commented out code in your file, which preferably should not be present in 'final' code.
3. You have specified the birth dates of the actors as a numeric expression, for instance:

   1924-4-3
   

   The result of this expression is 1917 (1924 minus 4 minus 3). Clearly this not what you intended. You can specify the dates like this: new Date('1924-4-3').
   And in your getAge() method compute the age like this:

   getAge() {
       let now = new Date();
       let age = now.getFullYear() - this.dateOfBirth.getFullYear();
       return age;
   }

4. In the assignment it was asked to get the director's name like this: director.getName(). This hints that the director was supposed to be a StaffMember object rather than just a string.

Hi Elmira, here is my feedback on your final homework.

You based your work on the code from the hyf-api repo, which by itself is a valid approach. I don't consider that copying, but pragmatic reuse of something provided as open source software.

However, your adaptation was hasty. For instance the original code uses a couple of CSS classes (e.g. list-container, white-frame) that you did not define in your style.css. Leaving those classes in the code is confusing.

You have defined classes contributors, repoImage and imgContributors in your JavaScript but I don't see these classes in your style.css.

The assignment asks for the contributors to be shown in the right column. Here you could have used CSS Flexbox to create two adjacent columns.

Finally, in your code you have two functions that do exactly the same: fetchJSON and confetchJSON. You only need one function that you can call from two places.

I have refactored your code (but not your CSS) to illustrate some of these points. See at the end of this text.

I'll now go through the criteria I have defined for this assignment.

1. Your code must run without errors.

   It runs without errors if you enter a valid HYF repository name. If not, errors are reported in the browser console.

2. Your web page must be fit-for-purpose and well-designed. Place yourself in the role of an end-user: is the web page attractive and useful, or will you quickly click away?

   As explained above, the styling leaves to be desired.

3. Your code must be well-formatted.

   Formatting is good, but there are missing semicolons in lines 1 and 30.

4. Your repo must contain an .eslintrc.json file. There should be no avoidable ESLint warnings in your code. If you can fix the warning, do so. Please be prepared to account for any remaining warnings.

   Requirement is NOT met.

5. There should be no spelling errors in variable and function names, text strings and comments. If the VSCode spelling checker flags certain words as incorrect (and sometimes that is inevitable) you should be able to explain why that is. If you are uncertain about some word, consult an English dictionary.

   Requirement is met.

6. Variable and function names must conform to these naming conventions.

   In your function renderContributers you name the parameter repo but in fact you are passing an array of contributors, therefore this parameter should be called contributors. Then, in your forEach function, the parameter should not be called item but contributor.

   Class names should start with an uppercase letter, variable names should be camelCase:

   const View = new view();
   // should be
   const view = new View();

7. Consider blank lines to convey a meaning, similar to using blank lines to separate paragraphs in a piece of written text. A blank line between function/method definitions is fine. A blank line that breaks up a piece of code that actually belongs together is wrong. Whenever you add a blank line, carefully consider whether the blank line helps or hurts readability. Keep it in only if it helps.

   There are extraneous blank lines: 35, 87, 103, 113, 120-121

8. There should be no commented out code in your final homework. (Just like you wouldn't leave crossed out text in your CV).

   Requirement is NOT met.

9. There should be no unnecessary console.log statements in your final code. These statements are fine when developing and debugging, but not in your final product (and, as per point 8 above, don't just comment them out).

   Requirement is met.

10. Review your own code as if you were an employer yourself. Would you offer yourself an internship or job when running and looking at the code?

    I'll let you be the judge of that.

'use strict';
{
  const url = 'https://api.github.com/repos/HackYourFuture/';

  class View {

    constructor() {
      this.root = document.getElementById('root');
    }

    render() {
      this.renderHeader();
      this.renderListContainer();
    }

    renderHeader() {
      createAndAppend('h1', this.root, '"HYF REPOSITORIES"');
      const div = createAndAppend('div', this.root);
      const input = createAndAppend('input', div, 'input here');
      input.setAttribute('type', 'text');
      const button = createAndAppend('button', div, 'PRESS FOR REPOS!');
      button.addEventListener('click', () => {
        this.onButtonClick(input.value);
      });
    }

    renderListContainer() {
      this.listContainer = createAndAppend('div', this.root, null);
    }

    renderRepos(repo) {
      const div = createAndAppend('div', this.listContainer, null);
      const table = createAndAppend('table', div);
      const tbody = createAndAppend('tbody', table);
      this.addRow(tbody, 'Name', repo.name);
      this.addRow(tbody, 'Description', repo.description);
      const img = createAndAppend('img', tbody);
      img.src = repo.owner.avatar_url;
    }

    renderContributors(contributors) {
      console.log(contributors);
      contributors.forEach(contributor => {
        const div = createAndAppend('div', this.listContainer);
        createAndAppend('h2', div, 'name of the contributor:  ' + contributor.login);
        const img = createAndAppend('img', div);
        img.src = contributor.avatar_url;
        const a = document.createElement('a');
        a.href = contributor.html_url;
        a.target = '_blank';
      });
    }

    addRow(tbody, label, value) {
      const row = createAndAppend('tr', tbody);
      createAndAppend('td', row, label + ':', 'label');
      createAndAppend('td', row, value);
    }

    onButtonClick(value) {
      this.listContainer.innerHTML = '';
      fetchJSON(url + value)
        .then(data => {
          if (data.message) {
            throw new Error(data.message);
          }
          this.renderRepos(data);
          return fetchJSON(data.contributors_url);
        })
        .then(data => this.renderContributors(data))
        .catch(error => {
          createAndAppend('p', this.listContainer, error.message);
        });
    }
  }

  function createAndAppend(name, parent, innerHTML, className) {
    const child = document.createElement(name);
    parent.appendChild(child);
    if (innerHTML) {
      child.innerHTML = innerHTML;
    }
    if (className) {
      child.classList.add(className);
    }
    return child;
  }

  function fetchJSON(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'json';
      xhr.onload = () => resolve(xhr.response);
      xhr.onerror = () => reject(xhr.statusText);
      xhr.send();
    });
  }

  function start() {
    const view = new View();
    view.render();
  }

  start();
}

Hi Elmira,
Your code works nicely. I would want to point two issues:
1-I see Marlon Brandon is 101 years old, same as others, it would have been great if "passed away be written instead"
2-I see you worked to view it on browser, either complete it or delete the comments.
Keep the good work.