diff --git a/Week2/homework/hyf.png b/Week2/homework/hyf.png new file mode 100644 index 000000000..76bc5a13b Binary files /dev/null and b/Week2/homework/hyf.png differ diff --git a/Week2/homework/index.html b/Week2/homework/index.html new file mode 100644 index 000000000..9c8f80c1a --- /dev/null +++ b/Week2/homework/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + HYF-GITHUB + + + + + +
+ + + + \ No newline at end of file diff --git a/Week2/homework/index.js b/Week2/homework/index.js new file mode 100644 index 000000000..3886cbac9 --- /dev/null +++ b/Week2/homework/index.js @@ -0,0 +1,54 @@ +'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 renderRepoDetails(repo, ul) { + createAndAppend('li', ul, { text: repo.name }); + } + + function main(url) { + 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.forEach(repo => renderRepoDetails(repo, ul)); + }); + } + + const HYF_REPOS_URL = + 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + window.onload = () => main(HYF_REPOS_URL); +} diff --git a/Week2/homework/style.css b/Week2/homework/style.css new file mode 100644 index 000000000..90d106051 --- /dev/null +++ b/Week2/homework/style.css @@ -0,0 +1,3 @@ +.alert-error { + color: red; +}