From ce535c6ac4bab3699f05f7756d90b91af57cfdd9 Mon Sep 17 00:00:00 2001 From: AllouhM Date: Sun, 17 Jun 2018 02:45:53 +0200 Subject: [PATCH 1/2] Homework-week2-js3 --- .eslintrc.json | 47 +++++++++++++ Week2/HYFRepoPromise.css | 141 +++++++++++++++++++++++++++++++++++++++ Week2/HYFRepoPromise.js | 119 +++++++++++++++++++++++++++++++++ Week2/RepoPromise.html | 20 ++++++ 4 files changed, 327 insertions(+) create mode 100644 .eslintrc.json create mode 100644 Week2/HYFRepoPromise.css create mode 100644 Week2/HYFRepoPromise.js create mode 100644 Week2/RepoPromise.html diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 000000000..ae8189517 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,47 @@ +{ + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "node": true + }, + "parserOptions": { + "ecmaVersion": 2017, + "ecmaFeatures": { + "jsx": true + }, + "sourceType": "module" + }, + "extends": [ + "eslint:recommended" + ], + "rules": { + "no-const-assign": "warn", + "no-this-before-super": "warn", + "no-undef": "warn", + "no-unreachable": "warn", + "no-unused-vars": "warn", + "constructor-super": "warn", + "valid-typeof": "warn", + "no-var": "warn", + "prefer-const": "warn", + "no-multiple-empty-lines": "warn", + "eol-last": [ + "error", + "always" + ], + "no-console": "off", + "camelcase": "warn", + "eqeqeq": [ + "error", + "always", + { + "null": "ignore" + } + ], + "semi": [ + "warn", + "always" + ] + } +} \ No newline at end of file diff --git a/Week2/HYFRepoPromise.css b/Week2/HYFRepoPromise.css new file mode 100644 index 000000000..ea4a02c40 --- /dev/null +++ b/Week2/HYFRepoPromise.css @@ -0,0 +1,141 @@ +*{ + box-sizing:border-box; +} + +#root { + width: 100%; + +} +#selection-wrapper{ + margin-top:40px; + width : 100%; + height:100px; + background-color:dimgray; + text-align: center; + padding-top: 25px; + border:2px solid black; + border-radius: 25px; + font-family: 'Josefin Sans', sans-serif; + font-size: 2em; + box-shadow: 5px 2px 2px black; +} +#selections{ + width:30%; + height:30px; + font-size:18px; + font-family: 'Josefin Sans', sans-serif; + padding: 2px 10px 2px 15px ; + box-shadow: 7px 5px 5px rgb(0, 0, 0); + border-radius: 25px; +} +.main-wrapper{ + display: flex; + flex-wrap: wrap; +} +#errText{ + font-family: 'Josefin Sans', sans-serif; + font-size: 20px; +} +#repo-Info{ + + background-color:yellow; + margin: 40px 0 0 30px; + width:45%; + height:250px; + box-shadow: 10px 2px 2px rgba(0, 0, 0, 0.7); + border-radius: 25px; + padding:5px; + +} + +#repo-info-ul{ + list-style: none; + line-height: 35px; + font-family:'Josefin Sans', sans-serif; + font-size: 20px; +} +.cont-name-link{ + text-decoration: none; +} +#cont-info{ + background-color:orangered; + width:43%; + margin:40px 0 0 70px; + box-shadow: 10px 2px 2px rgba(0, 0, 0, 0.7); + border-radius: 25px; + +} +.section-name{ + margin:30px 0 0 30px; + font-family:'Josefin Sans', sans-serif; + font-size: 25px; +} +#cont-info-ul{ + margin-top:20px; + +} +#per-contributor{ + list-style: none; + display: flex; + padding-top:20px; +} +.contributor-image{ + width:50px; + height:50px; + border-radius: 50%; + margin:10px; +} + +#cont-name{ + width:120px; + margin:18px 35px 0 0 ; +} +.contributor-link{ + text-decoration: none; + font-family:'Josefin Sans', sans-serif; + font-size: 20px; +} +.Contributions-text{ + font-family:'Josefin Sans', sans-serif; + font-size: 20px; +} +#cont-count{ + width:50px; + height:20px; + background-color: black; + margin-left:30px; + text-align: left; + border-radius: 5px; + color:white; + padding-left:20px; + +} + + +@media (max-width:950px) { + #selection-wrapper{ + width:100%; + } + .main-wrapper{ + width:100%; + display: block; + } + #repo-Info{ + width:70%; + height: 300px; + overflow: auto; + margin:40px 0 0 100px; + } + #cont-info{ + width:89%; + margin:40px 0 0 30px; + } + + .Contributions-text{ + font-size: 15px; + } + .section-name{ + padding-top:30px; + } +}; + diff --git a/Week2/HYFRepoPromise.js b/Week2/HYFRepoPromise.js new file mode 100644 index 000000000..23afa7b58 --- /dev/null +++ b/Week2/HYFRepoPromise.js @@ -0,0 +1,119 @@ +'use strict'; + +const gitHub = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + +function createAppendElement(name, parent, options = {}) { + const htmlElem = document.createElement(name); + parent.appendChild(htmlElem); + Object.keys(options).forEach(key => { + const value = options[key]; + if (key === 'html') { + htmlElem.innerHTML = value; + } else { + htmlElem.setAttribute(key, value); + } + }); + + return htmlElem; +} + +function content() { + + const main = document.getElementById('root'); + + const header = createAppendElement('header', main, { id: 'selection-wrapper' }); + createAppendElement('label', header, { html: 'Select Repository' + ' ', class: 'labelcls' }); + createAppendElement('select', header, { id: 'selections' }); + + const wrapperDiv = createAppendElement('div', main, { class: 'main-wrapper' }); + createAppendElement('h3', wrapperDiv, { id: 'errText' }); + + const repoInfoDiv = createAppendElement('div', wrapperDiv, { id: 'repo-Info' }); + createAppendElement('ul', repoInfoDiv, { id: 'repo-info-ul' }); + + const contInfoDiv = createAppendElement('div', wrapperDiv, { id: 'cont-info' }); + createAppendElement('p', contInfoDiv, { html: 'Contributions', class: 'section-name' }); + createAppendElement('ul', contInfoDiv, { id: 'cont-info-ul' }); + + retrieveData(gitHub) + + .then(constructOptions) + .catch(showError); +} + +function retrieveData(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.responseType = "json"; + xhr.onreadystatechange = () => { + const repositories = xhr.response; + if (xhr.readyState === 4) { + if (xhr.status < 400) { + resolve(repositories); + } else { + reject(new Error(xhr.statusText)); + } + } + }; + xhr.send(); + } + + ); +} +function showError(err) { + const errorText = document.getElementById('errText'); + errorText.innerHTML = 'Error ' + err.message; +} + +function constructOptions(repos) { + repos.sort((a, b) => a.name.localeCompare(b.name)); + const select = document.getElementById('selections'); + + repos.forEach((repo, i) => { + createAppendElement('option', select, { html: repos[i].name, value: i }); + + }); + + select.addEventListener('change', () => { + + setEachRepoInfo(repos[select.value]); + }); + + setEachRepoInfo(repos[0]); +} + +function setEachRepoInfo(repo) { + const repoUl = document.getElementById('repo-info-ul'); + repoUl.innerHTML = ''; + + const nameLink = createAppendElement('li', repoUl, { html: 'Name : ' }); + createAppendElement('a', nameLink, { html: repo.name, class: 'cont-name-link', href: repo.html_url, target: '_blank' }); + createAppendElement('li', repoUl, { html: 'Description : ' + repo.description }); + createAppendElement('li', repoUl, { html: ' Forks : ' + repo.forks }); + createAppendElement('li', repoUl, { html: 'Updated : ' + repo.updated_at }); + setContributorsInfo(repo.contributors_url); + console.log(repo.contributors_url); +} + +function setContributorsInfo(url) { + const contributorsInfo = document.getElementById('cont-info-ul'); + contributorsInfo.innerHTML = ''; + + retrieveData(url) + .then(contributors => { + contributors.forEach(contributor => { + const cont = createAppendElement('li', contributorsInfo, { id: 'per-contributor' }); + createAppendElement('img', cont, { class: 'contributor-image', src: contributor.avatar_url }); + const contLink = createAppendElement('div', cont, { id: 'cont-name' }); + createAppendElement('a', contLink, { html: contributor.login, class: 'contributor-link', href: contributor.html_url, target: '_blank' }); + createAppendElement('p', cont, { html: ' Contributions # ', class: 'Contributions-text' }); + createAppendElement('p', cont, { html: contributor.contributions, id: 'cont-count' }); + + }); + }) + .catch(error => showError(error)); +} + +window.onload = content; + diff --git a/Week2/RepoPromise.html b/Week2/RepoPromise.html new file mode 100644 index 000000000..7e2961a4c --- /dev/null +++ b/Week2/RepoPromise.html @@ -0,0 +1,20 @@ + + + + + + HYF Repositories + + + + + + + + + +
+ + + + \ No newline at end of file From cbef7d96f3c5611874d8aa6c6b00d70065af1c1b Mon Sep 17 00:00:00 2001 From: AllouhM Date: Tue, 19 Jun 2018 02:12:26 +0200 Subject: [PATCH 2/2] add features to meet the assignment needs --- Week2/HYFRepoPromise.css | 100 ++++++++++++++++++++++++++------------- Week2/HYFRepoPromise.js | 15 +++--- 2 files changed, 75 insertions(+), 40 deletions(-) diff --git a/Week2/HYFRepoPromise.css b/Week2/HYFRepoPromise.css index ea4a02c40..7dd28b44a 100644 --- a/Week2/HYFRepoPromise.css +++ b/Week2/HYFRepoPromise.css @@ -30,8 +30,8 @@ } .main-wrapper{ display: flex; - flex-wrap: wrap; } + #errText{ font-family: 'Josefin Sans', sans-serif; font-size: 20px; @@ -40,7 +40,7 @@ background-color:yellow; margin: 40px 0 0 30px; - width:45%; + width:40%; height:250px; box-shadow: 10px 2px 2px rgba(0, 0, 0, 0.7); border-radius: 25px; @@ -50,20 +50,20 @@ #repo-info-ul{ list-style: none; - line-height: 35px; + line-height: 40px; font-family:'Josefin Sans', sans-serif; font-size: 20px; + } .cont-name-link{ text-decoration: none; } #cont-info{ - background-color:orangered; - width:43%; + background-color:aqua; + width:55%; margin:40px 0 0 70px; box-shadow: 10px 2px 2px rgba(0, 0, 0, 0.7); border-radius: 25px; - } .section-name{ margin:30px 0 0 30px; @@ -72,7 +72,6 @@ } #cont-info-ul{ margin-top:20px; - } #per-contributor{ list-style: none; @@ -83,59 +82,96 @@ width:50px; height:50px; border-radius: 50%; - margin:10px; + margin:10px 10px 10px 30px; } -#cont-name{ - width:120px; +.cont-name{ + width:80px; margin:18px 35px 0 0 ; } .contributor-link{ + display: flex; text-decoration: none; font-family:'Josefin Sans', sans-serif; font-size: 20px; + padding-top:10px; + } + .contributor-link:hover{ + + border:3px solid rgba(4, 4, 252,6); + border-radius: 10px; + background-color:rgb(5, 107, 107); + color: white; + } + .Contributions-text{ font-family:'Josefin Sans', sans-serif; font-size: 20px; + margin-left:40px; + } #cont-count{ - width:50px; + width:30px; height:20px; background-color: black; - margin-left:30px; - text-align: left; - border-radius: 5px; + margin-left:10px; + text-align: center; + border-radius: 2px; color:white; - padding-left:20px; - } - -@media (max-width:950px) { - #selection-wrapper{ - width:100%; - } - .main-wrapper{ - width:100%; - display: block; - } +@media screen and (max-width:950px) { + #repo-Info{ - width:70%; + width:50%; height: 300px; - overflow: auto; - margin:40px 0 0 100px; + margin:40px 0 0 20px; + } + #repo-info-ul{ + font-size: 15px; } #cont-info{ - width:89%; + width:50%; margin:40px 0 0 30px; } - + .cont-name{ + font-size: 15px; + } .Contributions-text{ - font-size: 15px; + display: none; } .section-name{ padding-top:30px; } -}; +} + +@media screen and (max-width:620px) { + .main-wrapper{ + display: flex; + flex-wrap: wrap; + justify-content: center; + } + #repo-Info{ + width:70%; + height: 400px; + overflow: auto; + margin:40px 0 0 20px; + } + #cont-info{ + + width:90%; + } + + #selection-wrapper{ + height: 120px; + font-size: 25px; + } + .section-name{ + font-size: 20px; + } + #selections{ + width:80%; + } +} diff --git a/Week2/HYFRepoPromise.js b/Week2/HYFRepoPromise.js index 23afa7b58..061b0b36c 100644 --- a/Week2/HYFRepoPromise.js +++ b/Week2/HYFRepoPromise.js @@ -33,7 +33,7 @@ function content() { const contInfoDiv = createAppendElement('div', wrapperDiv, { id: 'cont-info' }); createAppendElement('p', contInfoDiv, { html: 'Contributions', class: 'section-name' }); - createAppendElement('ul', contInfoDiv, { id: 'cont-info-ul' }); + createAppendElement('div', contInfoDiv, { id: 'cont-info-ul' }); retrieveData(gitHub) @@ -87,7 +87,7 @@ function setEachRepoInfo(repo) { const repoUl = document.getElementById('repo-info-ul'); repoUl.innerHTML = ''; - const nameLink = createAppendElement('li', repoUl, { html: 'Name : ' }); + const nameLink = createAppendElement('li', repoUl, { html: 'Name : ', class: 'repo-name' }); createAppendElement('a', nameLink, { html: repo.name, class: 'cont-name-link', href: repo.html_url, target: '_blank' }); createAppendElement('li', repoUl, { html: 'Description : ' + repo.description }); createAppendElement('li', repoUl, { html: ' Forks : ' + repo.forks }); @@ -103,12 +103,11 @@ function setContributorsInfo(url) { retrieveData(url) .then(contributors => { contributors.forEach(contributor => { - const cont = createAppendElement('li', contributorsInfo, { id: 'per-contributor' }); - createAppendElement('img', cont, { class: 'contributor-image', src: contributor.avatar_url }); - const contLink = createAppendElement('div', cont, { id: 'cont-name' }); - createAppendElement('a', contLink, { html: contributor.login, class: 'contributor-link', href: contributor.html_url, target: '_blank' }); - createAppendElement('p', cont, { html: ' Contributions # ', class: 'Contributions-text' }); - createAppendElement('p', cont, { html: contributor.contributions, id: 'cont-count' }); + const bla = createAppendElement('a', contributorsInfo, { class: 'contributor-link', href: contributor.html_url, target: '_blank' }); + createAppendElement('img', bla, { class: 'contributor-image', src: contributor.avatar_url }); + createAppendElement('p', bla, { html: contributor.login, class: 'cont-name' }); + createAppendElement('p', bla, { html: ' Contributions # ', class: 'Contributions-text' }); + createAppendElement('p', bla, { html: contributor.contributions, id: 'cont-count' }); }); })