Skip to content

Commit 44e2381

Browse files
ffarjadffarjad
committed
Week3 and Week2
1 parent 4546591 commit 44e2381

11 files changed

Lines changed: 449 additions & 8 deletions

File tree

‎Week2/hw/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<title>HYFJ3W1</title>
1212
<link rel="apple-touch-icon" href="./hyf.png">
1313
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
14-
<title>HYF-GITHUB</title>
14+
<title>HYF-JavaScriptWeek8</title>
1515
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
1616
<link rel="stylesheet" href="style.css">
1717
</head>

‎Week2/hw/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function checkSelectChanging (arr) {
5555
let selectElement = document.getElementById("repositories");
5656
selectElement.addEventListener("change", function(){
5757
const selectValue = selectElement.value;
58-
repo = arr.filter(repo => repo.id == selectValue)[0];
58+
const repo = arr.filter(repo => repo.id == selectValue)[0];
5959
renderRepositoryInfo(repo);
6060
const repoContributersUrl = repo.contributors_url;
6161
fetchJSON(repoContributersUrl)

‎Week3/src/App.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
'use strict'
3+
class App {
4+
constructor(url){
5+
this._reposUrl = url;
6+
}
7+
8+
async start(){
9+
try {
10+
console.log('app!');
11+
const repositories = await Util.fetchJSON(this._reposUrl);
12+
Util.addSelectElementOptions(repositories);
13+
Util.checkSelectChanging(repositories);
14+
}
15+
catch(error){
16+
console.log(error);
17+
}
18+
}
19+
20+
}
21+
22+
window.onload = () =>{
23+
const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
24+
const app = new App(HyfReposHttps);
25+
app.start();
26+
}

‎Week3/src/Contributor.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
3+
/* global Util */
4+
5+
class Contributor {
6+
constructor(data){
7+
this._data = data;
8+
}
9+
10+
render(){
11+
console.log('calling renderRepositoryContributers');
12+
const repoContributers = document.querySelector('#repo_contributors');
13+
repoContributers.innerHTML +=`<div class="contributorContainer">
14+
<div class="contributorList"><h3>${this._data.login}</h3></div>
15+
<div class="contributorList"><img src=${this._data.avatar_url}></div>
16+
<div class="contributorList"><h5>${this._data.contributions}</h5></div>
17+
</div>`;
18+
}
19+
}

‎Week3/src/Repository.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
/* global Util */
4+
5+
// eslint-disable-next-line no-unused-vars
6+
7+
class Repository {
8+
constructor(data){
9+
this._data = data;
10+
}
11+
/**
12+
* Render the repository info to the DOM.
13+
* @param {HTMLElement} parent The parent element in which to render the repository.
14+
*/
15+
render(){
16+
const repositoriesInfoElement = document.querySelector('#repo_info');
17+
repositoriesInfoElement.innerHTML =``;
18+
repositoriesInfoElement.innerHTML =`<div class="repoContainer">
19+
<strong>Repository: </strong><span><a href=${this._data.html_url}>${this._data.name}</a></span><br>
20+
<strong>Description: </strong><span>${this._data.description}</span><br>
21+
<strong>Forks: </strong><span>${this._data.forks}</span><br>
22+
<strong>Updated: </strong><span>${this._data.updated_at}</span><br>
23+
</div>`;
24+
}
25+
}

‎Week3/src/Util.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
//contains general functions that App use
2+
class Util{
3+
4+
}
5+
6+
Util.fetchJSON = function(url){
7+
console.log('calling fetch json');
8+
return new Promise((resolve, reject) => {
9+
const xhr = new XMLHttpRequest();
10+
xhr.open('GET', url);
11+
xhr.responseType = 'json';
12+
xhr.onreadystatechange = () => {
13+
if (xhr.readyState === 4) {
14+
if (xhr.status < 400) {
15+
resolve(xhr.response);
16+
} else {
17+
reject(new Error(xhr.statusText));
18+
}
19+
}
20+
};
21+
xhr.send();
22+
});
23+
24+
}
25+
26+
Util.greeting = function(){
27+
console.log('Hello');
28+
};
29+
30+
// Add options to select element
31+
Util.addSelectElementOptions = function (arr){
32+
console.log('calling addSelectElementOptions');
33+
let selectElement = document.getElementById("repositories");
34+
arr.forEach(rep => {
35+
let option = document.createElement('option');
36+
option.text = rep.name;
37+
option.value = rep.id;
38+
selectElement.appendChild(option);
39+
});
40+
}
41+
42+
//Function that works if select element change
43+
Util.checkSelectChanging = function(arr) {
44+
try {
45+
console.log('calling checkSelectChanging');
46+
const selectElement = document.getElementById("repositories");
47+
selectElement.addEventListener("change", async function(){
48+
const selectValue = selectElement.value;
49+
50+
const repo = arr.filter(repo => repo.id == selectValue)[0];
51+
Util.renderRepositoryInfo(repo);
52+
const repoContributersUrl = repo.contributors_url;
53+
54+
const contributersList = await Util.fetchJSON(repoContributersUrl);
55+
Util.renderRepositoryContributers(contributersList);
56+
});
57+
}catch(err) {
58+
console.log(err);
59+
}
60+
}
61+
62+
Util.renderRepositoryInfo = function(arr){
63+
console.log('calling renderRepositoryInfo');
64+
const repository = new Repository(arr);
65+
repository.render();
66+
}
67+
68+
Util.renderRepositoryContributers = function(response){
69+
console.log('calling renderRepositoryContributers');
70+
const repoContributers = document.querySelector('#repo_contributors');
71+
72+
repoContributers.innerHTML =``;
73+
74+
response.forEach(function(item){
75+
const contributor = new Contributor(item);
76+
contributor.render();
77+
});
78+
}

‎Week3/src/hyf.png‎

6.81 KB
Loading

‎Week3/src/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7+
<meta name="theme-color" content="#000000">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="mobile-web-app-capable" content="yes">
10+
<meta name="format-detection" content="telephone=no">
11+
<title>HYF-JavaScriptWeek09</title>
12+
<link rel="apple-touch-icon" href="hyf.png">
13+
<link rel="shortcut icon" type="image/png" href="hyf.png" />
14+
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
15+
<link rel="stylesheet" href="style.css">
16+
</head>
17+
<!-- <body onload="main()"> -->
18+
<body>
19+
<div class="root">
20+
<div class="header">
21+
<label for="repositories">HYF Repositories</label>
22+
<select id="repositories">
23+
<option selected="Choose Repository">Choose a Repository</option>
24+
</select>
25+
</div>
26+
<div class="body row">
27+
<div id="repo_info" class="repo_info">
28+
29+
</div>
30+
<div id="repo_contributors" class="repo_contributors">>
31+
<!-- <div id="contributorList">
32+
</div> -->
33+
</div>
34+
</div>
35+
</div>
36+
<!-- <script src="index.js"></script> -->
37+
<script src="App.js"></script>
38+
<script src="Util.js"></script>
39+
<script src="Repository.js"></script>
40+
<script src="Contributor.js"></script>
41+
</body>
42+
</html>

‎Week3/src/index.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
'use strict';
2+
async function main(){
3+
try {
4+
console.log('main!');
5+
const HyfReposHttps = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
6+
const reposList = await fetchJSON(HyfReposHttps);
7+
xhrCallback(reposList);
8+
}catch(err) {
9+
renderError(err)
10+
}
11+
}
12+
13+
14+
function fetchJSON(url) {
15+
console.log('calling fetch json');
16+
return new Promise((resolve, reject) => {
17+
const xhr = new XMLHttpRequest();
18+
xhr.open('GET', url);
19+
xhr.responseType = 'json';
20+
xhr.onreadystatechange = () => {
21+
if (xhr.readyState === 4) {
22+
if (xhr.status < 400) {
23+
resolve(xhr.response);
24+
} else {
25+
reject(new Error(xhr.statusText));
26+
}
27+
}
28+
};
29+
xhr.send();
30+
});
31+
}
32+
33+
function renderError(err) {
34+
console.error(err.message);
35+
}
36+
37+
38+
// Callback that handles response from server
39+
function xhrCallback(data){
40+
console.log('calling xhrcallback');
41+
addSelectElementOptions(data);
42+
checkSelectChanging(data);
43+
}
44+
45+
// Add options to select element
46+
function addSelectElementOptions(arr){
47+
console.log('calling addSelectElementOptions');
48+
let selectElement = document.getElementById("repositories");
49+
arr.forEach(rep => {
50+
let option = document.createElement('option');
51+
option.text = rep.name;
52+
option.value = rep.id;
53+
selectElement.appendChild(option);
54+
});
55+
}
56+
57+
//Function that works if select element change
58+
function checkSelectChanging (arr) {
59+
try {
60+
console.log('calling checkSelectChanging');
61+
let selectElement = document.getElementById("repositories");
62+
selectElement.addEventListener("change", async function(){
63+
const selectValue = selectElement.value;
64+
const repo = arr.filter(repo => repo.id == selectValue)[0];
65+
renderRepositoryInfo(repo);
66+
const repoContributersUrl = repo.contributors_url;
67+
const contributersList = await fetchJSON(repoContributersUrl);
68+
renderRepositoryContributers(contributersList);
69+
});
70+
}catch(err) {
71+
renderError(err)
72+
}
73+
}
74+
75+
76+
function renderRepositoryInfo(selectedRepository){
77+
// let repo = arr.filter(repo => repo.id == value)[0];
78+
console.log('calling renderRepositoryInfo');
79+
const repositoriesInfoElement = document.querySelector('#repo_info');
80+
// while( repositoriesInfoElement.hasChildNodes()){
81+
// repositoriesInfoElement.removeChild(repositoriesInfoElement.firstChild);
82+
// }
83+
repositoriesInfoElement.innerHTML =``;
84+
repositoriesInfoElement.innerHTML =`<div class="repoContainer">
85+
<strong>Repository: </strong><span><a href=${selectedRepository.html_url}>${selectedRepository.name}</a></span><br>
86+
<strong>Description: </strong><span>${selectedRepository.description}</span><br>
87+
<strong>Forks: </strong><span>${selectedRepository.forks}</span><br>
88+
<strong>Updated: </strong><span>${selectedRepository.updated_at}</span><br>
89+
</div>`;
90+
// const repoContainer = document.createElement('div');
91+
// repoContainer.setAttribute('class', 'repoContainer');
92+
93+
// const repoLink = document.createElement('a');
94+
// repoLink.setAttribute('target', '_blank');
95+
// repoLink.href = selectedRepository.html_url;
96+
// repoLink.innerText = selectedRepository.name;
97+
98+
// const repoDescription = document.createElement('h3');
99+
// repoDescription.innerText = "Description: " + selectedRepository.description;
100+
101+
102+
// const repoForks = document.createElement('h3');
103+
// repoForks.innerText = "Forks: " + selectedRepository.forks
104+
105+
// const repoUpdate = document.createElement('h3');
106+
// repoUpdate.innerText = "Last Updated: " + selectedRepository.updated_at;
107+
108+
// repoContainer.appendChild(repoLink);
109+
// repoContainer.appendChild(repoDescription);
110+
// repoContainer.appendChild(repoForks);
111+
// repoContainer.appendChild(repoUpdate);
112+
// repositoriesInfoElement.appendChild(repoContainer);
113+
}
114+
115+
function renderRepositoryContributers(response){
116+
console.log('calling renderRepositoryContributers');
117+
const repoContributers = document.querySelector('#repo_contributors');
118+
repoContributers.innerHTML =``;
119+
response.forEach(function(item){
120+
repoContributers.innerHTML += `<div class="contributorContainer">
121+
<div class="contributorList"><h3>${item.login}</h3></div>
122+
<div class="contributorList"><img src=${item.avatar_url}></div>
123+
<div class="contributorList"><h5>${item.contributions}</h4></div>
124+
</div>`;
125+
});
126+
// const contributorsListElement = document.querySelector('#contributorList');
127+
// const contributorsListElement = document.querySelector('#repo_contributors');
128+
// while( contributorsListElement.hasChildNodes()){
129+
// contributorsListElement.removeChild(contributorsListElement.firstChild);
130+
// }
131+
132+
// contributers.forEach(contributor => {
133+
// const contributorContainer = document.createElement('div');
134+
// contributorContainer.setAttribute('class', 'contributorContainer');
135+
// const listElement = document.createElement('h2');
136+
// listElement.innerText = contributor.login;
137+
// const imgElement = document.createElement('img');
138+
// imgElement.src = contributor.avatar_url;
139+
// const txtElement = document.createElement('h3');
140+
// txtElement.innerText = contributor.contributions;
141+
// contributorContainer.appendChild(listElement);
142+
// contributorContainer.appendChild(imgElement);
143+
// contributorContainer.appendChild(txtElement);
144+
// contributorsListElement.appendChild(contributorContainer);
145+
// });
146+
}

0 commit comments

Comments
 (0)