@@ -0,0 +1,89 @@
+"use strict";
+
+/* global Util, Repository, Contributor */
+
+class App {
+  constructor(url) {
+    this.initialize(url);
+  }
+
+  /**
+   * Initialization
+   * @param {string} url The GitHub URL for obtaining the organization's repositories.
+   */
+  async initialize(url) {
+    // Add code here to initialize your app
+    // 1. Create the fixed HTML elements of your page
+
+    //Design the page by using DOM manipulation by calling a function from Util :
+    Util.createPage();
+
+    // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
+
+    Util.fetchJSON(HYF_REPOS_URL);
+
+    // ...
+
+    try {
+      // ...
+      const repos = await Util.fetchJSON(url);
+      Util.fillCombobox(repos);
+      Util.comboChangeListener(repos);
+      Util.dataRender(repos);
+      // ...
+    } catch (error) {
+      this.renderError(error);
+    }
+  }
+
+  /**
+   * Removes all child elements from a container element
+   * @param {*} container Container element to clear
+   */
+  clearContainer(container) {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+  }
+
+  /**
+   * Fetch contributor information for the selected repository and render the
+   * repo and its contributors as HTML elements in the DOM.
+   * @param {number} index The array index of the repository.
+   */
+  async fetchContributorsAndRender(index) {
+    try {
+      const repo = this.repos[index];
+      const contributors = await repo.fetchContributors();
+
+      const container = document.getElementById("container");
+      this.clearContainer(container);
+
+      const leftDiv = Util.createAndAppend("div", container);
+      const rightDiv = Util.createAndAppend("div", container);
+
+      const contributorList = Util.createAndAppend("ul", rightDiv);
+
+      repo.render(leftDiv);
+
+      contributors
+        .map(contributor => new Contributor(contributor))
+        .forEach(contributor => contributor.render(contributorList));
+    } catch (error) {
+      this.renderError(error);
+    }
+  }
+
+  /**
+   * Render an error to the DOM.
+   * @param {Error} error An Error object describing the error.
+   */
+  renderError(error) {
+    alert(error);
+  }
+}
+
+const HYF_REPOS_URL =
+  "https://api.github.com/orgs/HackYourFuture/repos?per_page=100";
+
+window.onload = () => new App(HYF_REPOS_URL);
@@ -0,0 +1,18 @@
+"use strict";
+
+/* global Util */
+
+// eslint-disable-next-line no-unused-vars
+class Contributor {
+  constructor(data) {
+    this.data = data;
+  }
+
+  /**
+   * Render the contributor info to the DOM.
+   * @param {HTMLElement} contributorList The parent element in which to render the contributor.
+   */
+  render(container) {
+    Util.getContributors(repos);
+  }
+}
@@ -0,0 +1,32 @@
+"use strict";
+
+/* global Util */
+
+// eslint-disable-next-line no-unused-vars
+class Repository {
+  constructor(data) {
+    this.data = data;
+  }
+
+  /**
+   * Render the repository info to the DOM.
+   * @param {HTMLElement} parent The parent element in which to render the repository.
+   */
+  render(container) {
+    Util.fillCombobox(this.data);
+  }
+
+  /**
+   * Returns an array of contributors as a promise
+   */
+  fetchContributors() {
+    return Util.fetchJSON(this.data.contributors_url);
+  }
+
+  /**
+   * Returns the name of the repository
+   */
+  name() {
+    return this.data.name;
+  }
+}