From d399b9b89ea5430161179e8d423937f8462400c2 Mon Sep 17 00:00:00 2001 From: Wael-Alhomsi Date: Sat, 9 Jun 2018 16:58:46 +0200 Subject: [PATCH 1/6] added homework-week1 --- Week1/app.js | 129 +++++++++++++++++++++++++++++++++++++++++++++++ Week1/index.html | 15 ++++++ Week1/style.css | 75 +++++++++++++++++++++++++++ 3 files changed, 219 insertions(+) create mode 100644 Week1/app.js create mode 100644 Week1/index.html create mode 100644 Week1/style.css diff --git a/Week1/app.js b/Week1/app.js new file mode 100644 index 000000000..7a21a6416 --- /dev/null +++ b/Week1/app.js @@ -0,0 +1,129 @@ +'use strict'; + +{ + function fetchJSON(url, cb) { + + const xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.send(); + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + cb(null, xhr.response); + } else { + cb(new Error(xhr.statusText)); + } + } + } + } + + function selectListBuilder(error, data) { + if (error !== null) { + console.error(error); + } else { + const arrayOfObjects = JSON.parse(data); + const root = document.getElementById('root'); + + const firstContainer = createHtmlElement('div', root); + firstContainer.id = 'first'; + + const pageHeader = createHtmlElement('h1', firstContainer); + pageHeader.innerHTML = 'HackYourFuture'; + const description = createHtmlElement('h4', firstContainer); + description.innerHTML = 'Refugee code school in Amsterdam'; + const newSelect = createHtmlElement('select', firstContainer); + newSelect.setAttribute('id', 'select-menu') + const optionItem = createHtmlElement('option', newSelect); + optionItem.innerText = 'Select a repository to display information'; + for (const obj of arrayOfObjects) { + const optionItem = createHtmlElement('option', newSelect); + optionItem.innerText = obj.name; + optionItem.value = 'https://api.github.com/repos/HackYourFuture/' + obj.name; + } + newSelect.addEventListener('change', handleNewRepositoryRequest => { + const newUrl = event.target.value; + const root = document.getElementById('root'); + + root.innerHTML = null; + fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100", selectListBuilder) + fetchJSON(newUrl, pageBuilder); + }); + } + } + + function pageBuilder(error, data) { + if (error !== null) { + console.error(error); + } else { + const repositoryObject = JSON.parse(data); + console.log(repositoryObject); + const root = document.getElementById('root'); + const informationContainer = createHtmlElement('div', root); + informationContainer.id = 'information'; + // + const informationHeader = createHtmlElement('h2', informationContainer); + informationHeader.innerHTML = 'Repository Description'; + // + const table = createHtmlElement('table', informationContainer); + const tableRow1 = createHtmlElement('tr', table); + const tableHeader1 = createHtmlElement('th', tableRow1); + tableHeader1.innerHTML = 'Repository:'; + const tableData1 = createHtmlElement('td', tableRow1); + const webpageLink = createHtmlElement('a', tableData1); + webpageLink.innerHTML = repositoryObject.name; + webpageLink.setAttribute('href', repositoryObject.svn_url); + webpageLink.setAttribute('target', '_blank'); + const tableRow2 = createHtmlElement('tr', table); + const tableHeader2 = createHtmlElement('th', tableRow2); + tableHeader2.innerHTML = 'Description:'; + const tableData2 = createHtmlElement('td', tableRow2); + tableData2.innerHTML = repositoryObject.description; + const tableRow3 = createHtmlElement('tr', table); + const tableHeader3 = createHtmlElement('th', tableRow3); + tableHeader3.innerHTML = 'Forks:'; + const tableData3 = createHtmlElement('td', tableRow3); + tableData3.innerHTML = repositoryObject.forks; + const tableRow4 = createHtmlElement('tr', table); + const tableHeader4 = createHtmlElement('th', tableRow4); + tableHeader4.innerHTML = 'Updated:'; + const tableData4 = createHtmlElement('td', tableRow4); + tableData4.innerHTML = repositoryObject.updated_at; + const contributorsUrl = repositoryObject.contributors_url; + fetchJSON(contributorsUrl, contributorsListBuilder); + + } + } + + function contributorsListBuilder(error, data) { + if (error !== null) { + console.error(error); + } else { + const arrayOfContributors = JSON.parse(data); + const root = document.getElementById('root'); + const contributorsContainer = createHtmlElement('div', root); + contributorsContainer.setAttribute('id', 'contributors'); + const contributorsHeading = createHtmlElement('h2', contributorsContainer); + contributorsHeading.innerHTML = 'Contributors'; + for (const contributor of arrayOfContributors) { + const contributorName = createHtmlElement('h3', contributorsContainer); + contributorName.innerHTML = contributor.login; + const contributorImage = createHtmlElement('img', contributorsContainer); + contributorImage.setAttribute('src', contributor.avatar_url); + contributorImage.setAttribute('alt', 'profile picture of ' + contributor.login); + contributorImage.setAttribute('class', 'profile-pictures'); + } + } + } + + function createHtmlElement(tag, parent) { + const newElement = document.createElement(tag); + if (parent) { + parent.appendChild(newElement); + } else { + document.body.appendChild(newElement); + } + return newElement; + } + + fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100", selectListBuilder) +} diff --git a/Week1/index.html b/Week1/index.html new file mode 100644 index 000000000..255469dde --- /dev/null +++ b/Week1/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/Week1/style.css b/Week1/style.css new file mode 100644 index 000000000..eebd766bc --- /dev/null +++ b/Week1/style.css @@ -0,0 +1,75 @@ +body { + font-family: 'Raleway', sans-serif; + background-color:rgb(237,237,237); + color:rgb(92,83,74); +} + +h1 { + font-size: 2.5vw; + color: rgb(0,118,163); +} + +h3 { + text-align: center; + font-size: 1.5vw; + color: rgb(85,85,85); +} + +h2 { + text-align: center; + padding: 1vw; + font-size: 1.8vw; + color: rgb(0,118,163); +} +h4 { + font-size: 1vw; + font-weight: normal; + color: rgb(51,51,51); +} + +#select-menu { + font-size: 1vw; + border-radius:0.5vw; + padding: 0.3vw; +} + +table { + margin: 0 auto; + font-size: 1.2vw; + padding: 1vw; +} + +th {padding: 1vw;} + +td {padding: 1vw;} + +#first { + position: fixed; + top:15vw; + left: 3vw; + width: 33%; + padding: 1% +} + +#information { + position: fixed; + background-color: white; + top:11vw; + left: 30vw; + width: 40%; + padding: 1%; + border-radius:1vw; +} + +#contributors { + position: absolute; + top:1vw; + right: 5vw; + width: 15%; + padding: 1%; +} + +.profile-pictures { + width: 50%; + margin-left: 25%; +} \ No newline at end of file From f37d4e873222e068fa98e28a62770d10150d692b Mon Sep 17 00:00:00 2001 From: Wael-Alhomsi Date: Sun, 10 Jun 2018 02:11:59 +0200 Subject: [PATCH 2/6] added hyperlinks to contributors --- Week1/app.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Week1/app.js b/Week1/app.js index 7a21a6416..88e196ef8 100644 --- a/Week1/app.js +++ b/Week1/app.js @@ -106,7 +106,10 @@ contributorsHeading.innerHTML = 'Contributors'; for (const contributor of arrayOfContributors) { const contributorName = createHtmlElement('h3', contributorsContainer); - contributorName.innerHTML = contributor.login; + const contributorLink = createHtmlElement('a', contributorName); + contributorLink.setAttribute('href', contributor.html_url); + contributorLink.setAttribute('target', '_blank'); + contributorLink.innerHTML = contributor.login; const contributorImage = createHtmlElement('img', contributorsContainer); contributorImage.setAttribute('src', contributor.avatar_url); contributorImage.setAttribute('alt', 'profile picture of ' + contributor.login); From ecf217ce5dbd10f60c58db0d34b0ce9ccd3b5b88 Mon Sep 17 00:00:00 2001 From: Wael-Alhomsi Date: Tue, 12 Jun 2018 22:53:43 +0200 Subject: [PATCH 3/6] modified homework-week1 according to the new instructions --- Week1/app.js | 132 ----------------------------------------- Week1/index.html | 15 ----- Week1/style.css | 75 ----------------------- homework/src/index.js | 112 +++++++++++++++++++++++++++------- homework/src/style.css | 92 ++++++++++++++++++++++++++++ 5 files changed, 181 insertions(+), 245 deletions(-) delete mode 100644 Week1/app.js delete mode 100644 Week1/index.html delete mode 100644 Week1/style.css diff --git a/Week1/app.js b/Week1/app.js deleted file mode 100644 index 88e196ef8..000000000 --- a/Week1/app.js +++ /dev/null @@ -1,132 +0,0 @@ -'use strict'; - -{ - function fetchJSON(url, cb) { - - const xhr = new XMLHttpRequest(); - xhr.open('GET', url, true); - xhr.send(); - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if (xhr.status < 400) { - cb(null, xhr.response); - } else { - cb(new Error(xhr.statusText)); - } - } - } - } - - function selectListBuilder(error, data) { - if (error !== null) { - console.error(error); - } else { - const arrayOfObjects = JSON.parse(data); - const root = document.getElementById('root'); - - const firstContainer = createHtmlElement('div', root); - firstContainer.id = 'first'; - - const pageHeader = createHtmlElement('h1', firstContainer); - pageHeader.innerHTML = 'HackYourFuture'; - const description = createHtmlElement('h4', firstContainer); - description.innerHTML = 'Refugee code school in Amsterdam'; - const newSelect = createHtmlElement('select', firstContainer); - newSelect.setAttribute('id', 'select-menu') - const optionItem = createHtmlElement('option', newSelect); - optionItem.innerText = 'Select a repository to display information'; - for (const obj of arrayOfObjects) { - const optionItem = createHtmlElement('option', newSelect); - optionItem.innerText = obj.name; - optionItem.value = 'https://api.github.com/repos/HackYourFuture/' + obj.name; - } - newSelect.addEventListener('change', handleNewRepositoryRequest => { - const newUrl = event.target.value; - const root = document.getElementById('root'); - - root.innerHTML = null; - fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100", selectListBuilder) - fetchJSON(newUrl, pageBuilder); - }); - } - } - - function pageBuilder(error, data) { - if (error !== null) { - console.error(error); - } else { - const repositoryObject = JSON.parse(data); - console.log(repositoryObject); - const root = document.getElementById('root'); - const informationContainer = createHtmlElement('div', root); - informationContainer.id = 'information'; - // - const informationHeader = createHtmlElement('h2', informationContainer); - informationHeader.innerHTML = 'Repository Description'; - // - const table = createHtmlElement('table', informationContainer); - const tableRow1 = createHtmlElement('tr', table); - const tableHeader1 = createHtmlElement('th', tableRow1); - tableHeader1.innerHTML = 'Repository:'; - const tableData1 = createHtmlElement('td', tableRow1); - const webpageLink = createHtmlElement('a', tableData1); - webpageLink.innerHTML = repositoryObject.name; - webpageLink.setAttribute('href', repositoryObject.svn_url); - webpageLink.setAttribute('target', '_blank'); - const tableRow2 = createHtmlElement('tr', table); - const tableHeader2 = createHtmlElement('th', tableRow2); - tableHeader2.innerHTML = 'Description:'; - const tableData2 = createHtmlElement('td', tableRow2); - tableData2.innerHTML = repositoryObject.description; - const tableRow3 = createHtmlElement('tr', table); - const tableHeader3 = createHtmlElement('th', tableRow3); - tableHeader3.innerHTML = 'Forks:'; - const tableData3 = createHtmlElement('td', tableRow3); - tableData3.innerHTML = repositoryObject.forks; - const tableRow4 = createHtmlElement('tr', table); - const tableHeader4 = createHtmlElement('th', tableRow4); - tableHeader4.innerHTML = 'Updated:'; - const tableData4 = createHtmlElement('td', tableRow4); - tableData4.innerHTML = repositoryObject.updated_at; - const contributorsUrl = repositoryObject.contributors_url; - fetchJSON(contributorsUrl, contributorsListBuilder); - - } - } - - function contributorsListBuilder(error, data) { - if (error !== null) { - console.error(error); - } else { - const arrayOfContributors = JSON.parse(data); - const root = document.getElementById('root'); - const contributorsContainer = createHtmlElement('div', root); - contributorsContainer.setAttribute('id', 'contributors'); - const contributorsHeading = createHtmlElement('h2', contributorsContainer); - contributorsHeading.innerHTML = 'Contributors'; - for (const contributor of arrayOfContributors) { - const contributorName = createHtmlElement('h3', contributorsContainer); - const contributorLink = createHtmlElement('a', contributorName); - contributorLink.setAttribute('href', contributor.html_url); - contributorLink.setAttribute('target', '_blank'); - contributorLink.innerHTML = contributor.login; - const contributorImage = createHtmlElement('img', contributorsContainer); - contributorImage.setAttribute('src', contributor.avatar_url); - contributorImage.setAttribute('alt', 'profile picture of ' + contributor.login); - contributorImage.setAttribute('class', 'profile-pictures'); - } - } - } - - function createHtmlElement(tag, parent) { - const newElement = document.createElement(tag); - if (parent) { - parent.appendChild(newElement); - } else { - document.body.appendChild(newElement); - } - return newElement; - } - - fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100", selectListBuilder) -} diff --git a/Week1/index.html b/Week1/index.html deleted file mode 100644 index 255469dde..000000000 --- a/Week1/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - -
- - - - \ No newline at end of file diff --git a/Week1/style.css b/Week1/style.css deleted file mode 100644 index eebd766bc..000000000 --- a/Week1/style.css +++ /dev/null @@ -1,75 +0,0 @@ -body { - font-family: 'Raleway', sans-serif; - background-color:rgb(237,237,237); - color:rgb(92,83,74); -} - -h1 { - font-size: 2.5vw; - color: rgb(0,118,163); -} - -h3 { - text-align: center; - font-size: 1.5vw; - color: rgb(85,85,85); -} - -h2 { - text-align: center; - padding: 1vw; - font-size: 1.8vw; - color: rgb(0,118,163); -} -h4 { - font-size: 1vw; - font-weight: normal; - color: rgb(51,51,51); -} - -#select-menu { - font-size: 1vw; - border-radius:0.5vw; - padding: 0.3vw; -} - -table { - margin: 0 auto; - font-size: 1.2vw; - padding: 1vw; -} - -th {padding: 1vw;} - -td {padding: 1vw;} - -#first { - position: fixed; - top:15vw; - left: 3vw; - width: 33%; - padding: 1% -} - -#information { - position: fixed; - background-color: white; - top:11vw; - left: 30vw; - width: 40%; - padding: 1%; - border-radius:1vw; -} - -#contributors { - position: absolute; - top:1vw; - right: 5vw; - width: 15%; - padding: 1%; -} - -.profile-pictures { - width: 50%; - margin-left: 25%; -} \ No newline at end of file diff --git a/homework/src/index.js b/homework/src/index.js index 1cb1638a0..8b8202209 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -1,19 +1,97 @@ 'use strict'; { + const root = document.getElementById('root'); + const startupContainer = createAndAppend('div', root, { id: 'startup' }); + const headerStartupContainer = createAndAppend('h1', startupContainer, { html: 'HackYourFuture' }); + const descriptionFirstContainer = createAndAppend('h5', startupContainer, { html: '"Refugee code school in Amsterdam"' }); + const instructionsFirstContainer = createAndAppend('h4', startupContainer, { html: 'Select a repository to display information:' }); + + const repositoryContainer = createAndAppend('div', root, { id: 'information' }); + const headerRepositoryContainer = createAndAppend('h2', repositoryContainer, { html: 'Repository Description' }); + const innerRepositoryContainer = createAndAppend('div', repositoryContainer); + + const contributorsContainer = createAndAppend('div', root, { id: 'contributors' }); + const headerContributorsContainer = createAndAppend('h2', contributorsContainer, { html: 'Contributors' }); + const innerContributorContainer = createAndAppend('div', contributorsContainer); + 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}`)); + xhr.open('GET', url, true); + xhr.send(); + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + cb(null, xhr.response); + } else { + cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } } - }; + } xhr.onerror = () => cb(new Error('Network request failed')); - xhr.send(); + } + + function startUpAndBuildSelectList(error, data) { + if (error !== null) { + createAndAppend('div', startupContainer, { html: error.message, class: 'alert-error' }); + } else { + const arrayOfObjects = JSON.parse(data); + const newSelect = createAndAppend('select', startupContainer, { id: 'select-menu' }); + + for (const obj of arrayOfObjects) { + const optionItem = createAndAppend('option', newSelect, { html: obj.name, value: 'https://api.github.com/repos/HackYourFuture/' + obj.name }); + } + newSelect.addEventListener('change', handleNewRepositoryRequest => { + const newUrl = event.target.value; + const root = document.getElementById('root'); + innerRepositoryContainer.innerHTML = ''; + innerContributorContainer.innerHTML = ''; + + fetchJSON(newUrl, buildRepositoryInfoSection); + }); + } + } + + function buildRepositoryInfoSection(error, data) { + + if (error !== null) { + createAndAppend('div', innerRepositoryContainer, { html: error.message, class: 'alert-error' }); + } else { + const repositoryObject = JSON.parse(data); + const table = createAndAppend('table', innerRepositoryContainer); + const tableRow1 = createAndAppend('tr', table); + const tableHeader1 = createAndAppend('th', tableRow1, { html: 'Repository' }); + const tableData1 = createAndAppend('td', tableRow1); + const webpageLink = createAndAppend('a', tableData1, { html: repositoryObject.name, href: repositoryObject.svn_url, target: '_blank' }); + const tableRow2 = createAndAppend('tr', table); + const tableHeader2 = createAndAppend('th', tableRow2, { html: 'Description:' }); + const tableData2 = createAndAppend('td', tableRow2, { html: repositoryObject.description }); + const tableRow3 = createAndAppend('tr', table); + const tableHeader3 = createAndAppend('th', tableRow3, { html: 'Forks:' }); + const tableData3 = createAndAppend('td', tableRow3, { html: repositoryObject.forks }); + const tableRow4 = createAndAppend('tr', table); + const tableHeader4 = createAndAppend('th', tableRow4, { html: 'Updated:' }); + const tableData4 = createAndAppend('td', tableRow4, { html: repositoryObject.updated_at }); + const contributorsUrl = repositoryObject.contributors_url; + + fetchJSON(contributorsUrl, buildContributorsSection); + } + } + + function buildContributorsSection(error, data) { + + if (error !== null) { + createAndAppend('div', innerContributorContainer, { html: error.message, class: 'alert-error' }); + } else { + const arrayOfContributors = JSON.parse(data); + + for (const contributor of arrayOfContributors) { + const contributorName = createAndAppend('h3', innerContributorContainer); + const contributorLink = createAndAppend('a', contributorName, { html: contributor.login, href: contributor.html_url, target: '_blank' }); + const contributorImage = createAndAppend('img', innerContributorContainer, { src: contributor.avatar_url, alt: 'profile picture of ' + contributor.login, class: 'profile-pictures' }); + } + } } function createAndAppend(name, parent, options = {}) { @@ -30,18 +108,6 @@ return elem; } - function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); - if (err) { - createAndAppend('div', root, { html: err.message, class: 'alert-error' }); - } else { - createAndAppend('pre', root, { html: JSON.stringify(data, null, 2) }); - } - }); - } - - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - - window.onload = () => main(HYF_REPOS_URL); + fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100", startUpAndBuildSelectList); + fetchJSON("https://api.github.com/repos/HackYourFuture/AngularJS", buildRepositoryInfoSection); } diff --git a/homework/src/style.css b/homework/src/style.css index a8985a8a5..6624ae044 100644 --- a/homework/src/style.css +++ b/homework/src/style.css @@ -1,3 +1,95 @@ +body { + font-family: 'Raleway', sans-serif; + background-color:rgb(237,237,237); + color:rgb(92,83,74); +} + +h1 { + font-size: 2.5vw; + color: rgb(0,118,163); + margin-bottom: 0px; +} + +h3 { + text-align: center; + font-size: 1.5vw; + color: rgb(85,85,85); +} + +h2 { + text-align: center; + padding: 1vw; + font-size: 1.8vw; + color: rgb(0,118,163); +} + +h4 { + font-size: 1vw; + font-weight: normal; + color: rgb(51,51,51); + margin-top: 1.5vw; + margin-bottom: 0.5vw; +} + +h5 { + font-size: 0.8vw; + font-weight: normal; + font-style: italic; + color: rgb(2, 98, 136); + margin-top: 0.8vw; +} + +#select-menu { + font-size: 1vw; + border-radius:0.5vw; + padding: 0.3vw; +} + +table { + margin: 0 auto; + font-size: 1.2vw; + padding: 1vw; +} + +th {padding: 1vw;} + +td {padding: 1vw;} + +#startup { + position: fixed; + top:14vw; + left: 3vw; + width: 23%; + padding: 1% +} + +#information { + position: fixed; + background-color: white; + top:11vw; + left: 30vw; + width: 40%; + padding: 1%; + border-radius:1vw; +} + +#contributors { + position: absolute; + top:1vw; + right: 5vw; + width: 15%; + padding: 1%; +} + +.profile-pictures { + width: 50%; + margin-left: 25%; + border-radius:0.5vw; +} + .alert-error { color: red; + background-color: rgb(250, 198, 198); + padding: 1vw; + border-radius:0.5vw; } \ No newline at end of file From b3452c057795b5ed21c567cfdce871b479b1ea71 Mon Sep 17 00:00:00 2001 From: Wael-Alhomsi Date: Wed, 13 Jun 2018 01:00:33 +0200 Subject: [PATCH 4/6] removed an unnecessary line of code --- homework/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/homework/src/index.js b/homework/src/index.js index 8b8202209..23801dd67 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -44,7 +44,6 @@ } newSelect.addEventListener('change', handleNewRepositoryRequest => { const newUrl = event.target.value; - const root = document.getElementById('root'); innerRepositoryContainer.innerHTML = ''; innerContributorContainer.innerHTML = ''; From 24eff0c5d713bcbe8490aa4752b5d4af7ce31167 Mon Sep 17 00:00:00 2001 From: Wael-Alhomsi Date: Sat, 16 Jun 2018 22:16:11 +0200 Subject: [PATCH 5/6] added homework-week2 --- homework/src/index.js | 173 +++++++++++++++++++++++------------------ homework/src/style.css | 172 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 257 insertions(+), 88 deletions(-) diff --git a/homework/src/index.js b/homework/src/index.js index 23801dd67..d2118fd7f 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -6,90 +6,117 @@ const headerStartupContainer = createAndAppend('h1', startupContainer, { html: 'HackYourFuture' }); const descriptionFirstContainer = createAndAppend('h5', startupContainer, { html: '"Refugee code school in Amsterdam"' }); const instructionsFirstContainer = createAndAppend('h4', startupContainer, { html: 'Select a repository to display information:' }); - - const repositoryContainer = createAndAppend('div', root, { id: 'information' }); - const headerRepositoryContainer = createAndAppend('h2', repositoryContainer, { html: 'Repository Description' }); - const innerRepositoryContainer = createAndAppend('div', repositoryContainer); - - const contributorsContainer = createAndAppend('div', root, { id: 'contributors' }); - const headerContributorsContainer = createAndAppend('h2', contributorsContainer, { html: 'Contributors' }); - const innerContributorContainer = createAndAppend('div', contributorsContainer); - - function fetchJSON(url, cb) { - - const xhr = new XMLHttpRequest(); - xhr.open('GET', url, true); - xhr.send(); - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if (xhr.status < 400) { - cb(null, xhr.response); - } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + const repositoryContainer = createAndAppend('div', root); + const contributorsContainer = createAndAppend('div', root); + + function fetchJSON(url) { + return new Promise(function (resolve, reject) { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.send(); + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } } - } - } - xhr.onerror = () => cb(new Error('Network request failed')); + }; + xhr.onerror = () => reject(new Error('Network request failed')); + }); + } + + function handleErrorStart(error) { + + createAndAppend('div', startupContainer, { html: error.message, class: 'alert-error' }); + } + + function handleErrorRepository(error) { + + const repositoryContainer2 = createAndAppend('div', repositoryContainer, { id: 'information' }); + const headerRepositoryContainer = createAndAppend('h2', repositoryContainer2, { html: 'Repository Description' }); + const innerRepositoryContainer = createAndAppend('div', repositoryContainer2); + createAndAppend('div', innerRepositoryContainer, { html: error.message, class: 'alert-error' }); } - function startUpAndBuildSelectList(error, data) { - if (error !== null) { - createAndAppend('div', startupContainer, { html: error.message, class: 'alert-error' }); - } else { - const arrayOfObjects = JSON.parse(data); - const newSelect = createAndAppend('select', startupContainer, { id: 'select-menu' }); + function handleErrorContributors(error) { + + const contributorsContainer2 = createAndAppend('div', contributorsContainer, { id: 'contributors' }); + const headerContributorsContainer = createAndAppend('h2', contributorsContainer2, { html: 'Repository contributors' }); + const innerContributorContainer = createAndAppend('div', contributorsContainer2, { id: 'inner-contributors' }); + createAndAppend('div', innerContributorContainer, { html: error.message, class: 'alert-error' }); + } - for (const obj of arrayOfObjects) { - const optionItem = createAndAppend('option', newSelect, { html: obj.name, value: 'https://api.github.com/repos/HackYourFuture/' + obj.name }); + function startUpAndBuildSelectList(data) { + + const arrayOfObjects = JSON.parse(data); + const newSelect = createAndAppend('select', startupContainer, { id: 'select-menu' }); + + arrayOfObjects.sort(function (a, b) { + const nameA = a.name.toUpperCase(); + const nameB = b.name.toUpperCase(); + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; } - newSelect.addEventListener('change', handleNewRepositoryRequest => { - const newUrl = event.target.value; - innerRepositoryContainer.innerHTML = ''; - innerContributorContainer.innerHTML = ''; + return 0; + }); + + const optionItem = createAndAppend('option', newSelect, { html: 'Select' }); - fetchJSON(newUrl, buildRepositoryInfoSection); - }); + for (let i = 0; i < arrayOfObjects.length; i++) { + const optionItem = createAndAppend('option', newSelect, { html: arrayOfObjects[i].name, value: i }); } + + newSelect.addEventListener('change', handleNewRepositoryRequest => { + const newUrl = 'https://api.github.com/repos/HackYourFuture/' + arrayOfObjects[event.target.value].name; + repositoryContainer.innerHTML = ''; + contributorsContainer.innerHTML = ''; + + fetchJSON(newUrl).then(buildRepositoryInfoSection, handleErrorRepository); + }); } - function buildRepositoryInfoSection(error, data) { - - if (error !== null) { - createAndAppend('div', innerRepositoryContainer, { html: error.message, class: 'alert-error' }); - } else { - const repositoryObject = JSON.parse(data); - const table = createAndAppend('table', innerRepositoryContainer); - const tableRow1 = createAndAppend('tr', table); - const tableHeader1 = createAndAppend('th', tableRow1, { html: 'Repository' }); - const tableData1 = createAndAppend('td', tableRow1); - const webpageLink = createAndAppend('a', tableData1, { html: repositoryObject.name, href: repositoryObject.svn_url, target: '_blank' }); - const tableRow2 = createAndAppend('tr', table); - const tableHeader2 = createAndAppend('th', tableRow2, { html: 'Description:' }); - const tableData2 = createAndAppend('td', tableRow2, { html: repositoryObject.description }); - const tableRow3 = createAndAppend('tr', table); - const tableHeader3 = createAndAppend('th', tableRow3, { html: 'Forks:' }); - const tableData3 = createAndAppend('td', tableRow3, { html: repositoryObject.forks }); - const tableRow4 = createAndAppend('tr', table); - const tableHeader4 = createAndAppend('th', tableRow4, { html: 'Updated:' }); - const tableData4 = createAndAppend('td', tableRow4, { html: repositoryObject.updated_at }); - const contributorsUrl = repositoryObject.contributors_url; - - fetchJSON(contributorsUrl, buildContributorsSection); - } + function buildRepositoryInfoSection(data) { + + const repositoryContainer2 = createAndAppend('div', repositoryContainer, { id: 'information' }); + const headerRepositoryContainer = createAndAppend('h2', repositoryContainer2, { html: 'Repository Description' }); + const innerRepositoryContainer = createAndAppend('div', repositoryContainer2); + const repositoryObject = JSON.parse(data); + const table = createAndAppend('table', innerRepositoryContainer); + const tableRow1 = createAndAppend('tr', table); + const tableHeader1 = createAndAppend('th', tableRow1, { html: 'Repository' }); + const tableData1 = createAndAppend('td', tableRow1); + const webpageLink = createAndAppend('a', tableData1, { html: repositoryObject.name, href: repositoryObject.svn_url, target: '_blank' }); + const tableRow2 = createAndAppend('tr', table); + const tableHeader2 = createAndAppend('th', tableRow2, { html: 'Description:' }); + const tableData2 = createAndAppend('td', tableRow2, { html: repositoryObject.description }); + const tableRow3 = createAndAppend('tr', table); + const tableHeader3 = createAndAppend('th', tableRow3, { html: 'Forks:' }); + const tableData3 = createAndAppend('td', tableRow3, { html: repositoryObject.forks }); + const tableRow4 = createAndAppend('tr', table); + const tableHeader4 = createAndAppend('th', tableRow4, { html: 'Updated:' }); + const tableData4 = createAndAppend('td', tableRow4, { html: repositoryObject.updated_at }); + const contributorsUrl = repositoryObject.contributors_url; + + fetchJSON(contributorsUrl).then(buildContributorsSection, handleErrorContributors); } - function buildContributorsSection(error, data) { + function buildContributorsSection(data) { - if (error !== null) { - createAndAppend('div', innerContributorContainer, { html: error.message, class: 'alert-error' }); - } else { - const arrayOfContributors = JSON.parse(data); + const contributorsContainer2 = createAndAppend('div', contributorsContainer, { id: 'contributors' }); + const headerContributorsContainer = createAndAppend('h2', contributorsContainer2, { html: 'Repository contributors' }); + const innerContributorContainer = createAndAppend('div', contributorsContainer2, { id: 'inner-contributors' }); + const arrayOfContributors = JSON.parse(data); - for (const contributor of arrayOfContributors) { - const contributorName = createAndAppend('h3', innerContributorContainer); - const contributorLink = createAndAppend('a', contributorName, { html: contributor.login, href: contributor.html_url, target: '_blank' }); - const contributorImage = createAndAppend('img', innerContributorContainer, { src: contributor.avatar_url, alt: 'profile picture of ' + contributor.login, class: 'profile-pictures' }); - } + for (const contributor of arrayOfContributors) { + const singleContributorContainer = createAndAppend('div', innerContributorContainer, { class: 'single-contributor' }); + const contributorName = createAndAppend('h3', singleContributorContainer); + const contributorLink = createAndAppend('a', contributorName, { html: contributor.login, href: contributor.html_url, target: '_blank' }); + const contributorImage = createAndAppend('img', singleContributorContainer, { src: contributor.avatar_url, alt: 'profile picture of ' + contributor.login, class: 'profile-pictures' }); } } @@ -106,7 +133,5 @@ }); return elem; } - - fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100", startUpAndBuildSelectList); - fetchJSON("https://api.github.com/repos/HackYourFuture/AngularJS", buildRepositoryInfoSection); + fetchJSON("https://api.github.com/orgs/HackYourFuture/repos?per_page=100").then(startUpAndBuildSelectList, handleErrorStart); } diff --git a/homework/src/style.css b/homework/src/style.css index 6624ae044..24e5008ae 100644 --- a/homework/src/style.css +++ b/homework/src/style.css @@ -1,9 +1,12 @@ + body { font-family: 'Raleway', sans-serif; background-color:rgb(237,237,237); color:rgb(92,83,74); } +* {box-sizing: border-box;} + h1 { font-size: 2.5vw; color: rgb(0,118,163); @@ -12,7 +15,7 @@ h1 { h3 { text-align: center; - font-size: 1.5vw; + font-size: 0.9vw; color: rgb(85,85,85); } @@ -41,7 +44,7 @@ h5 { #select-menu { font-size: 1vw; - border-radius:0.5vw; + border-radius: 0.8vw; padding: 0.3vw; } @@ -58,38 +61,179 @@ td {padding: 1vw;} #startup { position: fixed; top:14vw; - left: 3vw; + left: 3.5%; width: 23%; - padding: 1% + padding: 1%; } #information { position: fixed; background-color: white; top:11vw; - left: 30vw; + left: 30%; width: 40%; padding: 1%; - border-radius:1vw; + border-radius:2vw; } #contributors { position: absolute; - top:1vw; - right: 5vw; - width: 15%; + top:3vw; + right: 3%; + width: 24%; padding: 1%; } +#inner-contributors { + display: flex; + flex-wrap:wrap; + justify-content:space-around; +} + +.single-contributor { + width: 38%; + border-radius:1.5vw; + height: 9vw; + margin: 6%; +} + .profile-pictures { width: 50%; margin-left: 25%; - border-radius:0.5vw; + border-radius: 1vw; } .alert-error { - color: red; - background-color: rgb(250, 198, 198); - padding: 1vw; - border-radius:0.5vw; + color: red; + background-color: rgb(250, 198, 198); + padding: 1vw; + border-radius:1.3vw; +} + +@media screen and (min-width:416px) and (max-width:1024px) { + + h1 {font-size: 3vw;} + + h3 {font-size: 1.6vw;} + + h2 {font-size: 2.5vw;} + + h4 {font-size: 1.3vw;} + + h5 {font-size: 1.2vw;} + + #select-menu { + font-size: 1.3vw; + border-radius:1vw; + } + + table { + font-size: 1.7vw; + } + + #startup { + position: absolute; + top: 8.5vw; + left: 3%; + width: 28%; + } + + #information { + position: absolute; + background-color: white; + top:4vw; + left: 37%; + width: 60%; + border-radius:3vw; + } + + #contributors { + position: relative; + top:37vw; + right: 0vw; + width: 100%; + } + + #inner-contributors { + display: flex; + flex-wrap:wrap; + justify-content:space-around; + } + + .single-contributor { + width: 15%; + border-radius:3vw; + height: 16vw; + margin: 2%; + } + + .profile-pictures { + width: 50%; + border-radius:2vw; + } + .alert-error {border-radius:1.5vw;} + +} + +@media screen and (max-width:415px) { + + h1 {font-size: 6vw;} + + h3 {font-size: 3.2vw;} + + h2 {font-size: 4.5vw;} + + h4 {font-size: 2.5vw;} + + h5 {font-size: 2vw;} + + #select-menu { + font-size: 2.5vw; + border-radius:1.5vw; + } + + table {font-size: 3vw;} + + #startup { + position: absolute; + top: 6vw; + left: 6.5%; + width: 92%; + } + + #information { + position: absolute; + background-color: white; + top:45vw; + left: 6.5%; + width: 86%; + padding: 3%; + border-radius:5vw; + } + + #contributors { + position: relative; + top:95vw; + right: 0vw; + width: 100%; + } + + #inner-contributors { + display: flex; + flex-wrap:wrap; + justify-content:space-around; + } + + .single-contributor { + width: 26%; + border-radius:3vw; + height: 28vw; + margin: 3%; + } + .single-contributor h3 {padding: 3%;} + .profile-pictures { + width: 50%; + border-radius:3.5vw; + } + .alert-error {border-radius:2.5vw;} } \ No newline at end of file From 60fe46937931964ccd3aa536380d04f920a92c6e Mon Sep 17 00:00:00 2001 From: Wael-Alhomsi Date: Sun, 17 Jun 2018 23:15:08 +0200 Subject: [PATCH 6/6] modified how to call the contributors information --- homework/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/homework/src/index.js b/homework/src/index.js index d2118fd7f..eef602bab 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -76,7 +76,7 @@ repositoryContainer.innerHTML = ''; contributorsContainer.innerHTML = ''; - fetchJSON(newUrl).then(buildRepositoryInfoSection, handleErrorRepository); + fetchJSON(newUrl).then(buildRepositoryInfoSection, handleErrorRepository).then(buildContributorsSection, handleErrorContributors); }); } @@ -102,7 +102,7 @@ const tableData4 = createAndAppend('td', tableRow4, { html: repositoryObject.updated_at }); const contributorsUrl = repositoryObject.contributors_url; - fetchJSON(contributorsUrl).then(buildContributorsSection, handleErrorContributors); + return fetchJSON(contributorsUrl); } function buildContributorsSection(data) {