diff --git a/.vscode/settings.json b/.vscode/settings.json index f7a55df12..c2e11f417 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,5 +6,6 @@ "editor.tabSize": 2, "cSpell.words": [ "tabindex" - ] + ], + "workbench.colorCustomizations": {} } \ No newline at end of file diff --git a/homework/README.md b/homework/README.md new file mode 100644 index 000000000..ca3851b22 --- /dev/null +++ b/homework/README.md @@ -0,0 +1,2 @@ +The visual result-----> +https://aaaat.github.io/JavaScript3/homework/ diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..0acb52925 100644 --- a/homework/index.html +++ b/homework/index.html @@ -1,23 +1,38 @@ + + + + + + + + + + HYF-GITHUB + + + +
+
+ +
+ + + + + +
+
+ + - - - - - - - - - - HYF-GITHUB - - - - -
- - - \ No newline at end of file diff --git a/homework/index.js b/homework/index.js index d3a97645e..fb1ba1e07 100644 --- a/homework/index.js +++ b/homework/index.js @@ -32,11 +32,44 @@ function main(url) { fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); + const root = document.getElementById('root','forRepoBlock', 'forContributorsBlock'); if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + //createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + const select = createAndAppend('select', root); + createAndAppend('option', select, { text: 'Click here to choose a Repository' }); + data.forEach(repo => { + const name = repo.name; + createAndAppend('option', select, { text: name }); + }); + + const repoInfo = createAndAppend('div', forRepoBlock); + const contribs = createAndAppend('div', forContributorsBlock); + select.addEventListener('change', evt => { + const selectedRepo = evt.target.value; + const repo = data.filter(r => r.name == selectedRepo)[0]; + console.log(repo); + repoInfo.innerHTML = ''; + contribs.innerHTML = ''; + + const addInfo = (label, value) => { + const container = createAndAppend('div', repoInfo); + createAndAppend('span', container, { text: label }); + createAndAppend('span', container, { text: value }); + }; + addInfo('Name: ', repo.name); + addInfo('Desciption: ', repo.description); + addInfo('Number of forks: ', repo.forks); + addInfo('Updated: ', repo.updated_at); + + const contribsUrl = repo.contributors_url; + fetchJSON(contribsUrl, (err, contribData) => { + contribData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login }); + }); + }); + }); } }); } @@ -45,3 +78,6 @@ window.onload = () => main(HYF_REPOS_URL); } + + + diff --git a/homework/style.css b/homework/style.css index a8985a8a5..c8ef0bf11 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,40 @@ +header { + background-color: rgb(116, 56, 13); + color: white; + padding: 1rem; +} + +body { + background-color:rgb(197, 197, 197); + color: black; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + padding-right: 1px; +} + .alert-error { color: red; +} + + +select { + font-size: .9rem; + padding: 4px 25px; + margin-left: 10px; + border-radius: 20px; +} + +#forRepoBlock { + color: purple; + font-size: .9rem; + padding: 1px 25px; + margin-left: 2px; + border-radius: 20px; +} +#forContributorsBlock { + color: brown; + font-size: .9rem; + padding: 4px 25px; + margin-left: 25px; + border-radius: 20px; } \ No newline at end of file