From 2ed4ab30be746e649b0b33da5c15a7f2694f9748 Mon Sep 17 00:00:00 2001 From: enwer Date: Fri, 24 Jan 2020 21:52:33 +0100 Subject: [PATCH 1/6] js3w1-ex --- Week1/homework/js-exercises/dogGalary.css | 16 ++++++++ Week1/homework/js-exercises/dogGalary.html | 44 ++++++++++++++++++++++ Week1/homework/js-exercises/dogGalary.js | 34 +++++++++++++++++ Week1/homework/js-exercises/humor.html | 13 +++++++ Week1/homework/js-exercises/humor.js | 44 ++++++++++++++++++++++ Week1/homework/js-exercises/whoIsHere.html | 14 +++++++ Week1/homework/js-exercises/whoIsHere.js | 32 ++++++++++++++++ 7 files changed, 197 insertions(+) create mode 100644 Week1/homework/js-exercises/dogGalary.css create mode 100644 Week1/homework/js-exercises/dogGalary.html create mode 100644 Week1/homework/js-exercises/dogGalary.js create mode 100644 Week1/homework/js-exercises/humor.html create mode 100644 Week1/homework/js-exercises/humor.js create mode 100644 Week1/homework/js-exercises/whoIsHere.html create mode 100644 Week1/homework/js-exercises/whoIsHere.js diff --git a/Week1/homework/js-exercises/dogGalary.css b/Week1/homework/js-exercises/dogGalary.css new file mode 100644 index 000000000..a8ac19e05 --- /dev/null +++ b/Week1/homework/js-exercises/dogGalary.css @@ -0,0 +1,16 @@ +img { + width: 300px; + height: 200px; +} +ul li { + list-style-type: none; +} +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +button { + margin: 20px; +} diff --git a/Week1/homework/js-exercises/dogGalary.html b/Week1/homework/js-exercises/dogGalary.html new file mode 100644 index 000000000..1b92b9b4e --- /dev/null +++ b/Week1/homework/js-exercises/dogGalary.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + +

XML & Axios Dog Pictures

+ + + +

+ + +

+ + + + + +

+ diff --git a/Week1/homework/js-exercises/dogGalary.js b/Week1/homework/js-exercises/dogGalary.js new file mode 100644 index 000000000..758ed64bd --- /dev/null +++ b/Week1/homework/js-exercises/dogGalary.js @@ -0,0 +1,34 @@ +'use strict'; +const xBtn = document.getElementById('x'); +const xPic = document.querySelector('#xPic'); + +// XML + +function xDog() { + const XHR = new XMLHttpRequest(); + XHR.onreadystatechange = function() { + if (XHR.readyState == 4 && XHR.status == 200) { + console.log(XHR.responseText); + const result = JSON.parse(XHR.responseText); + xPic.src = result.message; + } + }; + const url = 'https://dog.ceo/api/breeds/image/random'; + XHR.open('GET', url); + XHR.send(); +} + +// axios + +const axiBtn = document.getElementById('axiBtn'); +const axiPic = document.querySelector('#axiPic'); + +function Axios() { + axios + .get('https://dog.ceo/api/breeds/image/random') + .then(data => { + console.log(data); + axiPic.setAttribute('src', data.data.message); + }) + .catch(err => console.error(err)); +} diff --git a/Week1/homework/js-exercises/humor.html b/Week1/homework/js-exercises/humor.html new file mode 100644 index 000000000..fff0a0ab1 --- /dev/null +++ b/Week1/homework/js-exercises/humor.html @@ -0,0 +1,13 @@ + + + + + + + Document + + + + + + diff --git a/Week1/homework/js-exercises/humor.js b/Week1/homework/js-exercises/humor.js new file mode 100644 index 000000000..bacae0812 --- /dev/null +++ b/Week1/homework/js-exercises/humor.js @@ -0,0 +1,44 @@ +'use strict'; +function a(url) { + axios.get(url).then(data => console.log(data)); +} +const u = 'https://xkcd.now.sh/?comic=614'; +a(u); + +let getJSON = (url, callback) => { + let xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.responseType = 'json'; + + xhr.onload = () => { + let status = xhr.status; + + if (status == 200) { + callback(null, xhr.response); + console.log(xhr.response); + const img = document.createElement('img'); + document.body.appendChild(img); + img.src = xhr.response.img; + img.width = '300'; + img.height = '500'; + img.style.marginLeft = '20px'; + } else { + callback(status); + } + }; + + xhr.send(); +}; + +getJSON('https://xkcd.now.sh/?comic=614', (err, data) => { + if (err != null) { + console.error(err); + } else { + console.log(data); + const img = document.createElement('img'); + document.body.appendChild(img); + img.src = data.img; + img.width = '300'; + img.height = '500'; + } +}); diff --git a/Week1/homework/js-exercises/whoIsHere.html b/Week1/homework/js-exercises/whoIsHere.html new file mode 100644 index 000000000..a228b9b14 --- /dev/null +++ b/Week1/homework/js-exercises/whoIsHere.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + diff --git a/Week1/homework/js-exercises/whoIsHere.js b/Week1/homework/js-exercises/whoIsHere.js new file mode 100644 index 000000000..4a775fa44 --- /dev/null +++ b/Week1/homework/js-exercises/whoIsHere.js @@ -0,0 +1,32 @@ +'use strict'; +function a(url) { + axios.get(url).then(data => console.log(data)); +} +const u = 'https://www.randomuser.me/api'; +a(u); + +let getJSON = (url, callback) => { + let xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.responseType = 'json'; + + xhr.onload = () => { + let status = xhr.status; + + if (status == 200) { + callback(null, xhr.response); + } else { + callback(status); + } + }; + + xhr.send(); +}; + +getJSON('https://www.randomuser.me/api', (err, data) => { + if (err != null) { + console.error(err); + } else { + console.log(data); + } +}); From c5acf430379215e23816bff030ed4b038578317e Mon Sep 17 00:00:00 2001 From: enwer Date: Sat, 25 Jan 2020 20:43:14 +0100 Subject: [PATCH 2/6] JS3 W1 project Enwer --- Week1/homework/js-exercises/project/hyf.png | Bin 0 -> 9116 bytes .../homework/js-exercises/project/index.html | 27 ++++++ Week1/homework/js-exercises/project/index.js | 81 ++++++++++++++++++ Week1/homework/js-exercises/project/style.css | 62 ++++++++++++++ 4 files changed, 170 insertions(+) create mode 100644 Week1/homework/js-exercises/project/hyf.png create mode 100644 Week1/homework/js-exercises/project/index.html create mode 100644 Week1/homework/js-exercises/project/index.js create mode 100644 Week1/homework/js-exercises/project/style.css diff --git a/Week1/homework/js-exercises/project/hyf.png b/Week1/homework/js-exercises/project/hyf.png new file mode 100644 index 0000000000000000000000000000000000000000..76bc5a13b4a53ea97a6c09ca5fe399f40ab20e4e GIT binary patch literal 9116 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 GkN*WepL25n literal 0 HcmV?d00001 diff --git a/Week1/homework/js-exercises/project/index.html b/Week1/homework/js-exercises/project/index.html new file mode 100644 index 000000000..134bde38a --- /dev/null +++ b/Week1/homework/js-exercises/project/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + HYF-GITHUB + + + + + +

+ + + diff --git a/Week1/homework/js-exercises/project/index.js b/Week1/homework/js-exercises/project/index.js new file mode 100644 index 000000000..7b4792ab6 --- /dev/null +++ b/Week1/homework/js-exercises/project/index.js @@ -0,0 +1,81 @@ +'use strict'; +{ + function fetchJSON(url, cb) { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status >= 200 && xhr.status <= 299) { + 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 createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.entries(options).forEach(([key, value]) => { + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; + } + function repoDetails(repo, ul) { + const li = createAndAppend('li', ul); + const table = createAndAppend('table', li); + + //tr-repository + let tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Repository: ' }); + let td = createAndAppend('td', tr); + createAndAppend('a', td, { + href: repo.html_url, + text: repo.name, + target: '_blank', + }); + + //tr-description + tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Description: ' }); + td = createAndAppend('td', tr, { text: repo.description }); + + //tr-forks + tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Forks: ' }); + td = createAndAppend('td', tr, { text: repo.forks }); + + //tr-update + tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Updated: ' }); + td = createAndAppend('td', tr, { text: repo.updated_at }); + } + + function main(url) { + createAndAppend('header', root, { text: 'HYF Repositories' }); + fetchJSON(url, (err, repos) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { + text: err.message, + class: 'alert-error', + }); + return; + } + const ul = createAndAppend('ul', root); + repos.sort((curRepo, nextRepo) => curRepo.name.localeCompare(nextRepo.name)) + repos.forEach(repo => repoDetails(repo, ul)); + }); + } + + const HYF_REPOS_URL = + 'https://api.github.com/orgs/HackYourFuture/repos?per_page=10'; + + window.onload = () => main(HYF_REPOS_URL); +} diff --git a/Week1/homework/js-exercises/project/style.css b/Week1/homework/js-exercises/project/style.css new file mode 100644 index 000000000..185dce1bb --- /dev/null +++ b/Week1/homework/js-exercises/project/style.css @@ -0,0 +1,62 @@ +* { + margin: 0; + padding: 0; +} + +.alert-error { + color: brown; + background-color: #f8d7da; + padding: 10px; + margin: 2px; + box-shadow: 5px 10px 18px #eee; +} + +#root { + width: 80%; + margin: 0 10%; +} + +header { + color: #fff; + background-color: #3f51b5; + font-size: 25px; + padding: 20px; +} + +li { + border: 2px solid #ccc; + box-shadow: 5px 10px 18px #eee; + list-style: none; + margin: 3px; + padding: 15px; +} +@media only screen and (max-width: 610px) { + /* For mobile phones: */ + #root { + width: 100%; + margin: 0 2%; + display: flex; + flex-direction: column; + } + + header { + text-align: center; + } + td { + margin: 1%; + padding: 2%; + } +} + +@media only screen and (min-width: 992px) { + #root { + width: 90%; + margin: 0 2%; + font-size: 15px; + } + + td { + margin: 1%; + padding: 1%; + } +} From 5bac9b0bb6286bf707d22a617643aed1a4290527 Mon Sep 17 00:00:00 2001 From: enwer Date: Sat, 25 Jan 2020 23:39:32 +0100 Subject: [PATCH 3/6] Adyen Session --- Week1/homework/js-exercises/.DS_Store | Bin 0 -> 6148 bytes Week1/homework/js-exercises/Adyen.txt | 12 ++++++++++++ Week1/homework/js-exercises/humor.js | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 Week1/homework/js-exercises/.DS_Store create mode 100644 Week1/homework/js-exercises/Adyen.txt diff --git a/Week1/homework/js-exercises/.DS_Store b/Week1/homework/js-exercises/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7b3f861432eac4ae70946fcd664661e712884bdf GIT binary patch literal 6148 zcmeHKOHRWu5S@WaL}HUAOJAWk2vs;iFM!%25NebNmAzLSg4=KpuD~65&oiKeX2Aj> zgk~iBjXfVbPm1jk5nVm*mLj!?RA@w{G9#RxHJ!Ng0;na&jcnzxzg@1k{Y;|2IK{o6 z$siBX%e{>D-wmVfe(~t~w%zRe4Lqvnr}}kxd$~N$)AhS=cnx=CYqHvC;ZTEtU?3O> z27-YfX8?CLr8+l^J{SlFf`Ly4cs?XFV&j+%%h7?ZlmI|Jql-XiEy0-N*f?fGSRiVl zKnqnbG1S5_pWLr;%!U>&>cxlp${)pxmer9z6?f6bF#2F17??6}YQviM{}q0j*&=@$ z5~E-s82D!l=%QV>D}0pStw*27yEdU+qfzLWsX(Al9swBe9Jwe)vnT5CYaFv7vv9tI Q1LGl32#GEj_yq>u0idcb(f|Me literal 0 HcmV?d00001 diff --git a/Week1/homework/js-exercises/Adyen.txt b/Week1/homework/js-exercises/Adyen.txt new file mode 100644 index 000000000..19073a772 --- /dev/null +++ b/Week1/homework/js-exercises/Adyen.txt @@ -0,0 +1,12 @@ +Write down 2 insights you’ve gained listening to the developers’ personal stories: + +1. They had got through what we are going through in the past. +2. we can always ask, search, learn, we are not expected to be know everything. + +Summarize “company life as a professional developer” in your view (max. 150 words): +Not much feeling for now. In short, they have professionally educated background, +familier with basic logic, structure,problem solving method. + + +Write down 2 soft skills you need to work on: +communication skills, be straight to tell the problem. don’t be shy, just try. diff --git a/Week1/homework/js-exercises/humor.js b/Week1/homework/js-exercises/humor.js index bacae0812..63b5b49ae 100644 --- a/Week1/homework/js-exercises/humor.js +++ b/Week1/homework/js-exercises/humor.js @@ -1,4 +1,4 @@ -'use strict'; +'use strict' function a(url) { axios.get(url).then(data => console.log(data)); } From 8f3567772af676b237559590127237efc574669f Mon Sep 17 00:00:00 2001 From: enwer Date: Sun, 2 Feb 2020 00:41:33 +0100 Subject: [PATCH 4/6] JS3 W2 Enwer --- Week2/homework/Hack Your Repo2/.DS_Store | Bin 0 -> 6148 bytes Week2/homework/Hack Your Repo2/repo.html | 37 ++++++++ Week2/homework/Hack Your Repo2/repo.js | 104 +++++++++++++++++++++++ Week2/homework/Hack Your Repo2/style.css | 42 +++++++++ 4 files changed, 183 insertions(+) create mode 100644 Week2/homework/Hack Your Repo2/.DS_Store create mode 100644 Week2/homework/Hack Your Repo2/repo.html create mode 100644 Week2/homework/Hack Your Repo2/repo.js create mode 100644 Week2/homework/Hack Your Repo2/style.css diff --git a/Week2/homework/Hack Your Repo2/.DS_Store b/Week2/homework/Hack Your Repo2/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 + + + + + + + + + + + + HYF-GITHUB + + + + + + +

+ +

+ + + + \ No newline at end of file diff --git a/Week2/homework/Hack Your Repo2/repo.js b/Week2/homework/Hack Your Repo2/repo.js new file mode 100644 index 000000000..a713c7f6a --- /dev/null +++ b/Week2/homework/Hack Your Repo2/repo.js @@ -0,0 +1,104 @@ +'use strict'; +{ + function fetchJSON(url) { + return fetch(url).then(data => data.json()); + } + function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.entries(options).forEach(([key, value]) => { + if (key === 'text') { + elem.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; + } + function repoDetails(repo, ul) { + const li = createAndAppend('li', ul); + const table = createAndAppend('table', li); + //tr-repository + let tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Repository: ' }); + let td = createAndAppend('td', tr); + createAndAppend('a', td, { + href: repo.html_url, + text: repo.name, + target: '_blank', + }); + //tr-description + tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Description: ' }); + td = createAndAppend('td', tr, { text: repo.description }); + //tr-forks + tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Forks: ' }); + td = createAndAppend('td', tr, { text: repo.forks }); + //tr-update + tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: 'Updated: ' }); + td = createAndAppend('td', tr, { text: repo.updated_at }); + } + function contributorDetail(url) { + const select = document.createElement('select'); + fetch(url).then((response) => { return response.json() }).then((data) => { + const byName = data; + byName.sort((curRepo, nextRepo) => + curRepo.name.localeCompare(nextRepo.name), + ); + byName.forEach((repo, index) => { + let opt = document.createElement('option'); + opt.value = index; + opt.innerText = repo.name; + select.appendChild(opt); + }); + select.addEventListener('change', () => { + const repo = document.getElementById('repository'); + const contri = document.getElementById('contributor'); + console.log("event listener called"); + while (repo.hasChildNodes()) { + repo.removeChild(repo.lastChild); + } + while (contri.hasChildNodes()) { + contri.removeChild(contri.lastChild); + } + fetch(`https://api.github.com/repos/HackYourFuture/${ + byName[select.value].name + }/contributors`).then((response) => { return response.json() }) + .then((byName) => { + byName.forEach(j => { + const contriDiv = document.createElement('div'); + contriDiv.setAttribute('class', 'contriDiv'); + const h5 = document.createElement('h5'); + const h4 = document.createElement('h4'); + const img = document.createElement('img'); + h5.innerText = j.login; + h4.innerText = j.contributions; + img.setAttribute('src', j.avatar_url); + img.width = '100'; + contriDiv.appendChild(img); + contriDiv.appendChild(h5); + contriDiv.appendChild(h4); + contri.appendChild(contriDiv); + }); + }); + const ul = createAndAppend('ul', repo); + repoDetails(byName[select.value], ul) + }); + }); + const x = document.getElementById("dropdown"); + x.appendChild(select); + const con = document.getElementById("contributor"); + while (con.hasChildNodes()) { + con.removeChild(con.lastChild); + } + // con.appendChild(d); + } + function main(url) { + contributorDetail(url); + } + const HYF_REPOS_URL = + 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + window.onload = () => main(HYF_REPOS_URL); +} \ No newline at end of file diff --git a/Week2/homework/Hack Your Repo2/style.css b/Week2/homework/Hack Your Repo2/style.css new file mode 100644 index 000000000..9b4208dd4 --- /dev/null +++ b/Week2/homework/Hack Your Repo2/style.css @@ -0,0 +1,42 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: #eee; +} +main { + width: 96%; + margin: 1%; +} +header { + color: #fff; + background-color: #3f51b5; + font-size: 25px; + padding: 20px; +} + +ul { + list-style: none; +} +select { + margin-left: 50px; +} + +section { + width: 100%; + padding: 10px; + margin: 2%; + background-color: #fff; + padding: 10px; +} + +.contriDiv { + padding: 5px; + border-bottom: 2px solid #eee; + margin: 10px 0; + display: flex; + justify-content: space-between; + +} From fbc8d69ebacc7e9f10b91ceab0345d2e83c3638b Mon Sep 17 00:00:00 2001 From: enwer Date: Sat, 8 Feb 2020 23:15:57 +0100 Subject: [PATCH 5/6] js3 w3 part1 Enwer --- Week3/homework/Hack Your Repo2/.DS_Store | Bin 0 -> 6148 bytes Week3/homework/Hack Your Repo2/awaitW3/App.js | 56 ++++++++ .../awaitW3/ContributorsView.js | 28 ++++ .../Hack Your Repo2/awaitW3/ErrorView.js | 31 +++++ .../Hack Your Repo2/awaitW3/HeaderView.js | 46 +++++++ .../homework/Hack Your Repo2/awaitW3/Model.js | 53 ++++++++ .../Hack Your Repo2/awaitW3/Observable.js | 20 +++ .../Hack Your Repo2/awaitW3/RepoView.js | 28 ++++ .../homework/Hack Your Repo2/awaitW3/Util.js | 27 ++++ .../Hack Your Repo2/awaitW3/await.html | 33 +++++ .../Hack Your Repo2/awaitW3/style.css | 41 ++++++ Week3/homework/Hack Your Repo2/repo.html | 38 ++++++ Week3/homework/Hack Your Repo2/repo.js | 121 ++++++++++++++++++ Week3/homework/Hack Your Repo2/style.css | 41 ++++++ 14 files changed, 563 insertions(+) create mode 100644 Week3/homework/Hack Your Repo2/.DS_Store create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/App.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/ContributorsView.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/ErrorView.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/HeaderView.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/Model.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/Observable.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/RepoView.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/Util.js create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/await.html create mode 100644 Week3/homework/Hack Your Repo2/awaitW3/style.css create mode 100644 Week3/homework/Hack Your Repo2/repo.html create mode 100644 Week3/homework/Hack Your Repo2/repo.js create mode 100644 Week3/homework/Hack Your Repo2/style.css diff --git a/Week3/homework/Hack Your Repo2/.DS_Store b/Week3/homework/Hack Your Repo2/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 new App(accounts[ACCOUNT_KEY]); +} diff --git a/Week3/homework/Hack Your Repo2/awaitW3/ContributorsView.js b/Week3/homework/Hack Your Repo2/awaitW3/ContributorsView.js new file mode 100644 index 000000000..58cb2b984 --- /dev/null +++ b/Week3/homework/Hack Your Repo2/awaitW3/ContributorsView.js @@ -0,0 +1,28 @@ +'use strict'; + +{ + const { createAndAppend } = window.Util; + + class ContributorsView { + constructor(container) { + this.container = container; + } + + update(state) { + if (!state.error) { + this.render(state.contributors); + } + } + + /** + * Renders the list of contributors + * @param {Object[]} contributors An array of contributor objects + */ + render(contributors) { + // TODO: replace this comment and the console.log with your own code + console.log('ContributorsView', contributors); + } + } + + window.ContributorsView = ContributorsView; +} diff --git a/Week3/homework/Hack Your Repo2/awaitW3/ErrorView.js b/Week3/homework/Hack Your Repo2/awaitW3/ErrorView.js new file mode 100644 index 000000000..67ad53087 --- /dev/null +++ b/Week3/homework/Hack Your Repo2/awaitW3/ErrorView.js @@ -0,0 +1,31 @@ +'use strict'; + +{ + const { createAndAppend } = window.Util; + + class ErrorView { + constructor(container) { + this.container = container; + } + + update(state) { + this.render(state.error); + } + + /** + * Renders an error for the 'error' message type. + * @param {Error} error An Error object + */ + render(error) { + this.container.innerHTML = ''; + if (error) { + createAndAppend('div', this.container, { + text: error.message, + class: 'alert alert-error', + }); + } + } + } + + window.ErrorView = ErrorView; +} diff --git a/Week3/homework/Hack Your Repo2/awaitW3/HeaderView.js b/Week3/homework/Hack Your Repo2/awaitW3/HeaderView.js new file mode 100644 index 000000000..11f9c8971 --- /dev/null +++ b/Week3/homework/Hack Your Repo2/awaitW3/HeaderView.js @@ -0,0 +1,46 @@ +'use strict'; + +{ + const { createAndAppend } = window.Util; + + class HeaderView { + constructor(account, header, fetchData) { + this.account = account; + this.header = header; + this.fetchData = fetchData; + this.select = null; + } + + update(state) { + if (!this.select && !state.error) { + this.render(state.repos); + } + } + + /** + * Renders the data for the 'select' message type. Create a