Provide the full implementation of the HeaderView

remarcmij · remarcmij · commit 7f1b06e69110 · 2019-08-26T23:21:04.000+02:00
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -91,7 +91,7 @@ Object Oriented Programming is a vast topic and in this homework we can only scr
 | ErrorView.js | Renders an error, of present. |
 | Util.js | Provides utility functions. |
 
->For this part of the homework you should modify the **xxxView.js** files, by adding and adapting code from your non-OOP version of the homework to these files. You should also copy the styling from your non-OOP version. Other files should not be modified.
+>For this part of the homework you should modify the **RepoView.js**, **ContributorsView.js** and the **ErrorView.js** files, by adding and adapting code from your non-OOP version of the homework to these files. You should also copy the styling from your non-OOP version. Other files should not be modified.
 
 _Read:_
 
diff --git a/homework-classes/HeaderView.js b/homework-classes/HeaderView.js
@@ -23,9 +23,22 @@
      * @param {Object[]} repos An array of repository objects.
      */
     render(repos) {
-      this.select = createAndAppend('select', this.header);
-      // TODO: replace this comment and the console.log with your own code
-      console.log('renderSelect', repos);
+      createAndAppend('p', this.header, { text: this.account.name });
+      this.select = createAndAppend('select', this.header, {
+        class: 'repo-select',
+        autofocus: 'autofocus',
+      });
+
+      repos.forEach((repo, index) =>
+        createAndAppend('option', this.select, {
+          text: repo.name,
+          value: index,
+        }),
+      );
+
+      this.select.addEventListener('change', () =>
+        this.model.fetchData(this.select.value),
+      );
     }
   }
 
