Skip to content

Commit 620b85c

Browse files
lfcoding1lfcoding1
committed
upload homework unfinished
1 parent 1c03673 commit 620b85c

2 files changed

Lines changed: 137 additions & 9 deletions

File tree

‎homework/src/index.js‎

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,71 @@
2929
});
3030
return elem;
3131
}
32+
3233

34+
3335
function main(url) {
34-
fetchJSON(url, (err, data) => {
35-
const root = document.getElementById('root');
36-
if (err) {
37-
createAndAppend('div', root, { text: err.message, class: 'alert-error' });
38-
} else {
39-
createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
36+
while (root.firstChild) {
37+
root.removeChild(root.firstChild);
38+
}
39+
40+
fetchJSON( HYF_REPOS_URL, (err, data) => {
41+
let newArray = [];
42+
let forkArray = [];
43+
let languageArray = [];
44+
let newURLArray = [];
45+
let contributorsArray = [];
46+
for (let i = 0; i < data.length; i++){
47+
newArray.push(data[i].name);
48+
newArray.sort();
49+
forkArray.push(data[i].forks);
50+
languageArray.push(data[i].language);
51+
contributorsArray.push(data[i].contributors_url);
52+
contributorsArray.sort();
53+
newURLArray.push(data[i].html_url);
54+
newURLArray.sort();
55+
}
56+
57+
let app = document.getElementById('root');
58+
const header = createAndAppend('h1', app, { text: "Hack Your Future Repositories", class: 'title' });
59+
const subHeader = createAndAppend('h3', app, { text: "Select a repository: ", class: 'subtitle'});
60+
const selectList = createAndAppend('select', app, { text: 'Select a Repo', id: "mySelect" });
61+
const container = createAndAppend('div', app, {class: 'container'});
62+
const card = createAndAppend('div', container, {text: "Description of this repository ", class: 'card'});
63+
const ul = createAndAppend('ul', card, {id: "myUl", });
64+
const contributorsheader = createAndAppend('h1', root, { text: "Contributors", class: 'title' });
65+
const contributorsContainer = createAndAppend('div', root, { class: 'container'})
66+
const contributorsCard = createAndAppend('div', contributorsContainer, {text: "Contributors to this Repository", class: 'card'});
67+
const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
68+
69+
data.forEach((repo) => {
70+
for (let i = 0; i < newArray.length; i++) {
71+
createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]});
72+
}
73+
});
74+
75+
function removeNodes(container){
76+
while (ul.hasChildNodes()) {
77+
ul.removeChild(ul.firstChild);
78+
}
79+
while (contributorsUl.hasChildNodes()) {
80+
contributorsUl.removeChild(contributorsUl.firstChild);
81+
}
4082
}
83+
84+
selectList.onchange = function(selectedIndex){
85+
createAndAppend('li', ul, { text: "Repository: " + newArray[this.selectedIndex], class: 'nameInContainer', function: removeNodes()});
86+
createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
87+
createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
88+
createAndAppend('li', contributorsUl, { text: newURLArray[this.selectedIndex], class: 'contributorsInContainer'});
89+
90+
}
91+
4192
});
4293
}
4394

4495
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
45-
96+
const theContributors_URL = 'https://api.github.com/repos/HackYourFuture/contributors';
4697
window.onload = () => main(HYF_REPOS_URL);
47-
}
98+
window.onload = () => main(theContributors_URL);
99+
}

‎homework/src/style.css‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,79 @@
11
.alert-error {
22
color: red;
3-
}
3+
}
4+
5+
.title{
6+
color: white;
7+
background-color: darkslateblue;
8+
font-size: 2rem;
9+
border: 2px;
10+
margin: 1rem;
11+
padding-top: 1rem;
12+
}
13+
#root {
14+
max-width: 1200px;
15+
margin: 0 auto;
16+
background-color: darkslateblue;
17+
}
18+
19+
.container {
20+
display: flex;
21+
flex-wrap: wrap;
22+
border: 2px solid gray;
23+
background-color: darkslateblue;
24+
}
25+
26+
.contributorsContainer {
27+
display: flex;
28+
flex-wrap: wrap;
29+
border: 2px solid gray;
30+
background-color: darkslateblue;
31+
}
32+
33+
.card {
34+
margin: 1rem;
35+
border: 2px solid gray;
36+
background-color: white;
37+
color: black;
38+
}
39+
.contributorsCard {
40+
margin: 1rem;
41+
border: 2px solid gray;
42+
background-color: darkslateblue;
43+
44+
}
45+
46+
.subtitle {
47+
color: white;
48+
margin: 1rem;
49+
}
50+
#mySelect{
51+
margin: 2rem;
52+
padding: 1rem;
53+
font-size: 1rem;
54+
background-color: white;
55+
color: black;
56+
}
57+
58+
#myUl{
59+
list-style-type: none;
60+
font-size: 1.5rem;
61+
}
62+
63+
#contributorsUl{
64+
list-style-type: none;
65+
font-size: 1rem;
66+
}
67+
68+
69+
@media screen and (min-width: 600px) {
70+
.card {
71+
flex: 1 1 calc(50% - 2rem);
72+
}
73+
}
74+
75+
@media screen and (min-width: 900px) {
76+
.card {
77+
flex: 1 1 calc(33% - 2rem);
78+
}
79+
}

0 commit comments

Comments
 (0)