From 3a6fc4ed387c0b7f1e060dcd348defc8aa1b2be7 Mon Sep 17 00:00:00 2001 From: A T Date: Fri, 9 Aug 2019 12:18:15 +0200 Subject: [PATCH 1/4] select --- .vscode/settings.json | 3 ++- homework/index.html | 46 +++++++++++++++++++++++++------------------ homework/index.js | 17 +++++++++++++--- homework/style.css | 13 ++++++++++++ 4 files changed, 56 insertions(+), 23 deletions(-) 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/index.html b/homework/index.html index 9c8f80c1a..e0551797c 100644 --- a/homework/index.html +++ b/homework/index.html @@ -1,23 +1,31 @@ + + + + + + + + + + HYF-GITHUB + + + - - - - - - - - - - HYF-GITHUB - - - + + - -
- - - - \ No newline at end of file + + + + diff --git a/homework/index.js b/homework/index.js index d3a97645e..f62c0fe98 100644 --- a/homework/index.js +++ b/homework/index.js @@ -31,13 +31,24 @@ } function main(url) { - fetchJSON(url, (err, data) => { + fetchJSON(url, (err, repositories) => { const root = document.getElementById('root'); + console.log(err, repositories); if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + const div = document.createElement('div'); + div.textContent = err.message; + div.setAttribute('class', 'alert-error'); + root.appendChild(div); + return; } + createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) }); + + /* //getting the names + repositories.forEach(repo => { + console.log(repo.name); + createAndAppend('div', root, { text: repo.name }); + }); */ }); } diff --git a/homework/style.css b/homework/style.css index a8985a8a5..acd2ce189 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,16 @@ +body { + background-color: seagreen; + color: whitesmoke; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 1rem; + padding-right: 10px; +} + .alert-error { color: red; +} + +select { + font-size: .9rem; + padding: 2px 5px; } \ No newline at end of file From 195e99e6dd0341b75fdfffb9ab6a75f5b8ce081b Mon Sep 17 00:00:00 2001 From: A T Date: Fri, 9 Aug 2019 12:56:07 +0200 Subject: [PATCH 2/4] some select css --- homework/index.html | 16 ++++++++++------ homework/index.js | 4 ++-- homework/style.css | 14 +++++++++++--- 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/homework/index.html b/homework/index.html index e0551797c..27b55263e 100644 --- a/homework/index.html +++ b/homework/index.html @@ -16,16 +16,20 @@ - - - - - +
+ +
+ + + + +

The repositories will be displayed here

+ diff --git a/homework/index.js b/homework/index.js index f62c0fe98..99d06a5fd 100644 --- a/homework/index.js +++ b/homework/index.js @@ -47,8 +47,8 @@ /* //getting the names repositories.forEach(repo => { console.log(repo.name); - createAndAppend('div', root, { text: repo.name }); - }); */ + createAndAppend('div', root, { text: repo.name });*/ + }); }); } diff --git a/homework/style.css b/homework/style.css index acd2ce189..0ba81fb3a 100644 --- a/homework/style.css +++ b/homework/style.css @@ -1,6 +1,12 @@ +header { + background-color: rgb(116, 56, 13); + color: white; + padding: 1rem; +} + body { - background-color: seagreen; - color: whitesmoke; + 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: 10px; @@ -12,5 +18,7 @@ body { select { font-size: .9rem; - padding: 2px 5px; + padding: 4px 25px; + margin-left: 25px; + border-radius: 20px; } \ No newline at end of file From e3b7592645c178dfc2b3fd776e117d0da342941b Mon Sep 17 00:00:00 2001 From: A T Date: Fri, 16 Aug 2019 16:49:21 +0200 Subject: [PATCH 3/4] starting to make it work with js! --- homework/index.html | 19 +++++++++------- homework/index.js | 55 ++++++++++++++++++++++++++++++++------------- homework/style.css | 18 ++++++++++++++- 3 files changed, 68 insertions(+), 24 deletions(-) diff --git a/homework/index.html b/homework/index.html index 27b55263e..0acb52925 100644 --- a/homework/index.html +++ b/homework/index.html @@ -17,19 +17,22 @@
- - + etc + -->
- + -

The repositories will be displayed here

- + +
+
+ + + diff --git a/homework/index.js b/homework/index.js index 99d06a5fd..fb1ba1e07 100644 --- a/homework/index.js +++ b/homework/index.js @@ -31,24 +31,46 @@ } function main(url) { - fetchJSON(url, (err, repositories) => { - const root = document.getElementById('root'); - console.log(err, repositories); + fetchJSON(url, (err, data) => { + const root = document.getElementById('root','forRepoBlock', 'forContributorsBlock'); if (err) { createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - const div = document.createElement('div'); - div.textContent = err.message; - div.setAttribute('class', 'alert-error'); - root.appendChild(div); - return; - } - createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) }); + } else { + //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); - /* //getting the names - repositories.forEach(repo => { - console.log(repo.name); - createAndAppend('div', root, { text: repo.name });*/ - }); + const contribsUrl = repo.contributors_url; + fetchJSON(contribsUrl, (err, contribData) => { + contribData.forEach(contributor => { + createAndAppend('div', contribs, { text: contributor.login }); + }); + }); + }); + } }); } @@ -56,3 +78,6 @@ window.onload = () => main(HYF_REPOS_URL); } + + + diff --git a/homework/style.css b/homework/style.css index 0ba81fb3a..c8ef0bf11 100644 --- a/homework/style.css +++ b/homework/style.css @@ -9,14 +9,30 @@ body { color: black; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 1rem; - padding-right: 10px; + 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; From e8f9896e1bf69a6bb24c355dd9948800d909e762 Mon Sep 17 00:00:00 2001 From: AaaaT Date: Mon, 19 Aug 2019 09:20:40 +0200 Subject: [PATCH 4/4] Create README.md --- homework/README.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 homework/README.md 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/