Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 66727ad

Browse files
zekiyecakiralzekiyecakiral
committed
week-2 homework Zekiye Cakiral
1 parent 695ce10 commit 66727ad

3 files changed

Lines changed: 295 additions & 0 deletions

File tree

‎Week2/homework/app.js‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
"use strict";
2+
const HYF_REPOS_URL = "https://api.github.com/orgs/HackYourFuture/repos";
3+
function fetchJSON(endPoint, callback) {
4+
fetch(endPoint)
5+
.then((response) => {
6+
if (response.status >= 200 && response.status < 400) {
7+
return response.json();
8+
} else {
9+
throw "HTTP ERROR!";
10+
}
11+
})
12+
.then((jsonData) => {
13+
callback(jsonData, arguments[2]);
14+
})
15+
.catch((error) => {
16+
document.getElementById("root").innerHTML = error;
17+
});
18+
}
19+
20+
function renderRepositories(jsonData, filteredItem) {
21+
const repositoryInfoList = jsonData.map((element) => {
22+
const repositoryInfo = {};
23+
repositoryInfo.Repositories = element.name;
24+
repositoryInfo.Description = element.description;
25+
repositoryInfo.Forks = element.forks;
26+
repositoryInfo.Updated = new Date(element.updated_at).toLocaleString();
27+
return repositoryInfo;
28+
});
29+
30+
// if not selected repository, get the first element from the array
31+
let filteredJSONData = jsonData[0];
32+
let repository = repositoryInfoList.slice(0, 1);
33+
// if selected repository, filteredItem is exist
34+
if (filteredItem) {
35+
filteredJSONData = jsonData.filter((item) => item.name === filteredItem)[0];
36+
37+
repository = repositoryInfoList.filter(
38+
(item) => item.Repositories === filteredItem
39+
);
40+
}
41+
42+
// following codes show the repository information
43+
const repo = document.getElementById("repo");
44+
repo.innerHTML = "";
45+
46+
const repoDiv = document.createElement("div");
47+
repoDiv.className = "repoInfo";
48+
49+
repository.forEach((element) => {
50+
Object.keys(element).forEach(function (key) {
51+
const item = document.createElement("item");
52+
item.className = "item";
53+
54+
const label = document.createElement("label");
55+
label.innerText = key + ": ";
56+
57+
const value = document.createElement("p");
58+
if (key === "Repositories") {
59+
const valueLink = document.createElement("a");
60+
valueLink.href = filteredJSONData.html_url;
61+
valueLink.target = "_blank";
62+
valueLink.innerText = element[key];
63+
64+
value.appendChild(valueLink);
65+
} else {
66+
value.innerText = element[key];
67+
}
68+
69+
item.appendChild(label);
70+
item.appendChild(value);
71+
repoDiv.appendChild(item);
72+
});
73+
repo.appendChild(repoDiv);
74+
});
75+
76+
// this code calls the contributors who contributed to this repository
77+
fetchJSON(filteredJSONData.contributors_url, renderContributors);
78+
}
79+
80+
function renderContributors(contributorJSON) {
81+
// following codes show the contributors information
82+
const contributorList = document.getElementById("contributors");
83+
contributorList.innerHTML = "";
84+
85+
const header = document.createElement("h3");
86+
header.innerHTML = "Contributions";
87+
contributorList.appendChild(header);
88+
89+
contributorJSON.forEach((contributor) => {
90+
const contributorDiv = document.createElement("div");
91+
contributorDiv.className = "contributor";
92+
93+
const contributorInfoDiv = document.createElement("div");
94+
contributorInfoDiv.className = "contributor-info";
95+
96+
const image = document.createElement("img");
97+
image.src = contributor.avatar_url;
98+
99+
const name = document.createElement("p");
100+
const nameHref = document.createElement("a");
101+
nameHref.href = contributor.html_url;
102+
nameHref.target = "_blank";
103+
nameHref.innerText = contributor.login;
104+
name.appendChild(nameHref);
105+
106+
contributorInfoDiv.appendChild(image);
107+
contributorInfoDiv.appendChild(name);
108+
109+
const contributionsCount = document.createElement("p");
110+
contributionsCount.className = "contributor-count";
111+
contributionsCount.innerText = contributor.contributions;
112+
113+
contributorDiv.appendChild(contributorInfoDiv);
114+
contributorDiv.appendChild(contributionsCount);
115+
116+
contributorList.appendChild(contributorDiv);
117+
});
118+
}
119+
120+
function renderSelect(jsonData) {
121+
// following codes list the repository names
122+
jsonData.sort((a, b) => a.name.localeCompare(b.name));
123+
let selectList = document.getElementById("selectRepository");
124+
for (let i = 0; i < jsonData.length; i++) {
125+
let option = document.createElement("option");
126+
option.value = i;
127+
option.innerHTML = jsonData[i].name;
128+
selectList.appendChild(option);
129+
}
130+
}
131+
132+
window.onload = () => {
133+
// At start-up my application will display information about the first repository
134+
fetchJSON(HYF_REPOS_URL, renderRepositories);
135+
136+
// At start-up, it will be load select information
137+
fetchJSON(HYF_REPOS_URL, renderSelect);
138+
139+
// this code will be worked if select option is changed
140+
const repositories = document.getElementById("selectRepository");
141+
let selectedOption = "";
142+
repositories.addEventListener("change", (event) => {
143+
selectedOption = event.target.selectedOptions[0].text;
144+
fetchJSON(HYF_REPOS_URL, renderRepositories, selectedOption);
145+
});
146+
};

‎Week2/homework/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Hack Your Repo II</title>
7+
<script src="app.js"></script>
8+
<link rel="stylesheet" href="style.css">
9+
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
10+
11+
</head>
12+
<body>
13+
<div id="root">
14+
<header class="top">
15+
<h1>HYF Repositories</h1>
16+
<div>
17+
<select id="selectRepository">
18+
</select>
19+
</div>
20+
21+
</header>
22+
<main class="main-container">
23+
<section id="repo"class="repo-container">
24+
</section>
25+
<section id="contributors"class="contributors-container"></section>
26+
</main>
27+
</div>
28+
</body>
29+
</html>

‎Week2/homework/style.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
body {
2+
font-family: "Roboto", sans-serif;
3+
background-color: #f4f4f4;
4+
}
5+
#root {
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
label {
10+
font-size: 20px;
11+
padding: 10px;
12+
font-weight: bold;
13+
width: 159px;
14+
}
15+
h1 {
16+
color: white;
17+
padding: 10px;
18+
}
19+
h3 {
20+
padding-left: 20px;
21+
font-size: 20px;
22+
color: gray;
23+
}
24+
p {
25+
font-size: 15px;
26+
width: 100%;
27+
}
28+
29+
select {
30+
width: 100%;
31+
font-size: 17px;
32+
background-color: white;
33+
margin: 10px;
34+
height: 45px;
35+
}
36+
span {
37+
font-size: 14px;
38+
}
39+
img {
40+
width: 70px;
41+
padding: 10px;
42+
}
43+
.item {
44+
display: flex;
45+
align-items: center;
46+
}
47+
.top {
48+
display: flex;
49+
flex-direction: row;
50+
background-color: #395cbf;
51+
align-items: center;
52+
margin-bottom: 10px;
53+
padding: 10px;
54+
}
55+
56+
.main-container {
57+
display: flex;
58+
flex-direction: row;
59+
justify-content: space-between;
60+
}
61+
.repo-container {
62+
width: 50%;
63+
margin: 10px;
64+
display: flex;
65+
flex-direction: column;
66+
67+
padding: 10px;
68+
box-shadow: 2px 0px 5px #aaaaaa;
69+
}
70+
.contributors-container {
71+
width: 50%;
72+
margin: 10px;
73+
display: flex;
74+
flex-direction: column;
75+
padding: 10px;
76+
box-shadow: 2px 0px 5px #aaaaaa;
77+
}
78+
.contributor-info {
79+
display: flex;
80+
flex-direction: row;
81+
align-items: center;
82+
}
83+
84+
.contributor {
85+
display: flex;
86+
flex-direction: row;
87+
padding: 10px;
88+
margin-bottom: 1px;
89+
justify-content: space-between;
90+
background-color: white;
91+
padding-bottom: 1px;
92+
align-items: center;
93+
}
94+
.repoInfo {
95+
padding: 10px;
96+
}
97+
.contributor-count {
98+
background-color: #f4f4f4;
99+
padding: 6px;
100+
border-radius: 5px;
101+
width: 16px;
102+
}
103+
104+
@media only screen and (max-width: 960px) {
105+
h1 {
106+
font-size: 17px;
107+
}
108+
h3 {
109+
font-size: 13px;
110+
}
111+
img {
112+
width: 50px;
113+
}
114+
label {
115+
font-size: 15px;
116+
}
117+
.contributor-count {
118+
font-size: 13px;
119+
}
120+
}

0 commit comments

Comments
 (0)