diff --git a/Week1/hw/index.html b/Week1/hw/index.html new file mode 100644 index 000000000..423bb7f35 --- /dev/null +++ b/Week1/hw/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + HYFJ3W1 + + + HYF-GITHUB + + + + +

+ +

> + +

+ + + + + \ No newline at end of file diff --git a/Week1/hw/index.js b/Week1/hw/index.js new file mode 100644 index 000000000..f21f36eff --- /dev/null +++ b/Week1/hw/index.js @@ -0,0 +1,160 @@ +function main(){ + console.log('main!'); + const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + getApiResponse(HyfReposHttps, xhrCallback); + console.log(HyfReposHttps); +} + + +// Function that makes an server request (API call) +function getApiResponse(url, callback) +{ + var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ + showLoading(false); + // console.log(xmlHttp.responseText); + callback(xmlHttp.responseText); + } + } + xmlHttp.open("GET", url, true); // true for asynchronous + showLoading(true); + xmlHttp.send(null); +} + + +// Callback that handles response from server +function xhrCallback(data){ + dataInJson = JSON.parse(data); + addSelectElementOptions(dataInJson); + checkSelectChanging(dataInJson); +} + +// Add options to select element +function addSelectElementOptions(arr){ + let selectElement = document.getElementById("repositories"); + arr.forEach(rep => { + let option = document.createElement('option'); + option.text = rep.name; + option.value = rep.id; + selectElement.appendChild(option); + }); +} + +//Function that works if select element change +function checkSelectChanging (arr) { + let selectElement = document.getElementById("repositories"); + selectElement.addEventListener("change", function(){ + const selectValue = selectElement.value; + repo = arr.filter(repo => repo.id == selectValue)[0]; + renderRepositoryInfo(repo); + const repoContributersUrl = repo.contributors_url; + getApiResponse(repoContributersUrl, renderRepositoryContributers); + }); +} + +function renderRepositoryInfo(selectedRepository){ + // let repo = arr.filter(repo => repo.id == value)[0]; + const repositoriesInfoElement = document.querySelector('#repo_info'); + while( repositoriesInfoElement.hasChildNodes()){ + repositoriesInfoElement.removeChild(repositoriesInfoElement.firstChild); + } + const repoContainer = document.createElement('div'); + repoContainer.setAttribute('class', 'repoContainer'); + + const repoLink = document.createElement('a'); + repoLink.setAttribute('target', '_blank'); + repoLink.href = selectedRepository.html_url; + repoLink.innerText = selectedRepository.name; + + const repoDescription = document.createElement('h3'); + repoDescription.innerText = "Description: " + selectedRepository.description; + + + const repoForks = document.createElement('h3'); + repoForks.innerText = "Forks: " + selectedRepository.forks + + const repoUpdate = document.createElement('h3'); + repoUpdate.innerText = "Last Updated: " + selectedRepository.updated_at; + + repoContainer.appendChild(repoLink); + repoContainer.appendChild(repoDescription); + repoContainer.appendChild(repoForks); + repoContainer.appendChild(repoUpdate); + repositoriesInfoElement.appendChild(repoContainer); +} + +function renderRepositoryContributers(response){ + const contributers = JSON.parse(response); + const contributorsListElement = document.querySelector('#repo_contributors'); + while( contributorsListElement.hasChildNodes()){ + contributorsListElement.removeChild(contributorsListElement.firstChild); + } + contributers.forEach(contributor => { + const contributorContainer = document.createElement('div'); + contributorContainer.setAttribute('class', 'contributorContainer'); + const listElement = document.createElement('h2'); + listElement.innerText = contributor.login; + const imgElement = document.createElement('img'); + imgElement.src = contributor.avatar_url; + const txtElement = document.createElement('h3'); + txtElement.innerText = contributor.contributions; + contributorContainer.appendChild(listElement); + contributorContainer.appendChild(imgElement); + contributorContainer.appendChild(txtElement); + contributorsListElement.appendChild(contributorContainer); + }) +} + +function showLoading(option) { + const loadingIcon = document.querySelector('#loading-icon'); + if (option) { + loadingIcon.innerHTML = `

Loading

`; + }else { + loadingIcon.innerHTML = ``; + } + +} + +/* { + 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.innerText = 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 { + console.log(data); + createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) }); + } + }); + } + 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/Week1/hw/style.css b/Week1/hw/style.css new file mode 100644 index 000000000..11268ade9 --- /dev/null +++ b/Week1/hw/style.css @@ -0,0 +1,99 @@ +/* .alert-error { + color: red; +} */ +.root{ + font-family: Arial, Helvetica, sans-serif; + font-size: 1.5em; +} + +a { + font-family: Arial, Helvetica, sans-serif; + font-size: 2em; +} + +.header{ + background-color: rgb(61, 120, 168); + padding: 2em; + border: 1px solid; + border-color: rgb(47, 110, 161); +} + +select{ + background-color: white; +} + +/* body { + background-color: white; + padding: 2em; + border: 1px solid; + border-color: rgb(57, 109, 151); +} */ + +.body { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-column-gap: 1px; + grid-gap: 2%; + } + +#repo_info{ +padding-top: 50px; +background: whitesmoke; +margin: 10px; +padding: 10px; +} + +.repoContainer { + box-sizing: border-box;; + width: 100%; + border: 1px solid; + border-color: rgb(180, 179, 179); + padding: 10px; + background-color: gainsboro; + font-size: 0.5em; + margin-top: 2%; +} + +#repo_contributors { +background: whitesmoke; +margin: 10px; +padding: 10px; +} + + +#contributorList{ + box-sizing: content-box; + width: 100%; +} + +.contributorContainer{ + box-sizing: border-box;; + width: 100%; + border: 1px solid; + border-color: rgb(180, 179, 179); + padding: 10px; + background-color: gainsboro; + margin-top: 2%; + margin-bottom: 2%; +} + +.contributorContainer h3{ + background-color: rgb(204, 200, 200); + padding: 1%; + border-radius: 15px; +} + +#repo_contributors img{ +width: 200px; +height: 200px; +border-radius: 5%; +} + +/* +.contributors{ + width: 100%; + background-color: white; + font-size: 0.5em; +} \ No newline at end of file diff --git a/Week2/hw/index.html b/Week2/hw/index.html new file mode 100644 index 000000000..ef932b19a --- /dev/null +++ b/Week2/hw/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + HYFJ3W1 + + + HYF-JavaScriptWeek8 + + + + +

+ +

> + +

+ + + + + \ No newline at end of file diff --git a/Week2/hw/index.js b/Week2/hw/index.js new file mode 100644 index 000000000..8f3204bb2 --- /dev/null +++ b/Week2/hw/index.js @@ -0,0 +1,137 @@ +function main(){ + console.log('main!'); + const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + fetchJSON(HyfReposHttps) + .then(data => xhrCallback(data)) + .catch(err => renderError(err)); +} + +function fetchJSON(url) { + console.log('calling fetch json'); + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(xhr.statusText)); + } + } + }; + xhr.send(); + }); +} + +function renderError(err) { + console.error(err.message); +} + + +// Callback that handles response from server +function xhrCallback(data){ + console.log('calling xhrcallback'); + addSelectElementOptions(data); + checkSelectChanging(data); +} + +// Add options to select element +function addSelectElementOptions(arr){ + console.log('calling addSelectElementOptions'); + let selectElement = document.getElementById("repositories"); + arr.forEach(rep => { + let option = document.createElement('option'); + option.text = rep.name; + option.value = rep.id; + selectElement.appendChild(option); + }); +} + +//Function that works if select element change +function checkSelectChanging (arr) { + console.log('calling checkSelectChanging'); + let selectElement = document.getElementById("repositories"); + selectElement.addEventListener("change", function(){ + const selectValue = selectElement.value; + const repo = arr.filter(repo => repo.id == selectValue)[0]; + renderRepositoryInfo(repo); + const repoContributersUrl = repo.contributors_url; + fetchJSON(repoContributersUrl) + .then(data=> renderRepositoryContributers(data)) + .catch(err => renderError(err)); + }); +} + +function renderRepositoryInfo(selectedRepository){ + // let repo = arr.filter(repo => repo.id == value)[0]; + console.log('calling renderRepositoryInfo'); + const repositoriesInfoElement = document.querySelector('#repo_info'); + // while( repositoriesInfoElement.hasChildNodes()){ + // repositoriesInfoElement.removeChild(repositoriesInfoElement.firstChild); + // } + repositoriesInfoElement.innerHTML =``; + repositoriesInfoElement.innerHTML =`

+ Repository: ${selectedRepository.name}
+ Description: ${selectedRepository.description}
+ Forks: ${selectedRepository.forks}
+ Updated: ${selectedRepository.updated_at}
+

`; + // const repoContainer = document.createElement('div'); + // repoContainer.setAttribute('class', 'repoContainer'); + + // const repoLink = document.createElement('a'); + // repoLink.setAttribute('target', '_blank'); + // repoLink.href = selectedRepository.html_url; + // repoLink.innerText = selectedRepository.name; + + // const repoDescription = document.createElement('h3'); + // repoDescription.innerText = "Description: " + selectedRepository.description; + + + // const repoForks = document.createElement('h3'); + // repoForks.innerText = "Forks: " + selectedRepository.forks + + // const repoUpdate = document.createElement('h3'); + // repoUpdate.innerText = "Last Updated: " + selectedRepository.updated_at; + + // repoContainer.appendChild(repoLink); + // repoContainer.appendChild(repoDescription); + // repoContainer.appendChild(repoForks); + // repoContainer.appendChild(repoUpdate); + // repositoriesInfoElement.appendChild(repoContainer); +} + +function renderRepositoryContributers(response){ + console.log('calling renderRepositoryContributers'); + const repoContributers = document.querySelector('#repo_contributors'); + repoContributers.innerHTML =``; + response.forEach(function(item){ + repoContributers.innerHTML += `

${item.login}

${item.contributions}

${this._data.login}

${this._data.contributions}

`; + } +} \ No newline at end of file diff --git a/Week3/src/Repository.js b/Week3/src/Repository.js new file mode 100644 index 000000000..3f3ace0a7 --- /dev/null +++ b/Week3/src/Repository.js @@ -0,0 +1,25 @@ +'use strict'; + +/* global Util */ + +// eslint-disable-next-line no-unused-vars + +class Repository { + constructor(data){ + this._data = data; + } + /** + * Render the repository info to the DOM. + * @param {HTMLElement} parent The parent element in which to render the repository. + */ + render(){ + const repositoriesInfoElement = document.querySelector('#repo_info'); + repositoriesInfoElement.innerHTML =``; + repositoriesInfoElement.innerHTML =`

+ Repository: ${this._data.name}
+ Description: ${this._data.description}
+ Forks: ${this._data.forks}
+ Updated: ${this._data.updated_at}
+

`; + } +} diff --git a/Week3/src/Util.js b/Week3/src/Util.js new file mode 100644 index 000000000..2834a86f6 --- /dev/null +++ b/Week3/src/Util.js @@ -0,0 +1,78 @@ +//contains general functions that App use +class Util{ + +} + +Util.fetchJSON = function(url){ + console.log('calling fetch json'); + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(xhr.statusText)); + } + } + }; + xhr.send(); + }); + +} + +Util.greeting = function(){ + console.log('Hello'); +}; + +// Add options to select element +Util.addSelectElementOptions = function (arr){ + console.log('calling addSelectElementOptions'); + let selectElement = document.getElementById("repositories"); + arr.forEach(rep => { + let option = document.createElement('option'); + option.text = rep.name; + option.value = rep.id; + selectElement.appendChild(option); + }); +} + +//Function that works if select element change +Util.checkSelectChanging = function(arr) { + try { + console.log('calling checkSelectChanging'); + const selectElement = document.getElementById("repositories"); + selectElement.addEventListener("change", async function(){ + const selectValue = selectElement.value; + + const repo = arr.filter(repo => repo.id == selectValue)[0]; + Util.renderRepositoryInfo(repo); + const repoContributersUrl = repo.contributors_url; + + const contributersList = await Util.fetchJSON(repoContributersUrl); + Util.renderRepositoryContributers(contributersList); + }); + }catch(err) { + console.log(err); + } +} + +Util.renderRepositoryInfo = function(arr){ + console.log('calling renderRepositoryInfo'); + const repository = new Repository(arr); + repository.render(); +} + +Util.renderRepositoryContributers = function(response){ + console.log('calling renderRepositoryContributers'); + const repoContributers = document.querySelector('#repo_contributors'); + + repoContributers.innerHTML =``; + + response.forEach(function(item){ + const contributor = new Contributor(item); + contributor.render(); + }); +} \ No newline at end of file diff --git a/Week3/src/hyf.png b/Week3/src/hyf.png new file mode 100644 index 000000000..a4626c91c Binary files /dev/null and b/Week3/src/hyf.png differ diff --git a/Week3/src/index.html b/Week3/src/index.html new file mode 100644 index 000000000..eea30dd54 --- /dev/null +++ b/Week3/src/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + HYF-JavaScriptWeek09 + + + + + + + +

+ +

> + +

+ + + + + + + \ No newline at end of file diff --git a/Week3/src/index.js b/Week3/src/index.js new file mode 100644 index 000000000..5c664dd9e --- /dev/null +++ b/Week3/src/index.js @@ -0,0 +1,146 @@ +'use strict'; +async function main(){ + try { + console.log('main!'); + const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const reposList = await fetchJSON(HyfReposHttps); + xhrCallback(reposList); + }catch(err) { + renderError(err) + } +} + + +function fetchJSON(url) { + console.log('calling fetch json'); + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + resolve(xhr.response); + } else { + reject(new Error(xhr.statusText)); + } + } + }; + xhr.send(); + }); +} + +function renderError(err) { + console.error(err.message); +} + + +// Callback that handles response from server +function xhrCallback(data){ + console.log('calling xhrcallback'); + addSelectElementOptions(data); + checkSelectChanging(data); +} + +// Add options to select element +function addSelectElementOptions(arr){ + console.log('calling addSelectElementOptions'); + let selectElement = document.getElementById("repositories"); + arr.forEach(rep => { + let option = document.createElement('option'); + option.text = rep.name; + option.value = rep.id; + selectElement.appendChild(option); + }); +} + +//Function that works if select element change +function checkSelectChanging (arr) { + try { + console.log('calling checkSelectChanging'); + let selectElement = document.getElementById("repositories"); + selectElement.addEventListener("change", async function(){ + const selectValue = selectElement.value; + const repo = arr.filter(repo => repo.id == selectValue)[0]; + renderRepositoryInfo(repo); + const repoContributersUrl = repo.contributors_url; + const contributersList = await fetchJSON(repoContributersUrl); + renderRepositoryContributers(contributersList); + }); + }catch(err) { + renderError(err) + } +} + + +function renderRepositoryInfo(selectedRepository){ + // let repo = arr.filter(repo => repo.id == value)[0]; + console.log('calling renderRepositoryInfo'); + const repositoriesInfoElement = document.querySelector('#repo_info'); + // while( repositoriesInfoElement.hasChildNodes()){ + // repositoriesInfoElement.removeChild(repositoriesInfoElement.firstChild); + // } + repositoriesInfoElement.innerHTML =``; + repositoriesInfoElement.innerHTML =`

+ Repository: ${selectedRepository.name}
+ Description: ${selectedRepository.description}
+ Forks: ${selectedRepository.forks}
+ Updated: ${selectedRepository.updated_at}
+

${item.login}

${item.contributions}

`; + }); + // const contributorsListElement = document.querySelector('#contributorList'); + // const contributorsListElement = document.querySelector('#repo_contributors'); + // while( contributorsListElement.hasChildNodes()){ + // contributorsListElement.removeChild(contributorsListElement.firstChild); + // } + + // contributers.forEach(contributor => { + // const contributorContainer = document.createElement('div'); + // contributorContainer.setAttribute('class', 'contributorContainer'); + // const listElement = document.createElement('h2'); + // listElement.innerText = contributor.login; + // const imgElement = document.createElement('img'); + // imgElement.src = contributor.avatar_url; + // const txtElement = document.createElement('h3'); + // txtElement.innerText = contributor.contributions; + // contributorContainer.appendChild(listElement); + // contributorContainer.appendChild(imgElement); + // contributorContainer.appendChild(txtElement); + // contributorsListElement.appendChild(contributorContainer); + // }); +} diff --git a/Week3/src/style.css b/Week3/src/style.css new file mode 100644 index 000000000..25bd21774 --- /dev/null +++ b/Week3/src/style.css @@ -0,0 +1,104 @@ +/* .alert-error { + color: red; +} */ +.root{ + font-family: Arial, Helvetica, sans-serif; + font-size: 1.5em; +} + +a { + font-family: Arial, Helvetica, sans-serif; + font-size: 1.2em; +} + +.header{ + background-color: rgb(61, 120, 168); + padding: 2em; + border: 5px solid black; + border-color: rgb(60, 100, 160); +} + +select{ + background-color: white; +} + +/* body { + background-color: white; + padding: 2em; + border: 1px solid; + border-color: rgb(57, 109, 151); +} */ + +.body { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-column-gap: 1px; + grid-gap: 2%; + } + +#repo_info{ +padding-top: 50px; +background: whitesmoke; +margin: 10px; +padding: 10px; +} + +.repoContainer { + box-sizing: border-box;; + width: 100%; + border: 1px solid; + border-color: rgb(180, 179, 179); + padding: 10px; + background-color: gainsboro; + font-size: 0.75em; + margin-top: 2%; +} + +#repo_contributors { +background: whitesmoke; +margin: 10px; +padding: 10px; +} + + +#contributorList{ + box-sizing: content-box; + width: 100%; +} + +.contributorContainer{ + box-sizing: border-box;; + width: 100%; + border: 1px solid; + border-color: rgb(180, 179, 179); + padding: 10px; + background-color: gainsboro; + margin-top: 2%; + margin-bottom: 2%; +} + +.contributorContainer h3{ + background-color: rgb(204, 200, 200); + padding: 1%; + border-radius: 15px; +} +.contributorContainer h5{ + background-color: rgb(190, 200, 200); + padding: 1%; + border-radius: 15px; +} + +.contributorContainer img{ +width: 200px; +height: 200px; +border-radius: 5%; +} + +/* +.contributors{ + width: 100%; + background-color: white; + font-size: 0.5em; +} \ No newline at end of file diff --git a/homework/src/Contributor.js b/homework/src/Contributor.js index 34bcc810b..0bfd5a15e 100644 --- a/homework/src/Contributor.js +++ b/homework/src/Contributor.js @@ -4,15 +4,16 @@ // eslint-disable-next-line no-unused-vars class Contributor { - constructor(data) { - this.data = data; + constructor(contributor) { + this.contributor = contributor; } /** * Render the contributor info to the DOM. - * @param {HTMLElement} contributorList The parent element in which to render the contributor. - */ - render(contributorList) { - // Replace this comment with your code + * @param {HTMLElement} container The container element in which to render the contributor. + */ + render(container) { + // TODO: replace the next line with your code. + Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2)); } } diff --git a/homework/src/index1.js b/homework/src/index1.js new file mode 100644 index 000000000..5df30f87d --- /dev/null +++ b/homework/src/index1.js @@ -0,0 +1,187 @@ +function main() { + const HyfRepositoriesHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + var HyfContributorHttps = null; + + + getRepositories(HyfRepositoriesHttps, xhrCallback); + + + console.log('main!'); + console.log(HyfContributorHttps); + } + var repositories = []; + var contributors = []; + + // Callback that handles response from server (when i get the data) + function xhrCallback(data) { + //console.log('data from server', data); + repositories = JSON.parse(data); + console.log('parsed repo data:', repositories); + + showRepositoriesInSelect(repositories); + } + // Callback that handels contributor reponse from server. + function xhrCallbackContributors(data) { + //console.log('data from server', data); + contributors = JSON.parse(data); + console.log('parsed contributor data:', contributors); + + showContributorsInList(contributors); + } + + function showRepositoriesInSelect(repositories) { + const repositoriesSelectElement = document.querySelector('#repositories'); + repositoriesSelectElement.setAttribute('onchange', "getSelectedRepository(this)"); + + repositories.forEach(repository => { + const optionElement = document.createElement('option'); + optionElement.setAttribute('value', repository.id); + optionElement.innerText = repository.name; + + repositoriesSelectElement.appendChild(optionElement); + }); + + + } + function showContributorsInList(contributors) { + const contributorsListElement = document.querySelector('#contributorList'); + // Removes current list. + while( contributorsListElement.hasChildNodes()){ + contributorsListElement.removeChild(contributorsListElement.firstChild); + } + // Renders new list. + contributors.forEach(contributor => { + const contributorContainer = document.createElement('div'); + contributorContainer.setAttribute('class', 'contributorContainer'); + const listElement = document.createElement('h2'); + listElement.innerText = contributor.login; + const imgElement = document.createElement('img'); + imgElement.src = contributor.avatar_url; + const txtElement = document.createElement('h3'); + txtElement.innerText = contributor.contributions; + contributorContainer.appendChild(listElement); + contributorContainer.appendChild(imgElement); + contributorContainer.appendChild(txtElement); + contributorsListElement.appendChild(contributorContainer); + }) + } + + function showRepositoryInformation(selectedRepository){ + const repositoriesInformationElement = document.querySelector('.repoinfo'); + + while( repositoriesInformationElement.hasChildNodes()){ + repositoriesInformationElement.removeChild(repositoriesInformationElement.firstChild); + } + + const repoContainer = document.createElement('div'); + repoContainer.setAttribute('class', 'repoContainer'); + + const repoLink = document.createElement('a'); + repoLink.setAttribute('target', '_blank'); + repoLink.href = selectedRepository.html_url; + repoLink.innerText = selectedRepository.name; + + const repoDescription = document.createElement('h3'); + repoDescription.innerText = "Description: " + selectedRepository.description; + + + const repoForks = document.createElement('h3'); + repoForks.innerText = "Forks: " + selectedRepository.forks + + const repoUpdate = document.createElement('h3'); + repoUpdate.innerText = "Last Updated: " + selectedRepository.updated_at; + + repoContainer.appendChild(repoLink); + repoContainer.appendChild(repoDescription); + repoContainer.appendChild(repoForks); + repoContainer.appendChild(repoUpdate); + repositoriesInformationElement.appendChild(repoContainer); + + } + + function getSelectedRepository(repositoriesSelectElement) { + const selectedRepository = repositories.filter(repository => { + return repository.id == Number.parseInt(repositoriesSelectElement.value); + })[0]; + console.log('Selected repository', selectedRepository); + getSelectedRepositoryContributors(selectedRepository); + showRepositoryInformation(selectedRepository); + } + + function getSelectedRepositoryContributors(selectedRepository){ + HyfContributorHttps = selectedRepository.contributors_url; + console.log(HyfContributorHttps); + getContributors(HyfContributorHttps, xhrCallbackContributors); + } + + + + // Function that makes an server request (API call) + function getRepositories(theUrl, callback) { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function () { + if (xmlHttp.readyState == 4 && xmlHttp.status == 200) + // console.log(xmlHttp.responseText); + callback(xmlHttp.responseText); + } + xmlHttp.open("GET", theUrl, true); // true for asynchronous + xmlHttp.send(null); + } + + function getContributors(theUrl, callback) { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function () { + if (xmlHttp.readyState == 4 && xmlHttp.status == 200) + callback(xmlHttp.responseText); + } + xmlHttp.open("GET", theUrl, true); // true for asynchronous + xmlHttp.send(null); + } + +/* '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.innerText = 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 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