sob7i / hyf-javascript3 Goto Github PK

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

I'm not sure whether you actually read my feedback (in an ISSUE) that I gave you for week 1, because I don't see much of it being followed up in week 2. For instance, points 3, 4 and 6 of that feedback are not followed-up. Please do so for week 3.

1. You have embedded function theListener() inside function renderData(), which itself is embedded in function main():

function main() {
  // ...
  function renderData(data) {
    // ...
    function theListener(event) {
      // ...
    }
  }
}

There is no valid reason for doing it this way, and therefore it should not be done. Just put them all at the 'global' level, like this:

function main() {
  // ...
}

function renderData(data) {
  // ...
}

function theListener(event) {
  // ...
}

2. I see lots of ESLint warnings (green underlines) in your scripts.js file, for instance about unused variables. Please resolve those issues.

3. Looking at this code snippet from your function main() (notice that I removed some unnecessary and meaningless blank lines):

fetchJSON(motherUrl)
  .then(data => {
    renderData(data);
  })
  .catch(error => {
    console.error(error.message);
  });

In the .then() method you are passing an arrow function as its argument. This arrow function takes the data returned by fetchJSON() and then calls renderData() with that same data. You can therefore rewrite the code like this:

fetchJSON(motherUrl)
  .then(renderData)
  .catch(error => {
    console.error(error.message);
  });

4. You did not implement rendering network errors to the HTML page rather than writing them to the console, as I asked in this slack message.

5. Pay attention to how you name variables. Avoid words like data if you know the variable to contain a specific type of data. For instance, if you know that the data is about 'contributors', name your variable contributors and not data. Always choose the most descriptive name possible. The computer doesn't mind, but we, fellow humans reading your code do mind.

6. I mentioned the use of blank lines. Don't add blank lines without thinking wether they add to the readability of your code. Use blank lines as if you were writing a piece of text. You would only use blank lines to separate paragraphs. Imagine reading a book where blank lines are inserted randomly. It wouldn't be a nice read.

If you want to have a look how I use blank lines, check out the example Nobel Prize app code here.

Bottom line: code is working, promises are implemented but there are outstanding issues from week 1 that need to be taken care of.

Hi Sobhi, here is my feedback on your week 1 homework.

1. When I first loaded your index.html in Chrome the screen went almost totally black and I couldn't see my mouse pointer any more. So the first thing I did is to comment out the line background-color: #04031a; in your style.css and try again. Now at least I could see my mouse pointer and the <select> element.

2. I always open up the Chrome Developer Tools when I review homework and I saw a number of error messages there. I think you got the startup code a bit mixed up. Just remember that all JavaScript code that does not sit inside a function definition is immediately executed. This holds true for the call you make to fetchJSON() in line 92. It is best to locate all your startup code in your function main(). To recap what function main() should do:

• Set up all fixed HTML elements, including and empty <select> element.
• Add an event listener for the 'change' event to the <select> element.
• Fetch repository information by using fetchJSON() and adding <option> elements to the <select> statement when the response from GitHub comes back.

It is easier to oversee what is happening when you use anonymous callbacks for fetchJSON() directly where you call it. This would make your function main() look like this:

function main() {

    const root = document.getElementById('root');
    const h1 = createAndAppend('h1', root, { html: 'HYF Repositories:' });
    const header = createAndAppend('div', root);
    const select = createAndAppend('select', header, { placeholder: 'Select a repository' });
    select.addEventListener("change", theListener);

    const repContainer = createAndAppend('div', root);
    repContainer.id = 'rep-container';
    const contContainer = createAndAppend('div', root);
    contContainer.id = 'cont-container';

    fetchJSON(url, function (error, data) {
        if (error !== null) {
            console.error(error.message);
        } else {
            data.forEach(repository => {
                createAndAppend('option', select, { value: repository.name, html: repository.name });
            });
        }
    });
}

So what you currently have in lines 82-92 goes inside function main(). This function needs to be executed at startup, so that is the one that you need to specify in window.onload:

window.onload = main;

2. Your function theListener() should now only be called when the user changes the selection in the <select> element. Placing the callback functions again directly as a parameter in the corresponding fetchJSON() calls again improves readability. It reduces the need to look crisscross your code to find out who is calling whom.

function theListener(event) {
    const urlContributors = 'https://api.github.com/repos/HackYourFuture/' + event.target.value + '/contributors';
    const urlRepositories = 'https://api.github.com/repos/HackYourFuture/' + event.target.value;

    fetchJSON(urlContributors, function (error, contData) {
        if (error !== null) {
            console.error(error.message);
        } else {
            renderCont(contData);
        }
    });

    fetchJSON(urlRepositories, function (error, repData) {
        if (error !== null) {
            console.error(error.message);
        } else {
            renderRep(repData);
        }
    });
}

3. In the assignment it was indicated that you should use the contributors_url property that your get back in the repository information from GitHub. If you follow up, your theListener() function should have the second fetchJSON() nested in the callback of the first one, like this:

function theListener(event) {
    const urlRepositories = 'https://api.github.com/repos/HackYourFuture/' + event.target.value;

    fetchJSON(urlRepositories, function (error, repData) {
        if (error !== null) {
            console.error(error.message);
        } else {
            fetchJSON(repData.contributors_url, function (error, contData) {
                if (error !== null) {
                    console.error(error.message);
                } else {
                    renderRep(repData);
                    renderCont(contData);
                }
            });
        }
    });
}

4. When you name your variables, functions and arguments you should use names that do not require guessing from the people reading your code. renderCont probably means render contributors, so why not name is renderContributors. Only a few more characters to type, and no guessing needed. Using renderRepo (but not renderRep) is probably OK because most developers will understand that repo means "repository". I would rename the theListener() function to something like onSelectChanged().

5. Please ensure that your repo includes a .eslintrc.json file so that ESLint can do its work and check your code for possible issues. You can find the recommended content in the fundamental on Code Formatting. If you have such a file already in your working directory, be sure to add it to your Git repo.

6. There are a number of unused variables in your code that ESLint would detect. You should avoid unused variables because they are confusing. For instance, in your function renderRepo():

function renderRepo(repoData) {
    const repoContainer = document.getElementById('rep-container');
    repoContainer.innerHTML = '';

    const list = createAndAppend('div', repoContainer, { id: 'list-container' });
    const ul = createAndAppend('ul', list, { html: '<strong> Repository information: </strong>' });
    const li1 = createAndAppend('li', ul, { html: 'Repository:' + " " + repoData.name });
    const li2 = createAndAppend('li', ul, { html: 'Fork:' + " " + repoData.forks_count });
    const li3 = createAndAppend('li', ul, { html: 'Updated:' + " " + repoData.updated_at });
}

the variables li1, li2 and 'li3 are unused. You can/should remove them.

function renderRepo(repoData) {
    const repoContainer = document.getElementById('rep-container');
    repoContainer.innerHTML = '';

    const list = createAndAppend('div', repoContainer, { id: 'list-container' });
    const ul = createAndAppend('ul', list, { html: '<strong> Repository information: </strong>' });
    createAndAppend('li', ul, { html: 'Repository:' + " " + repoData.name });
    createAndAppend('li', ul, { html: 'Fork:' + " " + repoData.forks_count });
    createAndAppend('li', ul, { html: 'Updated:' + " " + repoData.updated_at });
}

7. Your css styling has room for improvement. For instance, the avatars are too large, and the UI is not responsive. But you can improve this in your week 2 & 3 versions.

There are some other comments I could make on details but I'll wait for week 2 / 3 to mention them.

Bottom line: the main issues were startup and code organization. With some relatively minor changes it could be made to work fully. So not bad, considering the complexity of this homework, compared to previous weeks.

Hi Sobhi, here is my feedback on your homework for week 3.

Your homework as submitted does not work. Your JavaScript file is named app.js but your index.html file tries to load script.js, and fails. How can it be that you did not notice this?

If I correct this mistake and load your index.html in the browser it loads OK and seems to run OK. However, while it is somewhat responsive, the layout is completely off when I view on a mobile phone screen size (see image).

1. You didn't implement ES6 classes, for now that is OK. It will be covered again in the React module, which is still some time away.

2. You did not sort the list repos displayed in the select box as was asked in Step 4 of the homework.

3. On line 168 of app.js you have a line window.onload = ReposSelect;. As you should be able to see, this line is green underlined by ESLint. If I hover my mouse over it, I get the message 'Unreachable code.' This means that that code will never be executed. Any code following a return statement is unreachable. I assume you intended this code to be outside of the fetchJSON() function body.

4. You have moved the fetchJSON() call, now in line 5, outside of your function main(), possibly because the problem that issue 1 above gave you. Furthermore, you didn't use async/await here. The function call should be moved inside the function main():

async function main() {
  const root = document.getElementById('root');
  //...
  try {
    const repos = await fetchJSON(urlAPI);
    repos.forEach(repo => {
      createAndAppend('option', select, { html: repo.name });
    });
  } catch (error) {
    root.innerHTML = 'Error:' + ' ' + error.message;
  }
}

Now, at the end of your file, you can add a statement:

window.onload = main;

5. You need to be more clear in how you name variables and parameters. For instance in line 39:

data.forEach(data => {
  //...
});

What do you mean with data? You might as well use the name stuff, that would be just as clear (not!). Express yourself clearly, for instance:

repos.forEach(repo => {
  //...
});

6. Function names should be in camelCase: ReposInfo -> reposInfo. They should also indicate 'action', therefore need a verb in the name, e.g. renderRepos. Check the naming conventions fundamental.

Bottom line: I think you should spend more time and effort to ensure that you deliver quality code. Don't start homework on a Saturday afternoon because that will not give enough time to produce something decent, nor time to ask questions. That I could not run your code because of the wrong file name is sloppy to say the least.