Codestin Search App

From 437504e51fe43510e46f83c45f7bdf457353d534 Mon Sep 17 00:00:00 2001 From: Catsudemo Date: Sun, 4 Aug 2019 14:22:35 +0100 Subject: [PATCH] Week one homework --- homework/index.html | 54 ++++++++----- homework/index.js | 173 ++++++++++++++++++++++++++++++++---------- homework/newStyle.css | 65 ++++++++++++++++ 3 files changed, 231 insertions(+), 61 deletions(-) create mode 100644 homework/newStyle.css diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..e02fbf88e 100644 --- a/homework/index.html +++ b/homework/index.html @@ -1,23 +1,37 @@ + + + + + + + + + + Codestin Search App + + + - - - - - - - - - - Codestin Search App - - - - - -

- - - - \ No newline at end of file + + +

+ Repo facts +

+ Contributors +

+ + + diff --git a/homework/index.js b/homework/index.js index d3a97645e..a61a87e3b 100644 --- a/homework/index.js +++ b/homework/index.js @@ -1,47 +1,138 @@ 'use strict'; -{ - function fetchJSON(url, cb) { - const xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.responseType = 'json'; - xhr.onload = () => { - if (xhr.status < 400) { - cb(null, xhr.response); - } else { - cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); - } - }; - xhr.onerror = () => cb(new Error('Network request failed')); - xhr.send(); - } - - 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.textContent = value; - } else { - elem.setAttribute(key, value); - } - }); - return elem; - } - - function main(url) { - fetchJSON(url, (err, data) => { - const root = document.getElementById('root'); - if (err) { - createAndAppend('div', root, { text: err.message, class: 'alert-error' }); - } else { - createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); - } +const repoSelector = document.querySelector('#repoSelect'); +const contribDiv = document.querySelector('#contribDiv'); +const repoDiv = document.querySelector('#repo'); + +function fetchJSON(url, cb) { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.setRequestHeader = 'Catsudemo https://api.github.com'; + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status < 400) { + cb(null, xhr.response); + } else { + cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } + }; + xhr.onerror = () => cb(new Error('Network request failed')); + xhr.send(); +} + +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.textContent = value; + } else { + elem.setAttribute(key, value); + } + }); + return elem; +} + +function initPage(data, repoSelector) { + buildSelect(data, repoSelector); +} + +function buildSelect(data, repoSelector) { + data + .map(repo => repo.name) + .sort() + .forEach(name => { + createAndAppend('OPTION', repoSelector, { text: name, value: name }); }); - } +} - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; +function main(url) { + fetchJSON(url, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + // createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + // buildSelect(data,repoSelector) + initPage(data, repoSelector); + } + }); +} - window.onload = () => main(HYF_REPOS_URL); +const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + +function displayContrib(contributor, contributions, avatar) { + const eachPersonUl = document.createElement('ul'); + const contributorName = document.createElement('li'); + contributorName.innerText = `Username: ${contributor}`; + eachPersonUl.appendChild(contributorName); + const eachContributions = document.createElement('li'); + eachContributions.innerText = `Contributions: ${contributions}`; + eachPersonUl.appendChild(eachContributions); + contribDiv.appendChild(eachPersonUl); + const eachAvatar = document.createElement('IMG'); + eachAvatar.innerhtml = `

`; + contribDiv.appendChild(eachAvatar); +} + +function displayRepo(repository, description, forks, updated) { + const eachRepoUl = document.createElement('ul'); + const eachName = document.createElement('li'); + eachName.innerText = `Repository: ${repository}`; + eachRepoUl.appendChild(eachName); + const eachDescription = document.createElement('li'); + eachDescription.innerText = `Contributions: ${description}`; + eachRepoUl.appendChild(eachDescription); + const eachForks = document.createElement('li'); + eachForks.innerText = `Forks: ${forks}`; + eachRepoUl.appendChild(eachForks); + const eachUpdated = document.createElement('li'); + eachUpdated.innerText = `Updated: ${updated}`; + eachRepoUl.appendChild(eachUpdated); + repoDiv.appendChild(eachRepoUl); } + +const selectElement = document.querySelector('.selector'); + +selectElement.addEventListener('change', event => { + const result = document.querySelector('.result'); + let repo = document.getElementById('repoSelect').value; + let repoURL = `https://api.github.com/repos/HackYourFuture/${repo}`; + let contribURL = `https://api.github.com/repos/HackYourFuture/${repo}/contributors`; + + main(HYF_REPOS_URL); + + fetchJSON(repoURL, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + repoDiv.innerHTML = ''; + let repository = data.name; + let description = data.description; + let forks = data.forks; + let updated = data.updated_at; + displayRepo(repository, description, forks, updated); + } + console.log('Here is the repodata'); + }); + + fetchJSON(contribURL, (err, data) => { + const root = document.getElementById('root'); + if (err) { + createAndAppend('div', root, { text: err.message, class: 'alert-error' }); + } else { + contribDiv.innerHTML = ''; + data.forEach(object => { + let contributor = object.login; + let contributions = object.contributions; + let avatar = object.avatar_url; + displayContrib(contributor, contributions, avatar); + }); + console.log('Here is the contribdata'); + } + }); +}); + +window.onload = () => main(HYF_REPOS_URL); diff --git a/homework/newStyle.css b/homework/newStyle.css new file mode 100644 index 000000000..a2747f023 --- /dev/null +++ b/homework/newStyle.css @@ -0,0 +1,65 @@ +.header { + background-color: #176ab0; + color: white; + text-align: center; + padding: 5px; +} + +#main-content { + width: 350px; + float: left; + padding: 10px; +} + +#footer { + background-color: #176ab0; + color: white; + clear: both; + text-align: center; + padding: 5px; +} + +.flex-wrapper { + font-family: Abel; + background-color: grey; + text-align: left; + padding-top: 25px; + padding-bottom: 25px; + font-size: 20px; + display: flex; + flex-direction: row; + justify-content: center; + background-color: #2E2C2F; + color: #444; +} + +#repo { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 40%; + border: 5px; + padding: 20px; + margin: 20px; +} + +#contribDiv { + background-color: whitesmoke; + border-color: #2E2C2F; + width: 40%; + border: 5px; + padding: 20px; + margin: 20px; +} + +@media screen and (max-width: 600px) { + .flex-wrapper { + -webkit-flex-direction: column; + flex-direction: column; + } + #repo { + width: 80%; + } + #contribDiv { + width: 80%; + } +} \ No newline at end of file