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..7dd28b44a --- /dev/null +++ b/Week2/HYFRepoPromise.css @@ -0,0 +1,177 @@ +*{ + 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; +} + +#errText{ + font-family: 'Josefin Sans', sans-serif; + font-size: 20px; +} +#repo-Info{ + + background-color:yellow; + margin: 40px 0 0 30px; + width:40%; + 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: 40px; + font-family:'Josefin Sans', sans-serif; + font-size: 20px; + +} +.cont-name-link{ + text-decoration: none; +} +#cont-info{ + 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; + 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 10px 10px 30px; +} + +.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:30px; + height:20px; + background-color: black; + margin-left:10px; + text-align: center; + border-radius: 2px; + color:white; +} + +@media screen and (max-width:950px) { + + #repo-Info{ + width:50%; + height: 300px; + margin:40px 0 0 20px; + } + #repo-info-ul{ + font-size: 15px; + } + #cont-info{ + width:50%; + margin:40px 0 0 30px; + } + .cont-name{ + font-size: 15px; + } + .Contributions-text{ + 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 new file mode 100644 index 000000000..061b0b36c --- /dev/null +++ b/Week2/HYFRepoPromise.js @@ -0,0 +1,118 @@ +'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('div', 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 : ', 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 }); + 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 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' }); + + }); + }) + .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