diff --git a/homework/View.js b/homework/View.js
new file mode 100644
index 000000000..b5ae067c6
--- /dev/null
+++ b/homework/View.js
@@ -0,0 +1,45 @@
+class View {
+ constructor(e) {
+ this.initialize(e);
+ }
+ async initialize(e) {
+ const t = document.getElementById('root'), r = Util.createAndAppend('header', t, { class: 'header' });
+ Util.createAndAppend('p', r, { html: 'HYF Repositories' });
+ const n = Util.createAndAppend('select', r, {
+ class: 'repo-selector',
+ 'aria-label': 'HYF Repositories',
+ });
+ n.addEventListener('change', () => this.fetchAndRender(n.value)),
+ Util.createAndAppend('div', t, { id: 'container' });
+ try {
+ const t = await Util.fetchJSON(e);
+ (this.repos = t.sort((e, t) => e.name.localeCompare(t.name)).map(e => new Repository(e))),
+ this.repos.forEach((e, t) => {
+ Util.createAndAppend('option', n, { html: e.name(), value: t });
+ }),
+ this.fetchAndRender(n.value);
+ }
+ catch (e) {
+ this.renderError(e);
+ }
+ }
+ async fetchAndRender(e) {
+ const t = this.repos[e], r = document.getElementById('container');
+ try {
+ const e = await t.fetchContributors();
+ r.innerHTML = '';
+ const n = Util.createAndAppend('div', r, { class: 'left-div whiteframe' }), i = Util.createAndAppend('div', r, { class: 'right-div whiteframe' });
+ Util.createAndAppend('p', i, { html: 'Contributions', class: 'contributor-header' });
+ const a = Util.createAndAppend('ul', i, { class: 'contributor-list' });
+ t.render(n), e.map(e => new Contributor(e)).forEach(e => e.render(a));
+ }
+ catch (e) {
+ this.renderError(e);
+ }
+ }
+ renderError(e) {
+ const t = document.getElementById('container');
+ (t.innerHTML = ''),
+ Util.createAndAppend('div', t, { html: e.message, class: 'alert alert-error' });
+ }
+}
diff --git a/homework/index.html b/homework/index.html
index 9c8f80c1a..44a427255 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -16,8 +16,13 @@
-
-
+
HYF Repositories
+
+
+