From a8b2cfec0c414694b50d0772bf4892d2f9b62e70 Mon Sep 17 00:00:00 2001 From: Farshid Farjad Date: Fri, 16 Nov 2018 13:09:29 +0100 Subject: [PATCH 1/7] JS3test --- Week1/hw/script.js | 20 ++++++++++++++++++++ Week1/hw/test.html | 13 +++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 Week1/hw/script.js create mode 100644 Week1/hw/test.html diff --git a/Week1/hw/script.js b/Week1/hw/script.js new file mode 100644 index 000000000..ac20d21a2 --- /dev/null +++ b/Week1/hw/script.js @@ -0,0 +1,20 @@ +function fetchJSON(url){ + let xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status < 400) { + return (xhr.response); + } else { + console.log('failled') ; + } + } + }; + xhr.send(); +} + + + +let value = fetchJSON('http://api.nobelprize.org/v1/prize.json?year=2017'); +console.log(value); \ No newline at end of file diff --git a/Week1/hw/test.html b/Week1/hw/test.html new file mode 100644 index 000000000..c6ae236f8 --- /dev/null +++ b/Week1/hw/test.html @@ -0,0 +1,13 @@ + + + + + + Codestin Search App + + + + + + + \ No newline at end of file From 84cc812c7eed6ffdba0e3f4ac1ceb179d2816ad5 Mon Sep 17 00:00:00 2001 From: Farshid Farjad Date: Fri, 16 Nov 2018 13:17:34 +0100 Subject: [PATCH 2/7] JS3test --- Week1/hw/index.html | 23 ++++++++++++++++++++++ Week1/hw/index.js | 47 +++++++++++++++++++++++++++++++++++++++++++++ Week1/hw/script.js | 20 ------------------- Week1/hw/style.css | 3 +++ Week1/hw/test.html | 13 ------------- 5 files changed, 73 insertions(+), 33 deletions(-) create mode 100644 Week1/hw/index.html create mode 100644 Week1/hw/index.js delete mode 100644 Week1/hw/script.js create mode 100644 Week1/hw/style.css delete mode 100644 Week1/hw/test.html diff --git a/Week1/hw/index.html b/Week1/hw/index.html new file mode 100644 index 000000000..9c8f80c1a --- /dev/null +++ b/Week1/hw/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + Codestin Search App + + + + + +

+ + + + \ No newline at end of file diff --git a/Week1/hw/index.js b/Week1/hw/index.js new file mode 100644 index 000000000..f0a3a2f06 --- /dev/null +++ b/Week1/hw/index.js @@ -0,0 +1,47 @@ +'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); +} diff --git a/Week1/hw/script.js b/Week1/hw/script.js deleted file mode 100644 index ac20d21a2..000000000 --- a/Week1/hw/script.js +++ /dev/null @@ -1,20 +0,0 @@ -function fetchJSON(url){ - let xhr = new XMLHttpRequest(); - xhr.open('GET', url); - xhr.responseType = 'json'; - xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - if (xhr.status < 400) { - return (xhr.response); - } else { - console.log('failled') ; - } - } - }; - xhr.send(); -} - - - -let value = fetchJSON('http://api.nobelprize.org/v1/prize.json?year=2017'); -console.log(value); \ No newline at end of file diff --git a/Week1/hw/style.css b/Week1/hw/style.css new file mode 100644 index 000000000..a8985a8a5 --- /dev/null +++ b/Week1/hw/style.css @@ -0,0 +1,3 @@ +.alert-error { + color: red; +} \ No newline at end of file diff --git a/Week1/hw/test.html b/Week1/hw/test.html deleted file mode 100644 index c6ae236f8..000000000 --- a/Week1/hw/test.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Codestin Search App - - - - - - - \ No newline at end of file From c93051b9ecc514209d62a7fb059f8a656aa171d4 Mon Sep 17 00:00:00 2001 From: Farshid Farjad Date: Fri, 16 Nov 2018 13:24:01 +0100 Subject: [PATCH 3/7] JS3Week1 --- Week1/hw/index.html | 31 ++++++++++- Week1/hw/index.js | 125 +++++++++++++++++++++++++++++++++++++++++--- Week1/hw/style.css | 98 +++++++++++++++++++++++++++++++++- 3 files changed, 245 insertions(+), 9 deletions(-) diff --git a/Week1/hw/index.html b/Week1/hw/index.html index 9c8f80c1a..8c6a7cc50 100644 --- a/Week1/hw/index.html +++ b/Week1/hw/index.html @@ -8,16 +8,43 @@ + Codestin Search App Codestin Search App + +

+ +

- -

> +

+ +

+ \ No newline at end of file diff --git a/Week1/hw/index.js b/Week1/hw/index.js index f0a3a2f06..182a0d4d0 100644 --- a/Week1/hw/index.js +++ b/Week1/hw/index.js @@ -1,6 +1,122 @@ -'use strict'; +function main(){ + console.log('main!'); + const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos'; + getApiResponse(HyfReposHttps, xhrCallback); + console.log(HyfReposHttps); +} + +// Function that makes an server request (API call) +function getApiResponse(theUrl, 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", theUrl, 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('#contributorList'); + 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); @@ -15,7 +131,6 @@ xhr.onerror = () => cb(new Error('Network request failed')); xhr.send(); } - function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); @@ -29,19 +144,17 @@ }); 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 index a8985a8a5..11268ade9 100644 --- a/Week1/hw/style.css +++ b/Week1/hw/style.css @@ -1,3 +1,99 @@ -.alert-error { +/* .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 From 5bb278ccb6e73bee19c1f35d62489a3449ef95d8 Mon Sep 17 00:00:00 2001 From: Farshid Farjad Date: Fri, 16 Nov 2018 13:27:23 +0100 Subject: [PATCH 4/7] JS3Week1 --- Week1/hw/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week1/hw/index.html b/Week1/hw/index.html index 8c6a7cc50..c9c9a3ba0 100644 --- a/Week1/hw/index.html +++ b/Week1/hw/index.html @@ -13,7 +13,7 @@ Codestin Search App - +

@@ -40,7 +40,7 @@

--> - + From 454659121a8670eb2d694d830d744e320aa80698 Mon Sep 17 00:00:00 2001 From: Farshid Farjad Date: Sat, 1 Dec 2018 19:18:31 +0100 Subject: [PATCH 6/7] week2 and some week1 and homework/src/index1.js --- Week1/hw/index.html | 4 +- Week1/hw/index.js | 8 +- Week2/hw/index.html | 43 ++++++++++ Week2/hw/index.js | 137 ++++++++++++++++++++++++++++++ Week2/hw/style.css | 104 +++++++++++++++++++++++ homework/src/index1.js | 187 +++++++++++++++++++++++++++++++++++++++++ 6 files changed, 477 insertions(+), 6 deletions(-) create mode 100644 Week2/hw/index.html create mode 100644 Week2/hw/index.js create mode 100644 Week2/hw/style.css create mode 100644 homework/src/index1.js diff --git a/Week1/hw/index.html b/Week1/hw/index.html index cfdebeab5..423bb7f35 100644 --- a/Week1/hw/index.html +++ b/Week1/hw/index.html @@ -29,8 +29,8 @@

> -

diff --git a/Week1/hw/index.js b/Week1/hw/index.js index 182a0d4d0..f21f36eff 100644 --- a/Week1/hw/index.js +++ b/Week1/hw/index.js @@ -1,13 +1,13 @@ function main(){ console.log('main!'); - const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos'; + 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(theUrl, callback) +function getApiResponse(url, callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { @@ -17,7 +17,7 @@ function getApiResponse(theUrl, callback) callback(xmlHttp.responseText); } } - xmlHttp.open("GET", theUrl, true); // true for asynchronous + xmlHttp.open("GET", url, true); // true for asynchronous showLoading(true); xmlHttp.send(null); } @@ -86,7 +86,7 @@ function renderRepositoryInfo(selectedRepository){ function renderRepositoryContributers(response){ const contributers = JSON.parse(response); - const contributorsListElement = document.querySelector('#contributorList'); + const contributorsListElement = document.querySelector('#repo_contributors'); while( contributorsListElement.hasChildNodes()){ contributorsListElement.removeChild(contributorsListElement.firstChild); } diff --git a/Week2/hw/index.html b/Week2/hw/index.html new file mode 100644 index 000000000..70bac3616 --- /dev/null +++ b/Week2/hw/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + Codestin Search App + + + Codestin Search App + + + + +

+ +

> + +

+ + + + + \ No newline at end of file diff --git a/Week2/hw/index.js b/Week2/hw/index.js new file mode 100644 index 000000000..928c129b2 --- /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; + 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}

`; + }); + // 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/Week2/hw/style.css b/Week2/hw/style.css new file mode 100644 index 000000000..25bd21774 --- /dev/null +++ b/Week2/hw/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/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 From 44e23818634d6a6de6023cfd13d555944ff397d6 Mon Sep 17 00:00:00 2001 From: Farshid Farjad Date: Fri, 7 Dec 2018 16:07:00 +0100 Subject: [PATCH 7/7] Week3 and Week2 --- Week2/hw/index.html | 2 +- Week2/hw/index.js | 2 +- Week3/src/App.js | 26 +++++++ Week3/src/Contributor.js | 19 +++++ Week3/src/Repository.js | 25 ++++++ Week3/src/Util.js | 78 +++++++++++++++++++ Week3/src/hyf.png | Bin 0 -> 6971 bytes Week3/src/index.html | 42 +++++++++++ Week3/src/index.js | 146 ++++++++++++++++++++++++++++++++++++ Week3/src/style.css | 104 +++++++++++++++++++++++++ homework/src/Contributor.js | 13 ++-- 11 files changed, 449 insertions(+), 8 deletions(-) create mode 100644 Week3/src/App.js create mode 100644 Week3/src/Contributor.js create mode 100644 Week3/src/Repository.js create mode 100644 Week3/src/Util.js create mode 100644 Week3/src/hyf.png create mode 100644 Week3/src/index.html create mode 100644 Week3/src/index.js create mode 100644 Week3/src/style.css diff --git a/Week2/hw/index.html b/Week2/hw/index.html index 70bac3616..ef932b19a 100644 --- a/Week2/hw/index.html +++ b/Week2/hw/index.html @@ -11,7 +11,7 @@ Codestin Search App - Codestin Search App + Codestin Search App diff --git a/Week2/hw/index.js b/Week2/hw/index.js index 928c129b2..8f3204bb2 100644 --- a/Week2/hw/index.js +++ b/Week2/hw/index.js @@ -55,7 +55,7 @@ function checkSelectChanging (arr) { let selectElement = document.getElementById("repositories"); selectElement.addEventListener("change", function(){ const selectValue = selectElement.value; - repo = arr.filter(repo => repo.id == selectValue)[0]; + const repo = arr.filter(repo => repo.id == selectValue)[0]; renderRepositoryInfo(repo); const repoContributersUrl = repo.contributors_url; fetchJSON(repoContributersUrl) diff --git a/Week3/src/App.js b/Week3/src/App.js new file mode 100644 index 000000000..b0dda9dbe --- /dev/null +++ b/Week3/src/App.js @@ -0,0 +1,26 @@ + +'use strict' +class App { + constructor(url){ + this._reposUrl = url; + } + + async start(){ + try { + console.log('app!'); + const repositories = await Util.fetchJSON(this._reposUrl); + Util.addSelectElementOptions(repositories); + Util.checkSelectChanging(repositories); + } + catch(error){ + console.log(error); + } + } + +} + +window.onload = () =>{ + const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const app = new App(HyfReposHttps); + app.start(); +} \ No newline at end of file diff --git a/Week3/src/Contributor.js b/Week3/src/Contributor.js new file mode 100644 index 000000000..e5c1b035c --- /dev/null +++ b/Week3/src/Contributor.js @@ -0,0 +1,19 @@ +'use strict'; + +/* global Util */ + +class Contributor { + constructor(data){ + this._data = data; + } + + render(){ + console.log('calling renderRepositoryContributers'); + const repoContributers = document.querySelector('#repo_contributors'); + repoContributers.innerHTML +=`

${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 0000000000000000000000000000000000000000..a4626c91cc28dd92f3a8843aa3919c472d609984 GIT binary patch literal 6971 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

yYR!c>hm$${Gy*N9&8XDjZ!65Rw_ciO4 z0&aFLEIenv__Nv_t*>({#yj`xE&E==WFBy2C{3B&xkGWnzEKCWENz0#Jwmk4zVlFkwA zUE)Mh&#vxEf;BeYy)nJloYs7`DnyjD`0Y^YQxyIS4d+#4vCtj@wK(UEa7cSZ{%+_S zF5bPJcnZ{2mGzB;1m2r>)!K>%2Gu6MG)9*tE%!%>7iF8elLW^N_ATFxu1g9EHe#TP zioN@YLEDN*VPJ4@2<(Btz*yzfz(+*aind)cZ;In-Ma_C>M7IU7bV^BSGjy@pn_Oiy zl(>YaYv~ZLZ6?2| zypqx#xM_@it9|v)xZLTBUY$2}F#h#dZw(FfZMj~GCAIsW9-ejAu^{m6fGn&mwBazA z$4SkC7#JSJ5ORgz?e8Za7blKG zizmAOF6s_0y+`YkEtdk66Bg{o)5UJp?R6bosX}uWa5r9Z;`c2J>xic=TTI`dXBr*WBCNn29fqV6ysrW=%FRy~JIbo7vs+uqhLB(6-tKNnYKpCmouZ+D4Ut!foH9vbFwA+LF zI7vtr2nkSgSy6J!bGN8T54?{ONFInoHx(5ujzh>RfnKf&aCZm;~Lq@38Pp8iO=Vl3`;QmS7? z>df*6iV+(X9gIBIsiWyB&yQYTtgLi&bp8{}c6k5psn*E*JjN>kJ>x?S?L9m?e5`+Yb*8W^Xi^TEM;a8OWq*Wp?nQa`5QB q{eMOe|IHi!$Di^1?!}AeXDJlZH8z|Z3FM~O3k6wKnM$dzKmQAHWO%^< literal 0 HcmV?d00001 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 @@ + + + + + + + + + + + Codestin Search App + + + + + + + +

+ +

> + +

+ + + + + + + \ 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}
+