From f03d2feace3a84520edd9968ff4ac9bb6d618f15 Mon Sep 17 00:00:00 2001 From: Ahmad Kawara <39919017+kawaraa@users.noreply.github.com> Date: Sun, 14 Oct 2018 20:24:58 +0200 Subject: [PATCH 1/6] Update index.js Finishes homework week1 --- homework/src/index.js | 107 +++++++++++++++++++++++++++++++++--------- 1 file changed, 85 insertions(+), 22 deletions(-) diff --git a/homework/src/index.js b/homework/src/index.js index f0a3a2f06..e1b520401 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -1,47 +1,110 @@ -'use strict'; +"use strick"; + +function main(url) { + + const root = document.getElementById("root"); -{ function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = () => { - if (xhr.status < 400) { + if (xhr.status === 200) { cb(null, xhr.response); } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + cb({ text: `Error: ${xhr.status} - ${xhr.statusText}`, id: "id", val: "error" }); } }; - xhr.onerror = () => cb(new Error('Network request failed')); + xhr.onerror = () => { + cb({ text: "Network request failed", id: "id", val: "error" }); + }; xhr.send(); } - function createAndAppend(name, parent, options = {}) { + function createEl(name, parent, obj) { const elem = document.createElement(name); parent.appendChild(elem); - Object.keys(options).forEach((key) => { - const value = options[key]; - if (key === 'text') { - elem.innerText = value; - } else { - elem.setAttribute(key, value); - } - }); + if (obj) { + if (obj.text) { elem.innerHTML = obj.text; } + if (obj.id) { elem.setAttribute(obj.id, obj.val); } + } return elem; } - function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); - if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + fetchJSON(url, (err, data) => { + if (err === null) { + const header = createEl("header", root); + createEl("h3", header, { text: "HYF Repositories" }); + const select = createEl("select", header); + let names = []; + data.forEach(el => { + let name = el.name.charAt(0).toUpperCase() + el.name.slice(1); + names.push(name); + }); + names.sort(); + for (let i = 0; i < names.length; i++) { + let optn = createEl("option", select, { text: names[i] }); + optn.value = i; + } + repos(data, select); + } else { + createEl("div", root, err); + } + }); + + function repos(data, select) { + let article = createEl("article", root); + + select.addEventListener("change", onSelect); + function onSelect() { + let v1 = select.options[select.selectedIndex].text.toUpperCase(); + for (let i = 0; i < data.length; i++) { + let v2 = data[i].name.toUpperCase(); + if (v1 === v2) { + article.innerHTML = ""; + repoDetails(data[i], article); + contributors(data[i].contributors_url, article); + } + } + } + onSelect(); + + } + + function repoDetails(details, parent) { + let table = createEl("table", parent); + let tr = createEl("tr", table); + createEl("th", tr, { text: "Repository:" }); + let td = createEl("td", tr); + let a = createEl("a", td, { text: details.name, id: "href", val: details.html_url }); + a.setAttribute("target", "_blank"); + if (details.description) { + createEl("tr", table, { text: `Description:${details.description}` }); + } + createEl("tr", table, { text: `Forks:${details.forks_count}` }); + createEl("tr", table, { text: `Updated:${details.updated_at}` }); + } + + function contributors(url, parent) { + fetchJSON(url, (err, info) => { + if (err === null) { + let ul = createEl("ul", parent); + for (let i = 0; i < info.length; i++) { + let li = createEl("li", ul); + let a = createEl("a", li, { id: "href", val: info[i].html_url }); + a.setAttribute("target", "_blank"); + createEl("img", a, { id: "src", val: info[i].avatar_url }); + a.innerHTML += `

${info[i].login}

${info[i].contributions}`; + } } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + parent.innerHTML = ""; + createEl("div", parent, err); } }); } - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - window.onload = () => main(HYF_REPOS_URL); } + +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +window.onload = () => main(HYF_REPOS_URL); From 035281fb116735681902021827ae4e338a528b4f Mon Sep 17 00:00:00 2001 From: Ahmad Kawara <39919017+kawaraa@users.noreply.github.com> Date: Sun, 14 Oct 2018 20:28:36 +0200 Subject: [PATCH 2/6] Update style.css Adds styles. --- homework/src/style.css | 101 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 98 insertions(+), 3 deletions(-) diff --git a/homework/src/style.css b/homework/src/style.css index a8985a8a5..d486ab0d0 100644 --- a/homework/src/style.css +++ b/homework/src/style.css @@ -1,3 +1,98 @@ -.alert-error { - color: red; -} \ No newline at end of file +@import url('https://fonts.googleapis.com/css?family=Roboto'); +body { + margin: 0; +} +#error { + background-color: #f8d7da; + color: #7b1c2a; + width: 100%; + padding: 12px 20px; + border-radius: 6px; +} +#root { + max-width: 70%; + margin: auto; + font-family: 'Roboto', Arial, sans-serif; +} +header { + width: 100%; + background-color: #3f51b5; +} +header h3 { + display: inline-block; + margin: 20px; + color: #fff; +} +header select { + display: inline-block; + padding: 6px; +} + +article { + display: flex; + flex-flow: wrap; + padding: 15px 0; + font-size: 15px; +} +article table { + flex: 5; + padding: 20px; + margin: 0 5px 0 0; + box-shadow: 0px 0px 8px rgb(148, 148, 148); +} +article table tr th { + text-align: left; +} +article table tr td { + padding: 0 0 0 8px; +} +article ul { + flex: 5; + list-style-type: none; + padding: 0; + margin: 0 0 0 5px; + box-shadow: 0px 0px 8px rgb(148, 148, 148); +} +article ul p { + margin: 0; + padding: 15px; + font-size: 14px; + color: rgb(95, 94, 94); +} +article ul li a { + display: flex; + align-items: center; + text-decoration: none; + margin: 0; + padding: 15px; +} +article ul li a img { + width: 45px; + height: 45px; + border-radius: 6px; +} +article ul li a p { + flex: 8; + margin: 0; + padding: 0 0 0 15px; +} +article ul li a span { + margin: 0; + padding: 1px 6px; + background-color: #808080; + border-radius: 4px; + font-size: 14px; + color: #fff; +} + +@media screen and (max-width: 750px) { + #root { + max-width: 100%; + } + + article table, article ul { + flex: 100%; + width: 100%; + margin: 0 0 10px 0; + } +} From 958e7bf8c0c89d202bcf5ba4d53be48dca2f3d81 Mon Sep 17 00:00:00 2001 From: Ahmad Kawara Date: Wed, 7 Nov 2018 21:47:07 +0100 Subject: [PATCH 3/6] Implements naming convention. --- homework/src/index.js | 65 +++++++++++++++++++----------------------- homework/src/style.css | 5 ++-- 2 files changed, 32 insertions(+), 38 deletions(-) diff --git a/homework/src/index.js b/homework/src/index.js index e1b520401..0058e4c60 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -3,6 +3,11 @@ function main(url) { const root = document.getElementById("root"); + const header = createEl("header", root, { + text: "" + }); + const article = createEl("article", root); + const select = createEl("select", header); function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); @@ -31,48 +36,36 @@ function main(url) { return elem; } - fetchJSON(url, (err, data) => { + fetchJSON(url, (err, repos) => { if (err === null) { - const header = createEl("header", root); - createEl("h3", header, { text: "HYF Repositories" }); - const select = createEl("select", header); - let names = []; - data.forEach(el => { - let name = el.name.charAt(0).toUpperCase() + el.name.slice(1); - names.push(name); - }); - names.sort(); - for (let i = 0; i < names.length; i++) { - let optn = createEl("option", select, { text: names[i] }); - optn.value = i; - } - repos(data, select); + repos.sort((a, b) => a.name.localeCompare(b.name)) + .forEach((repo, i) => { + let nm = repo.name.charAt(0).toUpperCase() + repo.name.slice(1); + createEl("option", select, { text: nm }).value = i; + }); + renderRepo(repos, select.value); } else { + root.innerHTML = ""; createEl("div", root, err); } }); - function repos(data, select) { - let article = createEl("article", root); + function renderRepo(repos, index) { + article.innerHTML = ""; + repoDetails(repos[index]); + contributors(repos[index].contributors_url); - select.addEventListener("change", onSelect); - function onSelect() { - let v1 = select.options[select.selectedIndex].text.toUpperCase(); - for (let i = 0; i < data.length; i++) { - let v2 = data[i].name.toUpperCase(); - if (v1 === v2) { - article.innerHTML = ""; - repoDetails(data[i], article); - contributors(data[i].contributors_url, article); - } - } - } - onSelect(); + select.addEventListener("change", () => { + article.innerHTML = ""; + repoDetails(repos[select.value]); + contributors(repos[select.value].contributors_url); + }); } - function repoDetails(details, parent) { - let table = createEl("table", parent); + function repoDetails(details) { + + const table = createEl("table", article); let tr = createEl("tr", table); createEl("th", tr, { text: "Repository:" }); let td = createEl("td", tr); @@ -85,10 +78,10 @@ function main(url) { createEl("tr", table, { text: `Updated:${details.updated_at}` }); } - function contributors(url, parent) { + function contributors(url) { fetchJSON(url, (err, info) => { if (err === null) { - let ul = createEl("ul", parent); + const ul = createEl("ul", article); for (let i = 0; i < info.length; i++) { let li = createEl("li", ul); let a = createEl("a", li, { id: "href", val: info[i].html_url }); @@ -97,8 +90,8 @@ function main(url) { a.innerHTML += `

${info[i].login}

${info[i].contributions}`; } } else { - parent.innerHTML = ""; - createEl("div", parent, err); + article.innerHTML = ""; + createEl("div", article, err); } }); } diff --git a/homework/src/style.css b/homework/src/style.css index d486ab0d0..a00bb8b57 100644 --- a/homework/src/style.css +++ b/homework/src/style.css @@ -18,9 +18,10 @@ header { width: 100%; background-color: #3f51b5; } -header h3 { +header label { display: inline-block; - margin: 20px; + margin: 17px; + font-size: 20px; color: #fff; } header select { From d3e5e0a461ac4b6867295531ccd9e24047155585 Mon Sep 17 00:00:00 2001 From: Ahmad Kawara Date: Thu, 8 Nov 2018 20:27:50 +0100 Subject: [PATCH 4/6] fixes the bugs that Jim refered to. --- homework/src/index.js | 61 +++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 26 deletions(-) diff --git a/homework/src/index.js b/homework/src/index.js index 0058e4c60..819f164de 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -3,10 +3,9 @@ function main(url) { const root = document.getElementById("root"); - const header = createEl("header", root, { - text: "" - }); + const header = createEl("header", root); const article = createEl("article", root); + createEl("label", header, { txt: "HYF Repositories" }); const select = createEl("select", header); function fetchJSON(url, cb) { @@ -14,24 +13,27 @@ function main(url) { xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = () => { - if (xhr.status === 200) { + if (xhr.status < 400) { cb(null, xhr.response); } else { - cb({ text: `Error: ${xhr.status} - ${xhr.statusText}`, id: "id", val: "error" }); + cb(new Error(`Network Error: ${xhr.status} - ${xhr.statusText}`)); } }; xhr.onerror = () => { - cb({ text: "Network request failed", id: "id", val: "error" }); + cb(new Error(`Network request failed`)); }; xhr.send(); } - function createEl(name, parent, obj) { + function createEl(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); - if (obj) { - if (obj.text) { elem.innerHTML = obj.text; } - if (obj.id) { elem.setAttribute(obj.id, obj.val); } + for (let key in options) { + if (key === "txt") { + elem.innerText = options.txt; + } else { + elem.setAttribute(key, options[key]); + } } return elem; } @@ -41,12 +43,12 @@ function main(url) { repos.sort((a, b) => a.name.localeCompare(b.name)) .forEach((repo, i) => { let nm = repo.name.charAt(0).toUpperCase() + repo.name.slice(1); - createEl("option", select, { text: nm }).value = i; + createEl("option", select, { txt: nm, value: i }); }); renderRepo(repos, select.value); } else { root.innerHTML = ""; - createEl("div", root, err); + createEl("div", root, { txt: err.message, id: "error" }); } }); @@ -67,31 +69,38 @@ function main(url) { const table = createEl("table", article); let tr = createEl("tr", table); - createEl("th", tr, { text: "Repository:" }); + createEl("th", tr, { txt: "Repository:" }); let td = createEl("td", tr); - let a = createEl("a", td, { text: details.name, id: "href", val: details.html_url }); - a.setAttribute("target", "_blank"); + createEl("a", td, { + txt: details.name, href: details.html_url, target: "_blank" + }); + if (details.description) { - createEl("tr", table, { text: `Description:${details.description}` }); + createEl("tr", table).innerHTML = + `Description:${details.description}`; } - createEl("tr", table, { text: `Forks:${details.forks_count}` }); - createEl("tr", table, { text: `Updated:${details.updated_at}` }); + createEl("tr", table).innerHTML = + `Forks:${details.forks_count}`; + createEl("tr", table).innerHTML = + `Updated:${details.updated_at}`; } function contributors(url) { - fetchJSON(url, (err, info) => { + fetchJSON(url, (err, infos) => { if (err === null) { const ul = createEl("ul", article); - for (let i = 0; i < info.length; i++) { + infos.forEach(info => { let li = createEl("li", ul); - let a = createEl("a", li, { id: "href", val: info[i].html_url }); - a.setAttribute("target", "_blank"); - createEl("img", a, { id: "src", val: info[i].avatar_url }); - a.innerHTML += `

${info[i].login}

${info[i].contributions}`; - } + let a = createEl("a", li, { + href: info.html_url, target: "_blank" + }); + createEl("img", a, { src: info.avatar_url }); + createEl("p", a, { txt: info.login }); + createEl("span", a, { txt: info.contributions }); + }); } else { article.innerHTML = ""; - createEl("div", article, err); + createEl("div", article, { txt: err.message, id: "error" }); } }); } From 29056776328986c8bee9b7c9d421ab41f8c8754b Mon Sep 17 00:00:00 2001 From: Ahmad Kawara Date: Thu, 8 Nov 2018 20:48:09 +0100 Subject: [PATCH 5/6] Change status condition. --- homework/src/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/homework/src/index.js b/homework/src/index.js index 819f164de..6fe723f0f 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -13,7 +13,7 @@ function main(url) { xhr.open('GET', url); xhr.responseType = 'json'; xhr.onload = () => { - if (xhr.status < 400) { + if (xhr.status === 200) { cb(null, xhr.response); } else { cb(new Error(`Network Error: ${xhr.status} - ${xhr.statusText}`)); @@ -105,7 +105,6 @@ function main(url) { }); } - } const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; From 27ec181fd954268096034d20ea1401449ceb9105 Mon Sep 17 00:00:00 2001 From: Ahmad Kawara <39919017+kawaraa@users.noreply.github.com> Date: Mon, 12 Nov 2018 00:28:09 +0100 Subject: [PATCH 6/6] Update index.js --- homework/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/src/index.js b/homework/src/index.js index 6fe723f0f..6dcd9dcc1 100644 --- a/homework/src/index.js +++ b/homework/src/index.js @@ -1,4 +1,4 @@ -"use strick"; +"use strict"; function main(url) {