diff --git a/Week3/homework/.eslintrc b/Week3/homework/.eslintrc new file mode 100644 index 0000000..ae81895 --- /dev/null +++ b/Week3/homework/.eslintrc @@ -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/Week3/homework/src/App.js b/Week3/homework/src/App.js new file mode 100644 index 0000000..cfa1032 --- /dev/null +++ b/Week3/homework/src/App.js @@ -0,0 +1,118 @@ +'use strict'; + +/* global Util, Repository, Contributor */ + +class App { + constructor(url) { + this.initialize(url); + } + + /** + * Initialization + * @param {string} url The GitHub URL for obtaining the organization's repositories. + */ + async initialize(url) { + const root = document.getElementById('root'); + try { + const data = await Util.fetchJSON(url); + this.data = data.map(repo => new Repository(repo)); + await renderContainer(data) + } catch (error) { + this.renderError(error); + } + + + function renderIndex0(data){ + for (let i = 0; i < data.length; i++){ + let Image0Link = Util.createAndAppend('li', contributorsUl, {}) + let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + + + + data.forEach((repo) => { + for (let i = 0; i < newArray.length; i++) { + Util.createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]}); + } + }); + + function removeNodes(container){ + while (ul.hasChildNodes()) { + ul.removeChild(ul.firstChild); + } + while (contributorsUl.hasChildNodes()) { + contributorsUl.removeChild(contributorsUl.firstChild); + } + } //end removeNodes + + selectList.onchange = function(selectedIndex){ + let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()}); + Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]}); + Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'}); + Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'}); + Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'}); + let dates = new Date (updatedAt[this.selectedIndex]); + dates = dates.toUTCString(); + Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'}); + }// end of onchange + }// end renderIndex0 + } + + + /** + * Removes all child elements from a container element + * @param {*} container Container element to clear + */ + clearContainer(container) { + while (container.firstChild) { + container.removeChild(container.firstChild); + } + } + + /** + * Fetch contributor information for the selected repository and render the + * repo and its contributors as HTML elements in the DOM. + * @param {number} index The array index of the repository. + */ + async fetchContributorsAndRender(index) { + try { + const repo = this.repos[index]; + const contributors = await repo.fetchContributors(); + + const container = document.getElementById('container'); + this.clearContainer(container); + + const leftDiv = Util.createAndAppend('div', container); + const rightDiv = Util.createAndAppend('div', container); + + const contributorList = Util.createAndAppend('ul', rightDiv); + + repo.render(leftDiv); + + contributors + .map(contributor => new Contributor(contributor)) + .forEach(contributor => contributor.render(contributorList)); + } catch (error) { + this.renderError(error); + } + } + + /** + * Render an error to the DOM. + * @param {Error} error An Error object describing the error. + */ + + renderError(err) { + let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'; + Util.createAndAppend('div', root, { text: err.message, class: 'alert-error' }), + Util.createAndAppend('img', root, {id: 'catImage', src: catsrc}); + } +} + +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors'; + + +window.onload = () => new App(HYF_REPOS_URL); \ No newline at end of file diff --git a/Week3/homework/src/Contributor.js b/Week3/homework/src/Contributor.js new file mode 100644 index 0000000..76baaca --- /dev/null +++ b/Week3/homework/src/Contributor.js @@ -0,0 +1,35 @@ +'use strict'; + +/* global Util */ + +// eslint-disable-next-line no-unused-vars +class Contributor { + constructor(data) { + this.data = data; + } + + /** + * Render the contributor info to the DOM. + * @param {HTMLElement} contributorList The parent element in which to render the contributor. + */ + render(contributorList) { + function renderContributors(data){ + for (let i = 0; i < data.length; i++){ + let ImageLink = Util.createAndAppend('li', contributorsUl, {}) + let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + }//end renderContributors + } +} + +//this is not part of Contributor constructor, but is here +function renderContributors(data){ + for (let i = 0; i < data.length; i++){ + let ImageLink = Util.createAndAppend('li', contributorsUl, {}) + let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for +}//end renderContributors (called in Repository.js) \ No newline at end of file diff --git a/Week3/homework/src/Repository.js b/Week3/homework/src/Repository.js new file mode 100644 index 0000000..f861585 --- /dev/null +++ b/Week3/homework/src/Repository.js @@ -0,0 +1,144 @@ +'use strict'; + +/* global Util */ + +// eslint-disable-next-line no-unused-vars +class Repository { + constructor(data) { + this.data = data; + } //end constructor + + /** + * Render the repository info to the DOM. + * @param {HTMLElement} parent The parent element in which to render the repository. + */ + renderContainer(data) { + + } + + /** + * Returns an array of contributors as a promise + */ + fetchContributors() { + return Util.fetchJSON(this.data.contributors_url); + } + + /** + * Returns the name of the repository + */ + name() { + return this.data.name; + } //end name +} //end Repository +function renderContainer(data){ + async function get0API(url){ + try{ + let data = await Util.fetchJSON(index0API) + await renderIndex0(data) + } catch(error) { + this.renderError(error); + } + } //end asyn function + + get0API(index0API) + let newArray = []; + let forkArray = []; + let languageArray = []; + let descriptionArray = []; + let updatedAt = []; + let htmlArray = []; + const root = document.getElementById('root'); + data.sort((a, b) => (a.name).localeCompare(b.name)); + + for (let i = 0; i < data.length; i++){ + newArray.push(data[i].name); + descriptionArray.push(data[i].description); + forkArray.push(data[i].forks); + languageArray.push(data[i].language); + updatedAt.push(data[i].updated_at); + htmlArray.push(data[i].html_url); + var date = new Date ((data[i].updated_at)); + date = date.toUTCString(); + } + + while (root.firstChild) { + root.removeChild(root.firstChild); + } + + Util.createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' }); + Util.createAndAppend('h3', root, { text: "Select a repository: ", class: 'subtitle'}); + const selectList = Util.createAndAppend('select', root, {id: "mySelect" }); + const headerDiv = Util.createAndAppend('div', root, {class: 'headerdiv'}); + Util.createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' }); + Util.createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' }); + const container = Util.createAndAppend('div', root, {class: 'container'}); + const card = Util.createAndAppend('div', container, { class: 'card'}); + const ul = Util.createAndAppend('ul', card, {id: "myUl", }); + const contributorsCard = Util.createAndAppend('div', container, {class: 'card'}); + const contributorsUl = Util.createAndAppend('ul', contributorsCard, {id: 'contributorsUl'}); + const Index0Name = Util.createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'}); + const Index0Link = Util.createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]}); + const Index0Description = Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"}); + const Index0Fork = Util.createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'}); + const Index0Language = Util.createAndAppend ('li', ul, {text: "Language: " + languageArray[0], class: 'updatedAtInContainer'}); + const Index0UpdatedAt = Util.createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'}) + + function renderIndex0(data){ + for (let i = 0; i < data.length; i++){ + let Image0Link = Util.createAndAppend('li', contributorsUl, {}) + let contributor0Name = Util.createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributor0Link = Util.createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributor0Badge = Util.createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + + data.forEach((repo) => { + for (let i = 0; i < newArray.length; i++) { + Util.createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]}); + } + }); + + function removeNodes(container){ + while (ul.hasChildNodes()) { + ul.removeChild(ul.firstChild); + } + while (contributorsUl.hasChildNodes()) { + contributorsUl.removeChild(contributorsUl.firstChild); + } + } //end removeNodes + + selectList.onchange = function(selectedIndex){ + let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors' + async function getAPI(url){ + try{ + let data = await Util.fetchJSON(contributorAPI) + await renderContributors(data) + } catch(error) { + this.renderError(error); + } + } + + getAPI(contributorAPI); + let repoName = Util.createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()}); + Util.createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]}); + Util.createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'}); + Util.createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'}); + Util.createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'}); + let dates = new Date (updatedAt[this.selectedIndex]); + dates = dates.toUTCString(); + Util.createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'}); + + + + }// end of onchange + }// end renderIndex0 + } //end renderContainer + + function renderContributors(data){ + + for (let i = 0; i < data.length; i++){ + let ImageLink = Util.createAndAppend('li', contributorsUl, {}) + let contributorName = Util.createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributorLink = Util.createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributorBadge = Util.createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + }//end createStuff3 \ No newline at end of file diff --git a/homework/Util.js b/Week3/homework/src/Util.js similarity index 95% rename from homework/Util.js rename to Week3/homework/src/Util.js index 693e1bd..038828e 100644 --- a/homework/Util.js +++ b/Week3/homework/src/Util.js @@ -5,7 +5,7 @@ class Util { static createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); - Object.keys(options).forEach(key => { + Object.keys(options).forEach((key) => { const value = options[key]; if (key === 'text') { elem.innerText = value; @@ -32,4 +32,4 @@ class Util { xhr.send(); }); } -} +} \ No newline at end of file diff --git a/homework/hyf.png b/Week3/homework/src/hyf.png similarity index 100% rename from homework/hyf.png rename to Week3/homework/src/hyf.png diff --git a/homework/index.html b/Week3/homework/src/index.html similarity index 70% rename from homework/index.html rename to Week3/homework/src/index.html index 9c8f80c..5dd5ff5 100644 --- a/homework/index.html +++ b/Week3/homework/src/index.html @@ -13,11 +13,18 @@ HYF-GITHUB +
- - + + + + \ No newline at end of file diff --git a/Week3/homework/src/index.js b/Week3/homework/src/index.js new file mode 100644 index 0000000..21b4913 --- /dev/null +++ b/Week3/homework/src/index.js @@ -0,0 +1,166 @@ +'use strict'; +{ +function fetchJSON(url) { + return new Promise(function(resolve, reject){ + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } + } + xhr.onerror = () => reject(new Error('Network request failed')); + xhr.send(); + }); // end promise + } //end fetchJSON + +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach((key) => { + const value = options[key]; + if (key === 'text') { + elem.innerText = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} +let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'; + +async function main(url) { + try { + let data = await fetchJSON(url) + await renderContainer(data) + } catch(error) { + renderError(error); + } // end catch + } //end main + +function renderContainer(data){ + async function get0API(url){ + try{ + let data = await fetchJSON(index0API) + await renderIndex0(data) + } catch(error) { + renderError(error); + } + } //end asyn function + + get0API(index0API) + let newArray = []; + let forkArray = []; + let languageArray = []; + let descriptionArray = []; + let updatedAt = []; + let htmlArray = []; + const root = document.getElementById('root'); + data.sort((a, b) => (a.name).localeCompare(b.name)); + + for (let i = 0; i < data.length; i++){ + newArray.push(data[i].name); + descriptionArray.push(data[i].description); + forkArray.push(data[i].forks); + languageArray.push(data[i].language); + updatedAt.push(data[i].updated_at); + htmlArray.push(data[i].html_url); + var date = new Date ((data[i].updated_at)); + date = date.toUTCString(); + } + + while (root.firstChild) { + root.removeChild(root.firstChild); + } + + createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' }); + createAndAppend('h3', root, { text: "Select a repository: ", class: 'subtitle'}); + const selectList = createAndAppend('select', root, {id: "mySelect" }); + const headerDiv = createAndAppend('div', root, {class: 'headerdiv'}); + createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' }); + createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' }); + const container = createAndAppend('div', root, {class: 'container'}); + const card = createAndAppend('div', container, { class: 'card'}); + const ul = createAndAppend('ul', card, {id: "myUl", }); + const contributorsCard = createAndAppend('div', container, {class: 'card'}); + const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'}); + const Index0Name = createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'}); + const Index0Link = createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]}); + const Index0Description = createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"}); + const Index0Fork = createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'}); + const Index0Language = createAndAppend ('li', ul, {text: "Language: " + languageArray[0], class: 'updatedAtInContainer'}); + const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'}) + + function renderIndex0(data){ + for (let i = 0; i < data.length; i++){ + let Image0Link = createAndAppend('li', contributorsUl, {}) + let contributor0Name = createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributor0Link = createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributor0Badge = createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + + data.forEach((repo) => { + for (let i = 0; i < newArray.length; i++) { + createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]}); + } + }); + + function removeNodes(container){ + while (ul.hasChildNodes()) { + ul.removeChild(ul.firstChild); + } + while (contributorsUl.hasChildNodes()) { + contributorsUl.removeChild(contributorsUl.firstChild); + } + } //end removeNodes + + selectList.onchange = function(selectedIndex){ + let contributorAPI = 'https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors' + async function getAPI(url){ + try{ + let data = await fetchJSON(contributorAPI) + await renderContributors(data) + } catch(error) { + this.renderError(error); + } + } + + getAPI(contributorAPI); + let repoName = createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()}); + createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]}); + createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'}); + createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'}); + createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'}); + let dates = new Date (updatedAt[this.selectedIndex]); + dates = dates.toUTCString(); + createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'}); + + }// end of onchange + }// end createStuff2 + } //end createStuff + + function renderContributors(data){ + + for (let i = 0; i < data.length; i++){ + let ImageLink = createAndAppend('li', contributorsUl, {}) + let contributorName = createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributorLink = createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributorBadge = createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + }//end renderContributors + + function renderError(err) { + let catsrc = 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'; + createAndAppend('div', root, { text: err.message, class: 'alert-error' }), + createAndAppend('img', root, {id: 'catImage', src: catsrc}); + } + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + let index0API = 'https://api.github.com/repos/HackYourFuture/alumni/contributors'; + window.onload = () => main(HYF_REPOS_URL); + + } + \ No newline at end of file diff --git a/Week3/homework/src/index2Fetch.js b/Week3/homework/src/index2Fetch.js new file mode 100644 index 0000000..bec2562 --- /dev/null +++ b/Week3/homework/src/index2Fetch.js @@ -0,0 +1,145 @@ +'use strict'; + +{ +function createAndAppend(name, parent, options = {}) { + const elem = document.createElement(name); + parent.appendChild(elem); + Object.keys(options).forEach((key) => { + const value = options[key]; + if (key === 'text') { + elem.innerText = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +async function main(url) { + try{ + let response = await fetch(HYF_REPOS_URL); + const data = await response.json() + await createStuff(data) + } catch(err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }), + createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'}); + } +} //end main + +async function createStuff(data){ + let newArray = []; + let forkArray = []; + let languageArray = []; + let descriptionArray = []; + let updatedAt = []; + let htmlArray = []; + data.sort((a, b) => (a.name).localeCompare(b.name)); + + for (let i = 0; i < data.length; i++){ + newArray.push(data[i].name); + descriptionArray.push(data[i].description); + forkArray.push(data[i].forks); + languageArray.push(data[i].language); + updatedAt.push(data[i].updated_at); + htmlArray.push(data[i].html_url); + var date = new Date ((data[i].updated_at)); + date = date.toUTCString(); + } + + const root = document.getElementById('root'); + + while (root.firstChild) { + root.removeChild(root.firstChild); + } + + createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' }); + createAndAppend('h3', root, { text: "Select a repository: ", class: 'subtitle'}); + const selectList = createAndAppend('select', root, {id: "mySelect" }); + const headerDiv = createAndAppend('div', root, {class: 'headerdiv'}); + createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' }); + createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' }); + const container = createAndAppend('div', root, {class: 'container'}); + const card = createAndAppend('div', container, { class: 'card'}); + const ul = createAndAppend('ul', card, {id: "myUl", }); + const contributorsCard = createAndAppend('div', container, {class: 'card'}); + const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'}); + const Index0Name = createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'}); + const Index0Link = createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]}); + const Index0Description = createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"}); + const Index0Fork = createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'}); + const Index0Language = createAndAppend ('li', ul, {text: "Language: " + languageArray[0], class: 'updatedAtInContainer'}); + const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'}) + + fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors') + try { + let response = await fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors') + let data = await response.json() + await createStuff2(data) + }catch(err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }), + createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'}); + } //end catch + + + function createStuff2(data){ + for (let i = 0; i < data.length; i++){ + let Image0Link = createAndAppend('li', contributorsUl, {}) + let contributor0Name = createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributor0Link = createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributor0Badge = createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + + + + data.forEach((repo) => { + for (let i = 0; i < newArray.length; i++) { + createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]}); + } + }); + + function removeNodes(container){ + while (ul.hasChildNodes()) { + ul.removeChild(ul.firstChild); + } + while (contributorsUl.hasChildNodes()) { + contributorsUl.removeChild(contributorsUl.firstChild); + } + } //end removeNodes + + selectList.onchange = async function(selectedIndex){ + fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors') + try { + let response = await fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors') + let data = await response.json() + await createStuff3(data) + }catch (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }), + createAndAppend('img', root, {id: 'catImage', src: 'https://us.123rf.com/450wm/photodeti/photodeti1702/photodeti170200132/72587923-cat-holding-stop-sign-isolated-on-white-background-.jpg?ver=6'}); + } //end catch + + function createStuff3(data){ + for (let i = 0; i < data.length; i++){ + let ImageLink = createAndAppend('li', contributorsUl, {}) + let contributorName = createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'}); + let contributorLink = createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'}); + let contributorBadge = createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'}); + } //end for + }//end createStuff3 + + let repoName = createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()}); + createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]}); + createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'}); + createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'}); + createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'}); + let dates = new Date (updatedAt[this.selectedIndex]); + dates = dates.toUTCString(); + createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'}); + + }// end of onchange + }// end createStuff2 + } //end createStuff + + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + window.onload = () => main(HYF_REPOS_URL); + +} \ No newline at end of file diff --git a/Week3/homework/src/style.css b/Week3/homework/src/style.css new file mode 100644 index 0000000..7cd5646 --- /dev/null +++ b/Week3/homework/src/style.css @@ -0,0 +1,163 @@ +.alert-error { + color: white; + background-color:black; + font-size: 4rem; +} + +#root { + max-width: 1200px; + margin: 0 auto; + background-color: darkslateblue; + } + +.container { + display: flex; + flex-wrap: wrap; + border: 2px solid gray; + background-color: darkslateblue; + clear: both; +} + +.card { + margin: 1rem; + border: 2px solid gray; + background-color: white; + color: black; + display: flex; + justify-content: left; + font-size: 20px; +} + +.contributorsCard { + margin: 1rem; + border: 2px solid gray; + background-color: darkslateblue; + display: flex; + justify-content: right; + font-size: 20px; + text-align: center; +} + +.card:hover { + background-color: lightblue; +} + +.header{ + float: center; + clear: both; +} + +.title{ + color: white; + background-color: darkslateblue; + font-size: 2rem; + border: 2px; + margin: 1rem; + padding-top: 1rem; + font-size: 3rem; + text-align: center; + font-family: 'Allerta Stencil', sans-serif; +} +.subtitle { + color: white; + margin: 1rem; + font-size: 1.5rem; + font-family: 'Play', sans-serif; +} + +#repoHeader { + float: left; + } + +#contributorHeader { + float: right; + } + +#mySelect{ + margin: 2rem; + margin-top: 0; + padding: 1.5rem; + font-size: 1.5rem; + background-color: white; + color: black; + font-family: 'Play', sans-serif; +} + +#mySelect:hover { + background-color: lightblue; + outline-color: white; +} + +#myOption { + font-size: 1.5rem; + background-color: white; + color: black; + font-family: 'Play', sans-serif; +} + +#myUl{ + list-style-type: none; + font-size: 1.5rem; + font-family: 'Play', sans-serif; +} + +#myUl:hover { + background-color: lightblue; +} + +#contributorsUl{ + list-style-type: none; + font-size: 1.5em; + font-family: 'Play', sans-serif; +} + +img{ + border: 1px solid #ddd; + border-radius: 4px; + margin: 10px; + padding: 25px; + width: 150px; + display: flex; + justify-content: center; +} +#catImage{ + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} + +#link { + font-size: 20px; + text-align: left; +} + +.badge{ + font-size: 20px; +} + +#footer{ + text-align: center; +} + + @media screen and (max-width: 600px) { + .card, .header { + flex: 1 1 calc(33% - 2rem); + } + #contributorHeader{ + display: none; + } + #mySelect, #myOption { + width: 300px; + } + + } + + @media screen and (min-width: 600px) { + .card, .header { + flex: 1 1 calc(33% - 2rem); + } + #mySelect, #myOption { + width: 400px; + } + } \ No newline at end of file diff --git a/homework/.eslintrc b/homework/.eslintrc new file mode 100644 index 0000000..ae81895 --- /dev/null +++ b/homework/.eslintrc @@ -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/homework/App.js b/homework/App.js deleted file mode 100644 index 32b71e3..0000000 --- a/homework/App.js +++ /dev/null @@ -1,81 +0,0 @@ -'use strict'; - -/* global Util, Repository, Contributor */ - -class App { - constructor(url) { - this.initialize(url); - } - - /** - * Initialization - * @param {string} url The GitHub URL for obtaining the organization's repositories. - */ - async initialize(url) { - // Add code here to initialize your app - // 1. Create the fixed HTML elements of your page - // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your