From 9b606a28f8cd9fee163bb51ade48f2f4b75ebf20 Mon Sep 17 00:00:00 2001 From: jshortz Date: Thu, 22 Aug 2019 15:42:03 +0200 Subject: [PATCH 1/5] Week 1 Homework - all features functional if ugly; no default dropdown on start --- homework/index.js | 80 ++++++++++++++++++++++++++++++++++++++-------- homework/style.css | 7 ++-- 2 files changed, 71 insertions(+), 16 deletions(-) diff --git a/homework/index.js b/homework/index.js index d3a97645e..a3ef56622 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,18 +1,18 @@ 'use strict'; { - function fetchJSON(url, cb) { + function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = () => { - if (xhr.status < 400) { - cb(null, xhr.response); + if (xhr.status < 400) { + cb(null, xhr.response); } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); } }; - xhr.onerror = () => cb(new Error('Network request failed')); + xhr.onerror = () => cb(new Error('Network request failed')); xhr.send(); } @@ -30,18 +30,70 @@ return elem; } - function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); + function createLayout() { + const root = document.getElementById('root'); + createAndAppend('select', root, { id: 'repo-select' }); + createAndAppend('div', root, { id: 'body-container' }); + createAndAppend('div', document.getElementById('body-container'), { id: 'repo-details' }); + createAndAppend('div', document.getElementById('body-container'), { id: 'contributors' }); + + } + + function getRepoDataFromOrgAndAddToDOM() { + const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; + fetchJSON(REPOS_URL, (err, arrayOfRepoData) => { if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + alert(err.message); } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + arrayOfRepoData.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1); + arrayOfRepoData.forEach(repoDataObj => { + createAndAppend('option', document.getElementById('repo-select'), { text: repoDataObj.name }) + }) + addListenerOnSelect(arrayOfRepoData); } - }); + }) } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + function addDataToRepoDetails(data) { + const repoDetailsDiv = document.getElementById('repo-details'); + repoDetailsDiv.innerHTML = ''; + createAndAppend('div', repoDetailsDiv, { id: "repoNameID" }); + createAndAppend('a', document.getElementById("repoNameID"), {href: data.html_url, target: "_blank", text: data.name}) + createAndAppend('div', repoDetailsDiv, { text: `Repository Description: ${data.description}` }); + createAndAppend('div', repoDetailsDiv, { text: `Number of Forks: ${data.forks}` }); + } + + function getContributors(data) { + const contributorsDiv = document.getElementById('contributors'); + contributorsDiv.innerHTML = 'Contributors:'; + fetchJSON(data.contributors_url, (err, arrayOfContributorData) => { + if (err) { + alert(err.message); + } else { + arrayOfContributorData.forEach(repoObj => { + let key = repoObj.login; + createAndAppend('div', contributorsDiv, { id: key }); + createAndAppend('a', document.getElementById(key), {href: repoObj.html_url, target: "_blank", text: key}); + }); + } + }) + } + + function addListenerOnSelect(arrayOfRepoData) { + document.getElementById('repo-select').addEventListener('change', event => { + const selectedRepo = event.target.value; + const selectedData = arrayOfRepoData.filter(repoData => repoData.name === selectedRepo)[0]; + addDataToRepoDetails(selectedData); + getContributors(selectedData); + }) + } + + + + function main() { + createLayout(); + getRepoDataFromOrgAndAddToDOM(); + } - window.onload = () => main(HYF_REPOS_URL); -} + window.onload = () => main(); +} \ No newline at end of file diff --git a/homework/style.css b/homework/style.css index a8985a8a5..2bb4e1e0c 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,6 @@ -.alert-error { - color: red; + +#body-container { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: auto; } \ No newline at end of file From b447be92011cb0815775a7b1eccc14696ecefc2f Mon Sep 17 00:00:00 2001 From: jshortz Date: Sun, 25 Aug 2019 14:20:04 +0200 Subject: [PATCH 2/5] Added default dropdown option --- homework/index.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/homework/index.js b/homework/index.js index a3ef56622..37f74793e 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,18 +1,18 @@ 'use strict'; { - function fetchJSON(url, cb) { + function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = () => { - if (xhr.status < 400) { - cb(null, xhr.response); + if (xhr.status < 400) { + cb(null, xhr.response); } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); } }; - xhr.onerror = () => cb(new Error('Network request failed')); + xhr.onerror = () => cb(new Error('Network request failed')); xhr.send(); } @@ -33,6 +33,7 @@ function createLayout() { const root = document.getElementById('root'); createAndAppend('select', root, { id: 'repo-select' }); + createAndAppend('option', document.getElementById('repo-select'), { text: 'Choose a Repository' }); createAndAppend('div', root, { id: 'body-container' }); createAndAppend('div', document.getElementById('body-container'), { id: 'repo-details' }); createAndAppend('div', document.getElementById('body-container'), { id: 'contributors' }); @@ -41,7 +42,7 @@ function getRepoDataFromOrgAndAddToDOM() { const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; - fetchJSON(REPOS_URL, (err, arrayOfRepoData) => { + fetchJSON(REPOS_URL, (err, arrayOfRepoData) => { if (err) { alert(err.message); } else { @@ -51,14 +52,14 @@ }) addListenerOnSelect(arrayOfRepoData); } - }) + }) } function addDataToRepoDetails(data) { const repoDetailsDiv = document.getElementById('repo-details'); repoDetailsDiv.innerHTML = ''; createAndAppend('div', repoDetailsDiv, { id: "repoNameID" }); - createAndAppend('a', document.getElementById("repoNameID"), {href: data.html_url, target: "_blank", text: data.name}) + createAndAppend('a', document.getElementById("repoNameID"), { href: data.html_url, target: "_blank", text: data.name }) createAndAppend('div', repoDetailsDiv, { text: `Repository Description: ${data.description}` }); createAndAppend('div', repoDetailsDiv, { text: `Number of Forks: ${data.forks}` }); } @@ -73,9 +74,9 @@ arrayOfContributorData.forEach(repoObj => { let key = repoObj.login; createAndAppend('div', contributorsDiv, { id: key }); - createAndAppend('a', document.getElementById(key), {href: repoObj.html_url, target: "_blank", text: key}); - }); - } + createAndAppend('a', document.getElementById(key), { href: repoObj.html_url, target: "_blank", text: key }); + }); + } }) } @@ -84,7 +85,7 @@ const selectedRepo = event.target.value; const selectedData = arrayOfRepoData.filter(repoData => repoData.name === selectedRepo)[0]; addDataToRepoDetails(selectedData); - getContributors(selectedData); + getContributors(selectedData); }) } From 5439fb146387d2aebd142b7e77d9429b050c8e2d Mon Sep 17 00:00:00 2001 From: jshortz Date: Tue, 27 Aug 2019 11:13:46 +0200 Subject: [PATCH 3/5] Changed all to promises/then --- homework/index.js | 60 ++++++++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/homework/index.js b/homework/index.js index 37f74793e..ffb6ea578 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,19 +1,23 @@ 'use strict'; { - function fetchJSON(url, cb) { - const xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.responseType = 'json'; - xhr.onload = () => { - if (xhr.status < 400) { - cb(null, xhr.response); - } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + function fetchJSON(url) { + return new Promise((resolve, reject) => { + let xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = function () { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(Error(xhr.status)); + } + }; + xhr.onerror = () => { + reject(Error('Network request failed')); } - }; - xhr.onerror = () => cb(new Error('Network request failed')); - xhr.send(); + xhr.send(); + }); } function createAndAppend(name, parent, options = {}) { @@ -42,16 +46,12 @@ function getRepoDataFromOrgAndAddToDOM() { const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; - fetchJSON(REPOS_URL, (err, arrayOfRepoData) => { - if (err) { - alert(err.message); - } else { - arrayOfRepoData.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1); - arrayOfRepoData.forEach(repoDataObj => { - createAndAppend('option', document.getElementById('repo-select'), { text: repoDataObj.name }) - }) - addListenerOnSelect(arrayOfRepoData); - } + fetchJSON(REPOS_URL).then(function (response) { + response.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1); + response.forEach(repoDataObj => { + createAndAppend('option', document.getElementById('repo-select'), { text: repoDataObj.name }) + }) + addListenerOnSelect(response); }) } @@ -67,16 +67,12 @@ function getContributors(data) { const contributorsDiv = document.getElementById('contributors'); contributorsDiv.innerHTML = 'Contributors:'; - fetchJSON(data.contributors_url, (err, arrayOfContributorData) => { - if (err) { - alert(err.message); - } else { - arrayOfContributorData.forEach(repoObj => { - let key = repoObj.login; - createAndAppend('div', contributorsDiv, { id: key }); - createAndAppend('a', document.getElementById(key), { href: repoObj.html_url, target: "_blank", text: key }); - }); - } + fetchJSON(data.contributors_url).then(function (response) { + response.forEach(repoObj => { + let key = repoObj.login; + createAndAppend('div', contributorsDiv, { id: key }); + createAndAppend('a', document.getElementById(key), { href: repoObj.html_url, target: "_blank", text: key }); + }) }) } From 1be83871641386fd3bc9e9922a6d7911947a3850 Mon Sep 17 00:00:00 2001 From: jshortz Date: Tue, 27 Aug 2019 16:52:27 +0200 Subject: [PATCH 4/5] Converted .then to async/await --- homework/index.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/homework/index.js b/homework/index.js index ffb6ea578..a44430a2f 100644 --- a/homework/index.js +++ b/homework/index.js @@ -44,15 +44,18 @@ } - function getRepoDataFromOrgAndAddToDOM() { + async function getRepoDataFromOrgAndAddToDOM() { const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100'; - fetchJSON(REPOS_URL).then(function (response) { + try { + let response = await fetchJSON(REPOS_URL); response.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1); response.forEach(repoDataObj => { - createAndAppend('option', document.getElementById('repo-select'), { text: repoDataObj.name }) + createAndAppend('option', document.getElementById('repo-select'), { text: repoDataObj.name }); }) addListenerOnSelect(response); - }) + } catch (error) { + root.innerHTML = error.message; + } } function addDataToRepoDetails(data) { @@ -64,16 +67,19 @@ createAndAppend('div', repoDetailsDiv, { text: `Number of Forks: ${data.forks}` }); } - function getContributors(data) { + async function getContributors(data) { const contributorsDiv = document.getElementById('contributors'); contributorsDiv.innerHTML = 'Contributors:'; - fetchJSON(data.contributors_url).then(function (response) { + try { + let response = await fetchJSON(data.contributors_url); response.forEach(repoObj => { let key = repoObj.login; createAndAppend('div', contributorsDiv, { id: key }); createAndAppend('a', document.getElementById(key), { href: repoObj.html_url, target: "_blank", text: key }); }) - }) + } catch (error) { + root.innerHTML = error.message; + } } function addListenerOnSelect(arrayOfRepoData) { @@ -85,8 +91,6 @@ }) } - - function main() { createLayout(); getRepoDataFromOrgAndAddToDOM(); From 324d046f9b540f1b454b6acb2868d588b06bdeb7 Mon Sep 17 00:00:00 2001 From: jshortz Date: Wed, 28 Aug 2019 15:53:59 +0200 Subject: [PATCH 5/5] Nothing working --- homework/App.js | 22 +++++++++++++++++----- homework/Repository.js | 6 +++--- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/homework/App.js b/homework/App.js index 32b71e34b..90c51ab4d 100644 --- a/homework/App.js +++ b/homework/App.js @@ -12,18 +12,20 @@ class App { * @param {string} url The GitHub URL for obtaining the organization's repositories. */ async initialize(url) { + createLayout(); // 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