annagabain · annagabain · Aug 30, 2019 · Sep 1, 2019 · Sep 1, 2019 · Sep 5, 2019
diff --git a/homework/.vscode/settings.json b/homework/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/homework/App.js b/homework/App.js
@@ -12,23 +12,54 @@ class App {
    * @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
-    // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
-
-    const root = document.getElementById('root');
-
-    Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code
+    this.setupDOMElements();
+
+        // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
+
+    function compare(a, b) {
+      if (a.name<b.name){
+        return -1;
+      }
+      if (a.name>b.name){
+        return 1
+      }
+      return 0;
+    }
 
+
     try {
       const repos = await Util.fetchJSON(url);
-      this.repos = repos.map(repo => new Repository(repo));
-      // TODO: add your own code here
+      this.repos = repos.sort(compare).map(repo => new Repository(repo));
+      this.addRepoNamesToSelect();    
     } catch (error) {
       this.renderError(error);
     }
   }
 
+  addRepoNamesToSelect() {
+    const selectElement = document.getElementById('repo-select');
+    for (const repo of this.repos) {
+      Util.createAndAppend('option', selectElement, { text: repo.name() });
+    }
+    selectElement.addEventListener('change', event => {
+      const selectedRepoName = event.target.value;
+      const selectedRepo = this.repos.filter(repo => repo.name() === selectedRepoName)[0];
+      selectedRepo.render(document.getElementById('repo-info'));
+      this.fetchContributorsAndRender(selectedRepo);
+    });  
+
+    let firstRepo = this.repos[0]
+    firstRepo.render(document.getElementById('repo-info'));
+    this.fetchContributorsAndRender(firstRepo);
+  }
+
+  setupDOMElements(){
+    const root = document.getElementById('root');
+    Util.createAndAppend('select', root, { id: 'repo-select' }); 
+    Util.createAndAppend('div', root, { id: 'repo-info' }); 
+    Util.createAndAppend('div', root, { id: 'repo-contributors' }); 
+  }
+
   /**
    * Removes all child elements from a container element
    * @param {*} container Container element to clear
@@ -44,24 +75,16 @@ class App {
    * repo and its contributors as HTML elements in the DOM.
    * @param {number} index The array index of the repository.
    */
-  async fetchContributorsAndRender(index) {
+  async fetchContributorsAndRender(repo) {
     try {
-      const repo = this.repos[index];
       const contributors = await repo.fetchContributors();
 
-      const container = document.getElementById('container');
+      const container = document.getElementById('repo-contributors');
       App.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));
+        .forEach(contributor => contributor.render(container));
     } catch (error) {
       this.renderError(error);
     }
@@ -76,6 +99,6 @@ class App {
   }
 }
 
-const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
 
-window.onload = () => new App(HYF_REPOS_URL);
+window.onload = () => new App(REPOS_URL);
diff --git a/homework/Contributor.js b/homework/Contributor.js
@@ -13,7 +13,7 @@ class Contributor {
    * @param {HTMLElement} container The container element in which to render the contributor.
    */
   render(container) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));
+    Util.createAndAppend('img', container, {src: this.contributor.avatar_url, width: 30} );
+    Util.createAndAppend('p', container, {text: this.contributor.login} );
   }
 }
diff --git a/homework/MY-Anna-classes-trainer.js b/homework/MY-Anna-classes-trainer.js
@@ -0,0 +1,70 @@
+
+
+class Person {
+  constructor (name, age, height, eyecolour) {
+      this.name = name;
+      this.age = age;
+      this.height = height;
+      this.eyecolour = eyecolour;
+  }
+
+  descriptiveSentence(){
+    return this.name + ' is ' + this.age + ' years old'+ ', ' + this.height + ' cm tall'+ ' and has ' + this.eyecolour + ' eyes.'
+  }
+}
+
+
+class People {
+  constructor(person1, person2) {
+      this.person1=person1
+      this.person2=person2
+  }
+  descriptiveSentence(){
+    return this.person1.descriptiveSentence() + '\n' + this.person2.descriptiveSentence()
+    //return this.name + ' is ' + this.age + ', ' + this.height + ' cm tall'+ ' and has ' + this.eyecolour + ' eyes'
+  }
+
+}
+
+class MorePeople {
+  constructor(peopleList) {
+    this.peopleList=peopleList
+  }
+  descriptiveSentence(){
+    let collectAllthePersons = ""
+    for ( let person of peopleList){
+
+      collectAllthePersons += person.descriptiveSentence() + '\n'
+
+    }
+
+    return collectAllthePersons
+  }
+}
+
+ let person1 = new Person('John', 25, 180, 'blue')
+ let person2 = new Person('Jane', 28, 160, 'green')
+
+ let person3 = new Person('Jack', 64, 190, 'brown')
+ let person4 = new Person('Anna', 30, 168, 'gray-green')
+
+const people = new People (person1, person2,)
+
+const peopleList = [person1, person2, person3, person4]
+const morePeople = new MorePeople (peopleList)
+
+
+
+
+
+console.log(morePeople.descriptiveSentence()) 
+
+
+// Tested Steps
+// console.log(person1.name + ' is ' + person1.age + ', ' + person1.height + ' cm tall'+ ' and has ' + person1.eyecolour + ' eyes')
+// console.log(person1.descriptiveSentence()) //John is 25, 180 cm tall and has blue eyes
+// console.log(person2.descriptiveSentence()) //Jane is 28, 160 cm tall and has green eyes.
+// console.log(people.descriptiveSentence())  
+              //John is 25, 180 cm tall and has blue eyes 
+              //Jane is 28, 160 cm tall and has green eyes.
+
diff --git a/homework/Repository.js b/homework/Repository.js
@@ -13,8 +13,11 @@ class Repository {
    * @param {HTMLElement} container The container element in which to render the repository.
    */
   render(container) {
-    // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2));
+    App.clearContainer(container);
+    Util.createAndAppend('h4', container, {text:this.name()} );
+    Util.createAndAppend('p', container, {text:this.repository.forks} );
+    Util.createAndAppend('p', container, {text:this.repository.created_at} );
+    Util.createAndAppend('p', container, {text:this.repository.description} );
   }
 
   /**

diff --git a/homework/index.html b/homework/index.html
diff --git a/homework/index.js b/homework/index.js
@@ -41,7 +41,7 @@
     });
   }
 
-  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+  const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
 
-  window.onload = () => main(HYF_REPOS_URL);
+  window.onload = () => main(REPOS_URL);
 }
diff --git a/homework/index2.html b/homework/index2.html
@@ -12,10 +12,15 @@
     <meta name="format-detection" content="telephone=no" />
     <link rel="apple-touch-icon" href="./hyf.png" />
     <link rel="shortcut icon" type="image/png" href="./hyf.png" />
-    <title>HYF-GITHUB</title>
+    <title>FooCoding-GITHUB</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
     <link rel="stylesheet" href="./style.css" />
   </head>
+  <header>    
+    <div id="header">
+      <label>HYF Repositories </label>
+    </div>
+  </header>
 
   <body>
     <div id="root"></div>

diff --git a/homework/style.css b/homework/style.css
@@ -1,3 +1,77 @@
+#header {
+    background-color: rgb(116, 56, 13); 
+    color: white; 
+    padding: 1rem; 
+}
+
+body {
+    background-color:rgb(197, 197, 197);
+    color: black;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: 1rem;
+    padding-right: 1px;
+}
+
 .alert-error {
     color: red;
+}
+
+
+select {
+    font-size: .9rem;
+    padding: 4px 25px;
+    margin-left: 10px;
+    border-radius: 20px;
+}
+
+#container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    margin: 1 rem;
+}
+
+#repo-info {
+    color: rgb(43, 0, 43);
+    font-size: .9rem;
+    padding: 4px 4px;
+    margin-left: 2px;
+    margin-top: 1rem;
+    width: 60%;
+
+    border-style: bold;
+    border-radius: 0%;
+    padding: 10px;
+    background:rgba(230, 178, 210, 0.5);
+    opacity: 1;
+
+    box-shadow: 10px 5px 5px grey;
+}
+#repo-contributors {
+    color: rgb(48, 0, 20);
+    font-size: .9rem;
+    padding: 4px 4px;
+    margin-left: 2px;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto;
+
+
+    margin: 1rem;
+    width: 40%;
+
+
+    border-style: bold;
+    border-radius: 0%;
+    padding: 10px;
+    background:rgba(231, 185, 152, 0.5);
+    opacity: 1;
+
+    box-shadow: 10px 5px 5px grey;
+}
+span {
+    font-size: .8rem;  
+    margin: 3%;
 }