Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit be1d022

Browse files
Stef-LevStef-Lev
committed
week3 files added
1 parent ef0a668 commit be1d022

File tree

7 files changed

+314
-0
lines changed

7 files changed

+314
-0
lines changed

‎Week3/Homework/codeAlong/youtube-api/app.js

Whitespace-only changes.

‎Week3/Homework/codeAlong/youtube-api/index.html

Whitespace-only changes.

‎Week3/Homework/codeAlong/youtube-api/style.css

Whitespace-only changes.

‎Week3/Homework/project-HackYourRepo III/hyf.png

8.9 KB
Loading

‎Week3/Homework/project-HackYourRepo III/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<link rel="apple-touch-icon" href="./hyf.png">
12+
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
13+
<title>HYF Repositories</title>
14+
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2:400,700&display=swap" rel="stylesheet">
15+
<link rel="stylesheet" href="./style.css">
16+
</head>
17+
18+
<body>
19+
<div class="container">
20+
<div id="root">
21+
</div>
22+
23+
<main class="main-container">
24+
<section class="repo-container">
25+
26+
27+
</section>
28+
<section class="contributor-container">
29+
30+
</section>
31+
</main>
32+
33+
</div>
34+
35+
<script src="./index.js"></script>
36+
</body>
37+
38+
</html>

‎Week3/Homework/project-HackYourRepo III/index.js

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
"use strict";
2+
3+
{
4+
5+
let theRoot = document.querySelector("#root");
6+
let repoCont = document.querySelector(".repo-container");
7+
let contrCont = document.querySelector(".contributor-container");
8+
let displayed = 0;
9+
10+
11+
function fetchJSON(url, cb) {
12+
fetch(url)
13+
.then(response => {
14+
if (response.status !== 200) {
15+
return cb(new Error(`Network error: ${response.status} - ${response.statusText}`))
16+
}
17+
return response.json();
18+
})
19+
.then(data => {
20+
console.log("Loaded!", data);
21+
cb(false, data);
22+
})
23+
}
24+
25+
function createAndAppend(name, parent, options = {}) {
26+
const elem = document.createElement(name);
27+
parent.appendChild(elem);
28+
Object.entries(options).forEach(([key, value]) => {
29+
if (key === 'text') {
30+
elem.innerHTML = value;
31+
} else {
32+
elem.setAttribute(key, value);
33+
}
34+
});
35+
return elem;
36+
}
37+
38+
function sortThemAll(repos) {
39+
repos.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1);
40+
}
41+
42+
function renderRepoDetails(repo, parent) {
43+
createAndAppend('div', parent, {
44+
text: `
45+
<p class="property"><strong>Repository: </strong></p>
46+
<p class="value"><a href="${repo.html_url}">${repo.name}</a></p>
47+
<p class="property"><strong>Description: </strong></p>
48+
<p class="value">${repo.description}</p>
49+
<p class="property"><strong>Forks: </strong></p>
50+
<p class="value">${repo.forks_count}</p>
51+
<p class="property"><strong>Updated: </strong></p>
52+
<p class="value">${repo.updated_at.slice(8, 10)}/${repo.updated_at.slice(5, 7)}/${repo.updated_at.slice(0, 4)}, ${repo.updated_at.slice(12, -1)}</p>
53+
`,
54+
class: "info-block"
55+
});
56+
}
57+
58+
function addOptions(repo, parent) {
59+
parent = document.querySelector("#repo-selection");
60+
let option = document.createElement("option");
61+
option.innerHTML = repo.name;
62+
option.value = repo.name;
63+
parent.add(option);
64+
}
65+
66+
function renderContributions(contributors, container) {
67+
container.innerHTML = `<p><strong>Contributions</strong></p>`;
68+
contributors.forEach(contrb => {
69+
container.innerHTML += `
70+
<div class="contributions">
71+
<img src="${contrb.avatar_url}" class="user-photo">
72+
<a href="${contrb.html_url}" class="contr-link">${contrb.login}</a>
73+
<span class="number-square">${contrb.contributions}</span>
74+
</div>
75+
<hr>
76+
`
77+
})
78+
}
79+
80+
function deleteElement(el) {
81+
while (el.hasChildNodes()) {
82+
el.removeChild(el.firstChild)
83+
}
84+
}
85+
86+
function main(url) {
87+
createAndAppend("header", theRoot, {
88+
text: `
89+
<h1>Test</h1>
90+
<select id="repo-selection">
91+
</select>
92+
`,
93+
class: "header-content"
94+
});
95+
96+
fetchJSON(url, (err, repos) => {
97+
if (err) {
98+
createAndAppend('div', theRoot, {
99+
text: err.message,
100+
class: 'alert-error',
101+
});
102+
return;
103+
}
104+
105+
sortThemAll(repos);
106+
for (let i = 0; i < repos.length; i++) {
107+
addOptions(repos[i], parent);
108+
}
109+
let repoSelect = document.querySelector("#repo-selection");
110+
repoSelect.value = repos[displayed].name;
111+
renderRepoDetails(repos[displayed], repoCont);
112+
113+
fetchJSON(repos[displayed].contributors_url, (err, contributors) => {
114+
if (err) {
115+
createAndAppend('div', theRoot, {
116+
text: err.message,
117+
class: 'alert-error',
118+
});
119+
return;
120+
}
121+
122+
createAndAppend("div", contrCont);
123+
renderContributions(contributors, contrCont);
124+
});
125+
repoSelect.addEventListener("change", () => {
126+
repos.forEach(repo => {
127+
if (repo.name === repoSelect.value) { displayed = repos.indexOf(repo) }
128+
})
129+
let header = document.querySelector("header");
130+
deleteElement(repoCont);
131+
deleteElement(theRoot);
132+
main(HYF_REPOS_URL);
133+
})
134+
});
135+
}
136+
137+
const HYF_REPOS_URL =
138+
'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
139+
window.onload = () => main(HYF_REPOS_URL);
140+
141+
}

‎Week3/Homework/project-HackYourRepo III/style.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
.alert-error {
2+
color: white;
3+
padding: 10px;
4+
margin: 10px 0;
5+
background-color: rgb(226, 61, 61);
6+
border-radius: 3px;
7+
font-weight: bold;
8+
}
9+
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body {
16+
font-family: 'Baloo Chettan 2', cursive;
17+
font-size: 1.1rem ;
18+
background: rgb(229,230,240);
19+
background: linear-gradient(90deg, rgba(229,230,240,1) 0%, rgba(255,255,255,1) 52%, rgba(229,230,240,1) 100%);
20+
}
21+
22+
header {
23+
border-radius: 3px;
24+
background: rgb(162,159,139);
25+
background: linear-gradient(90deg, rgba(162,159,139,1) 0%, rgba(0,6,87,1) 0%, rgba(152,182,218,1) 100%);
26+
color: white;
27+
padding: 20px;
28+
-webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.60);
29+
-moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.60);
30+
box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.60);
31+
32+
}
33+
34+
.container {
35+
padding: 20px;
36+
}
37+
38+
img {
39+
height: 100px;
40+
width: 100px;
41+
border-radius: 15px;
42+
}
43+
44+
.info-block {
45+
display: grid;
46+
grid-template-columns: 1fr 5fr;
47+
grid-gap: 3%;
48+
background-color: white;
49+
padding: 20px;
50+
margin: 10px 0;
51+
border: 0px solid rgb(17, 17, 17);
52+
border-radius: 3px;
53+
-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.60);
54+
-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.60);
55+
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.60);
56+
}
57+
58+
.contributor-container {
59+
background-color: white;
60+
padding: 20px;
61+
margin: 10px 0;
62+
border: 0px solid rgb(17, 17, 17);
63+
border-radius: 3px;
64+
-webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.60);
65+
-moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.60);
66+
box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.60);
67+
}
68+
69+
.contributions{
70+
display: grid;
71+
grid-template-columns:1fr 6fr 2fr ;
72+
grid-gap: 1em;
73+
background-color: rgb(255, 255, 255);
74+
margin: 20px auto;
75+
}
76+
77+
#repo-selection {
78+
font-size: 1.5rem;
79+
font-family: 'Baloo Chettan 2', cursive;
80+
padding: 0px 5px;
81+
margin-left: 20px;
82+
border-radius: 5px;
83+
width: 80%;
84+
}
85+
86+
.header-content > h1{
87+
display: inline;
88+
font-size: 1.7rem;
89+
}
90+
91+
92+
.main-container {
93+
display: grid;
94+
grid-gap: 2%;
95+
grid-template-columns: 1fr;
96+
}
97+
98+
.contr-link{
99+
align-self: center;
100+
}
101+
.number-square{
102+
align-self: center;
103+
justify-self: end;
104+
margin-right: 30px;
105+
padding: 5px 15px;
106+
border-radius: 3px;
107+
background: rgb(135, 147, 151);
108+
font-weight: bold;
109+
}
110+
111+
@media screen and (max-width: 360px) {
112+
body {
113+
font-size: 0.65rem;
114+
}
115+
}
116+
117+
@media screen and (min-width: 640px) {
118+
119+
}
120+
121+
@media screen and (min-width: 768px) {
122+
.main-container {
123+
display: grid;
124+
grid-template-columns: 1fr 1fr;
125+
margin: 20px 0;
126+
}
127+
#repo-selection {
128+
width: 33%;
129+
}
130+
}
131+
132+
@media screen and (min-width: 900px) {
133+
134+
}
135+

0 commit comments

Comments
 (0)