Prasamsha15 · Prasamsha15 · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -63,7 +63,7 @@ You will be working on the same application during the next three weeks. For eac
 
 | Week | Branch  | Assignment |
 | ---- | ------- | ---------- |
-|  1   | `week1` | - By Wednesday: Fetch the HYF repositories and log their display names to the console.<br/>- By Friday: Populate a `<select>` list with the repository names; allow the user to pick one, and display some of its details, like in the example. |
+|  1   | `week1` | - Part 1 & 2, by Wednesday: Setup environment, fetch the HYF repositories and log their display names to the console.<br/>- Part 3, by Friday: Populate a `<select>` list with the repository names; allow the user to pick one, and display some of its details, like in the example. |
 |  2   | `week2` | Based on the `week1` branch:<br>- When a repository is selected, also load the contributors. Display a loading indicator while loading.<br>- Style the UI, and make it responsive.|
 |  3   | `week3` | Based on the `week2` branch:<br>- Refactor the application to use ES6 Classes and async/await.<br>- Make the app ARIA-compliant.<br />- Marvel at your first application. |
 
@@ -72,30 +72,65 @@ You will be working on the same application during the next three weeks. For eac
 ## Part 1 - <small>Set-up your environment</small>
 **Deadline: Wednesday evening**
 
-- [ ] Fork our class' fork of the JavaScript3 repository to your own GitHub account. Yes, you'll be creating a fork of a fork of a fork:
+- [ ] [Fork](https://help.github.com/en/articles/fork-a-repo) our class' fork of the JavaScript3 repository to your own GitHub account. Yes, you'll be creating a fork of a fork of a fork:
 
-   ```
-   - Main HYF Javascript 3 repository: https://github.com/HackYourFuture/JavaScript3
-     - Belgium HYF fork: https://github.com/HackYourFutureBelgium/JavaScript3
-       - Our class' (Rob's) fork: https://github.com/segersrobbert/JavaScript3
-         - Your fork here.
-   ```
+  ```
+  - Main HYF Javascript 3 repository: https://github.com/HackYourFuture/JavaScript3
+    - Belgium HYF fork: https://github.com/HackYourFutureBelgium/JavaScript3
+      - Our class' (Rob's) fork: https://github.com/segersrobbert/JavaScript3
+        - Your fork here.
+  ```
+
+  > *Reminder*: A fork is like your own copy of a repository, under your own account, of someone else's repository. Read everything about forking and being social on GitHub [here](https://help.github.com/en/articles/fork-a-repo).
+  >
+  > We use forks so that you can later on create [Pull Requests](https://help.github.com/en/articles/about-pull-requests). In short, a pull request (PR) is a way to ask the original owner of a repository (where you forked off from) to merge a change that you did on a branch of your local repository, into the original repository.
+  >
+  > A big advantage of PR's is that it allows to **compare code** and **give feedback** directly on the code! This is very handy when reviewing homework!
+
+- [ ] [Clone](https://help.github.com/en/articles/fork-a-repo#step-2-create-a-local-clone-of-your-fork) the fork to your laptop.
 
-- [ ] Clone the fork to your laptop.
 - [ ] Open the newly created `JavaScript3` folder from the cloned repository in VS Code *(always open this entire main folder!)*
-- [ ] Install the [**ESLint**](https://eslint.org/) extension in VS Code. This extension will highlight and inform you of any violations of the style guide, and allow you to auto-fix a lot of issues. You should probably also already install the [**EditorConfig for VS Code**](https://editorconfig.org/) plugin. Although it's not required in our case because we all use the same editor, it will come in handy when you work on public projects in the future.
+
+  > *Tip*: a command line, you can open a folder in VS Code by typing:
+  >
+  > ```
+  > code .
+  > ```
+
+- [ ] Open a Terminal window in VS Code or in your favorite terminal (like [cmder](https://cmder.net/) or [mingw32](https://gitforwindows.org/)), and **from the main `JavaScript3` folder**, type the following command to install the airbnb style guide and ESLint tools as required for the homework:
+
+  ```
+  npm install
+  ```
+
+  This should output something like this. If not, contact your coach on Slack!
 
-- [ ] Open a Terminal window in VS Code or elsewhere, and **from the main JavaScript3 folder**, type the following command to install the airbnb style guide and ESLint tools as required for the homework:
+  ```
+  $ npm install
+  npm WARN hyf-js3-homework@1.0.0 No repository field.
 
-   ```
-   npm install
-   ```
+  added 188 packages in 19.38s
+  ```
 
 - [ ] Create a new branch for the week 1 homework with the following command:
 
-   ```
-   git checkout -b week1
-   ```
+  ```
+  git checkout -b week1
+  ```
+
+- [ ] Install the [**ESLint**](https://eslint.org/) extension in VS Code. This extension will highlight and inform you of any violations of the style guide, and allow you to auto-fix a lot of issues. You should probably also already install the [**EditorConfig for VS Code**](https://editorconfig.org/) plugin. Although it's not required in our case because we all use the same editor, it will come in handy when you work on public projects in the future.
+
+  **Installing ESLint**:
+
+  ![Installing ESLint](./assets/eslint_install.png)
+
+  **Inspecting issues**: Your errors will be highlighted in the editor, and you get an overview in the 'Problems' window; which you access by clicking the little icon in the bottom-left corner. Selecting an error from this list naviates directly to it.
+
+  ![Inspecting ESLint issues](./assets/eslint_view_errors.png)
+
+  **Auto-fix issues**: Press `ctrl+shift+p`, type `eslint` and choose 'Fix all auto-fixable Problems'. You may have to do this a few times.
+
+  ![Inspecting ESLint issues](./assets/eslint_autofix.png)
 
 ## Part 2 - <small>Call the API</small>
 **Deadline: Wednesday evening**
@@ -115,6 +150,8 @@ You'll create your application inside the `homework` subfolder of the main `Java
 
   > *Hint*: map.
 
+- [ ] Hand in this first part of your homework. See at the end of this guide for instructions.
+
 ## Part 3 - <small>Select list, repo details</small>
 **Deadline: Friday evening**
 
@@ -132,6 +169,8 @@ You'll create your application inside the `homework` subfolder of the main `Java
 
   > We know: creating HTML and modifying the DOM 'manually' is tedious and cumbersome. Later on in your HYF journey, in the [React module](https://github.com/HackYourFuture/React), you'll be modifying the DOM in a much easier and more fun way!
 
+- [ ] That's it for now, time to hand in again!
+
 # Handing in your homework
 
 If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request.
@@ -154,12 +193,20 @@ If the answer is 'yes' to the preceding questions you are ready to follow these
 
 - [ ] Push your `week1` branch to GitHub:
 
-   ```
-   git push -u origin week1
-   ```
+  ```
+  git push -u origin week1
+  ```
+
+  This will give you a link that you can follow to immediately create a pull request (see next step).
 
 - [ ] Create a pull request (PR) for your `week1` branch against our class' (Rob's) fork `master` branch.
 
-- [ ] Keep an eye on your notifications: if there are issues with your homework, we'll add comments to your PR. If we don't add comments, that means you've done an excellent job - or we dind't find the time to review it :(.
+  ![Create PR in GitHub](./assets/create_pr.png)
+
+  > *Heads up!* Pay close attention to the values in the dropdown lists! Be sure to select `segersrobbert/JavaScript3` as the 'base repository', `master` as the 'base branch', and on the right-hand side, select your fork as the 'head repository' and `week1` (or whatever your homework branch is called) as the 'compare' branch.
+
+- [ ] Keep an eye on your notifications: if there are issues with your homework, your coach will add comments to your PR. If they don't add comments, that means you've done an excellent job - or they dind't find the time to review it :(.
+
+  Note that of course the coach will never actually *merge* your PR.
 
-- [ ] You can always amend your homework by pushing more commits to your branch - they'll be included in the pull request. Do this to resolve any remarks we gave in the comments!
+- [ ] You can always amend your homework by pushing more commits to your branch - they'll be included in the pull request automatically, and your coach will be notified. Do this to resolve any remarks your coach gave in the comments!
diff --git a/Week1/assets/create_pr.png b/Week1/assets/create_pr.png
diff --git a/Week1/assets/eslint_autofix.png b/Week1/assets/eslint_autofix.png
diff --git a/Week1/assets/eslint_install.png b/Week1/assets/eslint_install.png
diff --git a/Week1/assets/eslint_view_errors.png b/Week1/assets/eslint_view_errors.png
diff --git a/homework/app.js b/homework/app.js
@@ -0,0 +1,23 @@
+/* eslint-disable no-console */
+function createNode(element) {
+  return document.createElement(element);
+}
+function append(parent, el) {
+  return parent.appendchild(el);
+}
+const select = document.getElementById('repositories');
+const url = ('https://api.github.com/orgs/HackYourFuture/repos?per_page=100');
+fetch(url)
+  .then(response => response.json())
+  .then(() => {
+    const repositories = select.results;
+    // eslint-disable-next-line array-callback-return
+    return repositories.map((repository) => {
+      const option = createNode('option');
+      option.innerHtml = `${repository.value}`;
+      append(select, option);
+    });
+  })
+  .catch((error) => {
+    console.log(JSON.stringify(error));
+  });
diff --git a/homework/index.html b/homework/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <title>Javascript3</title>
+</head>
+
+<body>
+  <div>
+    <header class="header">
+      <div class="container">
+        <h1>HYF Repositories</h1>
+        <select id="repositories" class="repo-selector">
+          <option>Please choose a option </option>
+        </select>
+      </div>
+    </header>
+    <div id="main" class="container">
+      <div class="left-div whiteframe repo-properties">
+        <div><label>Repository:</label> <span id="repo-name"></span></div>
+        <div><label>Description:</label> <span id="repo-description"></span></div>
+        <div><label>Forks:</label> <span id="repo-forks"></span></div>
+        <div><label>Updated:</label> <span id="repo-updated"></span></div>
+      </div>
+      <div class="right-div whiteframe">
+        <p class="contributor-header">Contributors</p> <span id="contributorElements"></span>
+        <p class="username"></p>
+        <p class="repos"></p>
+        <p class="avatar"></p>
+      </div>
+    </div>
+  </div>
+  <script src="index1.js"></script>
+</body>
+
+</html>
diff --git a/homework/index.js b/homework/index.js
@@ -0,0 +1,28 @@
+const repoSelectElement = document.getElementById('repositories');
+const unContainer = document.querySelector('.right__div-username');
+const reposContainer = document.querySelector('.right__div-repos');
+const avatarContainer = document.querySelector('.right__div-avatar');
+
+const CONTRIBUTORS_URL = async () => {
+  const API_CALL = await fetch(
+    'https://api.github.com/repos/HackYourFuture/tdd-game/contributors',
+  );
+  const data = await API_CALL.json();
+  return {
+    data,
+  };
+};
+const showContributorsDetails = () => {
+  CONTRIBUTORS_URL(repoSelectElement.value).then((response) => {
+    unContainer.innerHTML = `username:<span class="right_div-value">${
+      response.data.login
+    }</span>`;
+    reposContainer.innerHTML = `Repos:<span class="right_div-value"> ${
+      response.data.repos_url
+    }</span>`;
+    avatarContainer.innerHTML = `<span class="right_div-value">${
+      response.data.avatar_url
+    }</span>`;
+  });
+};
+showContributorsDetails();
diff --git a/homework/index1.js b/homework/index1.js
@@ -0,0 +1,69 @@
+const unContainer = document.querySelector('.username');
+const reposContainer = document.querySelector('.repos');
+const avatarContainer = document.querySelector('.avatar');
+const repoSelectElement = document.getElementById('repositories');
+const REPOSITORIES_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+let repositories;
+
+function populateSelectList() {
+  repositories.forEach((r) => {
+    const optionElement = document.createElement('option');
+
+    optionElement.text = r.name;
+
+    optionElement.value = r.name;
+
+    repoSelectElement.add(optionElement);
+  });
+}
+
+function showSelectedRepoDetails() {
+  // Account for the first 'Please choose...' option
+
+  const selectedIndex = repoSelectElement.selectedIndex - 1;
+
+  if (selectedIndex < 0) return; // Don't do anything upon selecting the 'Please choose...' option
+  const selectedRepo = repositories[selectedIndex];
+  document.getElementById('repo-name').innerHTML = selectedRepo.name;
+  document.getElementById('repo-description').innerHTML = selectedRepo.description;
+  document.getElementById('repo-forks').innerHTML = selectedRepo.forks;
+  const updateDate = new Date(selectedRepo.updated_at);
+  const date = updateDate.toLocaleDateString();
+  const time = updateDate.toLocaleTimeString();
+  document.getElementById('repo-updated').innerHTML = `${date} ${time}`;
+}
+const getContributors = async () => {
+  const API_CALL = await fetch(
+    'https://api.github.com/repos/HackYourFuture/tdd-game/contributors',
+  );
+  const data = await API_CALL.json();
+  return {
+    selectedIndex: data,
+  };
+};
+const showContributorsDetails = () => {
+  getContributors(getContributors.value).then((response) => {
+    unContainer.innerHTML = `username:<span class="right_div-value">${
+      response.data.login
+    }</span>`;
+    reposContainer.innerHTML = `Repos:<span class="right_div-value"> ${
+      response.data.repos_url
+    }</span>`;
+    avatarContainer.innerHTML = `<span class="right_div-value">${
+      response.data.avatar_url
+    }</span>`;
+  });
+};
+window.onload = () => {
+  fetch(REPOSITORIES_URL)
+    .then(response => response.json())
+
+    .then((data) => {
+      repositories = data;
+      populateSelectList();
+
+      showSelectedRepoDetails();
+      showContributorsDetails();
+    });
+};
+repoSelectElement.onchange = showSelectedRepoDetails;