Topics discussed this week:
• Structure for a basic SPA
• XMLHttpRequests
• API calls

Deadline Thursday

This homework is more extensive and challenging than previous homework! Please read the instructions below carefully and follow them with great attention to detail. Start this homework as soon as you can and allow time for discussion and questions (slack!).

In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week.

You are going to write a Single Page Application (SPA) that uses the GitHub API.

This application should display information about the available HYF GitHub repositories. The functionalities we would like to see in your application in the first week are as follows:

• The application should fetch repository information for the HYF GitHub account and display summary information for each repository.
• This list of repositories should be sorted alphabetically by repository name.

Figure 1 below shows an example of what your application could look like.

Figure 1. Example User Interface using Material Design principles.

You can fetch a list of HYF repositories through this API endpoint (What is an API Endpoint?):

https://api.github.com/orgs/HackYourFuture/repos?per_page=100

If you open this URL in the browser (try it!) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment.

Note the query string ?per_page=100 in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default per_page is 30). HackYourFuture has more than 30 repositories but less than 100.

The returned JSON data contains some basic information about each repository, such as name, full_name, description etc. There are also many properties that contain URLs that can be used to obtain detail information about certain aspects of the repository.

You can find detailed information about the GitHub API by means of the link listed below. However, the documentation is very extensive and not easy to digest. For this homework it is not necessary to study the GitHub API documentation. We provide the link here for completeness.

GitHub API documentation: https://developer.github.com/v3/

In this homework we will be introducing a preferred coding style and supporting tools to help you write "clean code". A number of popular JavaScript Style Guides have recently emerged of which the one developed by Airbnb has been chosen for this homework and is recommended for subsequent use during the HYF curriculum. It is documented here:

• Airbnb JavaScript Style Guide

While you do not need to read this guide in detail, it is recommended that you review sections 1-8, 12-13, 15-21 and 23. The tools installed during the project preparation step below will help you to implement these guidelines in your code. You will see error and warning messages in the VSCode editor when your code deviates from the recommended style. An additional check will be done when you submit your homework as a pull request on GitHub.

You will be working on the same application during the next three weeks. For each week you will need to create a new Git branch, as listed in the Table 1 below.

Table 1. Homework schedule

Instructions

1. Fork the JavaScript3 repository (this repository) to your own GitHub account.

2. Clone the fork to your laptop.

3. Open the newly created JavaScript3 folder from the cloned repository in VSCode.

4. Open a Terminal window in VSCode and type the following command to install Prettier and ESLint tools as required for the homework:

   npm install
   

5. Create a new branch for the week 1 homework with the following command:

   git checkout -b week1
   

The files that make up the application are located in the homework folder. It contains the following files:

Although you should only modify files in the homework folder, we recommend that you always open the JavaScript3 folder rather than directly opening the homework folder in VSCode. The JavaScript3 folder contains the actual git repository and the configuration files required by the installed tools.

Do not change or delete any files outside of the homework folder!

1. Open index.html and examine its contents (but don't modify anything). Notice that the HTML body looks like this:

   <body>
     <div id="root"></div>
     <script src="./index.js"></script>
   </body>

   The body tag contains a single div to which you will need to dynamically append HTML elements through your JavaScript code in index.js.

2. Open index.js. This file contains a starter set of code for you to expand. It contains the following three functions:

   Function	Description
   fetchJSON	Uses XMLHttpRequest to fetch JSON data from an API end point. This function uses an asynchronous callback.
   createAndAppend	A utility function for easily creating and appending HTML elements.
   main	Contains the start-up code for the application.

   index.js also contains a constant with the URL required for fetching information about the HYF repositories:

   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

3. Open the index.html file in your browser. You will see an unordered list with the names of the HYF repositories.

4. Review the main() function in index.js and examine how this code fetches the JSON data and calls renders the data as unordered list in the web page.

1. The assignment is to produce an application similar to the one illustrated in Figure 1 above.

2. You should render network errors to the DOM (see Figure 2 below for an example). Do not use console.log as regular users will not see the console output. Use the predefined alert-error class from style.css to style your error.

3. Your UI should be responsive. Try it with Chrome Developer Tools in the browser, using a mobile phone format and a tablet format, portrait and landscape. If necessary, you can also do this work in week 2.

Figure 2. Rendering of network errors.

Code modifications:

index.js

• Add new functions and modify function main() as you see fit. It is not likely that you will need to modify fetchJSON() and createAndAppend().

style.css

• Add your own CSS styling. Use style.css for all your styling your HTML. Avoid using JavaScript for styling unless there is a genuine need.

  You are not allowed to use a CSS library such as Bootstrap.

Hints:

• To sort the list repositories use .sort() and .localeCompare().

• Use CSS media queries and Flexbox to make the UI responsive.

• To force a 404 network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an x to orgs: orgsx.

If necessary, review the instructions how to Hand in homework using GitHub pull request.

To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLint errors. Open a terminal window in VSCode and type the following command:

npm test

If any errors or warnings are reported by this command you need to fix them before submitting a pull request.

In addition, check for the following:

• Have you removed all commented out code (should never be present in a PR)?
• Do the variable, function and argument names you created follow the Naming Conventions?
• Is your code well-formatted (see Code Formatting)?

If the answer is 'yes' to the preceding questions you are ready to follow these instructions:

1. Push your week1 branch to GitHub:

   git push -u origin week1
   

2. Create a pull request for your week1 branch.

BONUS : Code Kata Race

• Codewars

Deadline Sunday morning

Go through the reading material in the README.md to prepare for your next class.