dianaayoub/hyf-javascript3

hyf-javascript3's Issues

Feedback final homework

Hi, @DianaAyoub I really appreciate your JS function, you have a done a very great job, well done! it is really readable and comprehensible, really good cs file.but my feedback is can you add one more function like 2 buttons and maybe it would be more comfortable.

Well done

Hi @DianaAyoub ,

I have had a look into your code, and tried running it in the browser. The code in the js file itself looks fine to me. However, I have a comment on the function informationRep, as I see several repetitions. I believe here you could have used a for loop to help you out in minimizing the code.

I have also noticed that you have used Promises here, so I wonder on whether this is the first or the second homework?

Other than that, I believe you have a done a very good job, well done!

Feedback final homework

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

As potential employer, I would probably ask you to spend a bit more effort on representing your data. But I would also probably see enough evidence to consider you for an internship, once you would have done the cleanup.

I'll now go through the individual criteria that I defined for this assignment:

1. Your code must run without errors.

   Requirements is met.

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?

   • The Information button does not look like a button. It looks similar to the input field. It is not immediately clear that you must press Information to start the query.
   • You haven't use labels to explain the data. For instance, I see two dates displayed but I can't tell what they represent. I also see a number, but also can't tell what it means.
   • You should clear out the generated HTML elements when you do a new request, otherwise they get intermingled with what was already there from a previous request.

3. Your code must be well-formatted.

   Requirement is met.

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.

   • The variable Elements in line 61 should start with a lowercase letter.
   • I would rename the function informationRep to onClick.

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 four blank lines before the function informationRep. You should separate functions with one (or at most two) blank lines. Inside a function you should not use more than one blank line to separate code blocks.

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 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.

I have refactored your code to make it a bit more readable. I have also introduced an (enhanced) createAndAppend function that we used in class to follow the DRY (Don't Repeat Yourself) principle. As you can see, this can dramatically reduce your code size.

'use strict';
{
  function start() {
    const input = document.getElementById("search1");
    const repoContainer = document.getElementById("container");
    const contributorContainer = document.getElementById("container1");
    document
      .getElementById("search")
      .addEventListener("click", () => onClick(repoContainer, contributorContainer, input.value));
  }

  function onClick(repoContainer, contributorContainer, repoName) {
    repoContainer.innerHTML = "";
    contributorContainer.innerHTML = "";
    const url = "https://api.github.com/repos/HackYourFuture/" + repoName;

    fetchJSON(url)
      .then(repo => {
        createAndAppend("img", repoContainer, null, {
          src: repo.owner.avatar_url
        });
        createAndAppend("h1", repoContainer, `Repository Name: ${repo.name}`);
        createAndAppend("h3", repoContainer, `Owner: ${repo.owner.login}`);
        createAndAppend("p", repoContainer, `Description: ${repo.description}`);
        createAndAppend("p", repoContainer, `Created At: ${new Date(repo.created_at).toLocaleDateString()}`);
        createAndAppend("p", repoContainer, `Updated At: ${new Date(repo.updated_at).toLocaleDateString()}`);
        createAndAppend("p", repoContainer, `Number of Forks: ${repo.forks_count}`);
        createAndAppend("a", repoContainer, "Go to Repository", {
          href: repo.html_url,
          target: '_blank',
          style: 'display: block; margin: 1rem;'
        });
        return fetchJSON(repo.contributors_url)
      })
      .then(contributors => {
        contributors.forEach(contributor => {
          createAndAppend("img", contributorContainer, null, {
            src: contributor.avatar_url
          });
          createAndAppend("a", contributorContainer, contributor.login, {
            href: contributor.html_url,
            target: '_blank',
            style: 'display: block; margin: 1rem;'
          });
        });
      })
      .catch(error => alert(error.message));
  }

  function createAndAppend(name, parent, innerHTML, attributes) {
    attributes = attributes || {};
    const child = document.createElement(name);
    parent.appendChild(child);
    if (innerHTML != null) {
      child.innerHTML = innerHTML;
    }
    Object.keys(attributes).forEach(name => {
      child.setAttribute(name, attributes[name]);
    });
    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();
    });
  }

  start();
}