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

Skip to content

Commit a7647b3

Browse files
lfcoding1lfcoding1
committed
change css
1 parent 3eacb2b commit a7647b3

File tree

3 files changed

+252
-98
lines changed

3 files changed

+252
-98
lines changed

‎homework/src/index.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,16 @@
1313
<title>HYF-GITHUB</title>
1414
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
1515
<link rel="stylesheet" href="./style.css">
16+
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil|Play" rel="stylesheet">
1617
</head>
1718

1819
<body>
1920
<div id="root"></div>
2021
<script src="./index.js"></script>
2122
</body>
22-
23+
<footer id ="footer">
24+
<p>Created by: Louise Francois</p>
25+
<p> <a href="https://github.com/lfcoding1?tab=repositories">
26+
Check out my Repositories here</a>.</p>
27+
</footer>
2328
</html>

‎homework/src/index2Promises.js

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
'use strict';
2+
3+
{
4+
function createAndAppend(name, parent, options = {}) {
5+
const elem = document.createElement(name);
6+
parent.appendChild(elem);
7+
Object.keys(options).forEach((key) => {
8+
const value = options[key];
9+
if (key === 'text') {
10+
elem.innerText = value;
11+
} else {
12+
elem.setAttribute(key, value);
13+
}
14+
});
15+
return elem;
16+
}
17+
function main(url) {
18+
fetch(HYF_REPOS_URL)
19+
.then(response => response.json())
20+
.then(json => createStuff(json))
21+
.catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }))
22+
23+
} //end main
24+
25+
function createStuff(data){
26+
let newArray = [];
27+
let forkArray = [];
28+
let languageArray = [];
29+
let descriptionArray = [];
30+
let updatedAt = [];
31+
let htmlArray = [];
32+
data.sort((a, b) => (a.name).localeCompare(b.name));
33+
34+
for (let i = 0; i < data.length; i++){
35+
newArray.push(data[i].name);
36+
descriptionArray.push(data[i].description);
37+
forkArray.push(data[i].forks);
38+
languageArray.push(data[i].language);
39+
updatedAt.push(data[i].updated_at);
40+
htmlArray.push(data[i].html_url);
41+
var date = new Date ((data[i].updated_at));
42+
date = date.toUTCString();
43+
}
44+
45+
const root = document.getElementById('root');
46+
47+
while (root.firstChild) {
48+
root.removeChild(root.firstChild);
49+
}
50+
51+
createAndAppend('h1', root, { text: "Hack Your Future Repositories", class: 'title' });
52+
createAndAppend('h3', root, { text: "Select a repository: ", class: 'subtitle'});
53+
const selectList = createAndAppend('select', root, {id: "mySelect" });
54+
const headerDiv = createAndAppend('div', root, {class: 'headerdiv'});
55+
createAndAppend('h3', headerDiv, { text: "Repository Information", class: 'subtitle', id: 'repoHeader' });
56+
createAndAppend('h3', headerDiv, { text: "Contributors", class: 'subtitle', id:'contributorHeader' });
57+
const container = createAndAppend('div', root, {class: 'container'});
58+
const card = createAndAppend('div', container, { class: 'card'});
59+
const ul = createAndAppend('ul', card, {id: "myUl", });
60+
const contributorsCard = createAndAppend('div', container, {class: 'card'});
61+
const contributorsUl = createAndAppend('ul', contributorsCard, {id: 'contributorsUl'});
62+
const Index0Name = createAndAppend ('li', ul, {text: "Repository: ", class: 'nameInContainer'});
63+
const Index0Link = createAndAppend ('a', Index0Name, {text: newArray[0], target: "_blank", href: htmlArray[0]});
64+
const Index0Description = createAndAppend('li', ul, {text: "Description: " + descriptionArray[0], class:"descriptionInContainer"});
65+
const Index0Fork = createAndAppend ('li', ul, {text: "Number of Forks: " + forkArray[0], class: 'forksInContainer'});
66+
const Index0Language = createAndAppend ('li', ul, {text: "Language: " + languageArray[0], class: 'updatedAtInContainer'});
67+
const Index0UpdatedAt = createAndAppend ('li', ul, {text: "Updated at: " + date, class: 'updatedAtInContainer'})
68+
69+
fetch('https://api.github.com/repos/HackYourFuture/' + newArray[0] + '/contributors')
70+
.then(response =>response.json())
71+
.then(json => createStuff2(json))
72+
.catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }))
73+
74+
function createStuff2(data){
75+
for (let i = 0; i < data.length; i++){
76+
let Image0Link = createAndAppend('li', contributorsUl, {})
77+
let contributor0Name = createAndAppend('img', Image0Link, {src: data[i].avatar_url, class: 'imageSrc'});
78+
let contributor0Link = createAndAppend('a', Image0Link, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
79+
let contributor0Badge = createAndAppend('li', Image0Link, {text:"Contributions: " + data[i].contributions, class: 'badge'});
80+
} //end for
81+
82+
83+
84+
data.forEach((repo) => {
85+
for (let i = 0; i < newArray.length; i++) {
86+
createAndAppend('option', selectList, {id: "myOption", value: i, text: newArray[i]});
87+
}
88+
});
89+
90+
function removeNodes(container){
91+
while (ul.hasChildNodes()) {
92+
ul.removeChild(ul.firstChild);
93+
}
94+
while (contributorsUl.hasChildNodes()) {
95+
contributorsUl.removeChild(contributorsUl.firstChild);
96+
}
97+
} //end removeNodes
98+
99+
selectList.onchange = function(selectedIndex){
100+
fetch('https://api.github.com/repos/HackYourFuture/' + newArray[this.selectedIndex] + '/contributors')
101+
.then(response =>response.json())
102+
.then(json => createStuff3(json))
103+
.catch(err => createAndAppend('div', root, { text: err.message, class: 'alert-error' }))
104+
105+
function createStuff3(data){
106+
for (let i = 0; i < data.length; i++){
107+
let ImageLink = createAndAppend('li', contributorsUl, {})
108+
let contributorName = createAndAppend('img', ImageLink, {src: data[i].avatar_url, class: 'imageSrc'});
109+
let contributorLink = createAndAppend('a', ImageLink, {text: data[i].login, target: "_blank", href: data[i].html_url, id: 'link'});
110+
let contributorBadge = createAndAppend('li', ImageLink, {text:"Contributions: " + data[i].contributions, class: 'badge'});
111+
} //end for
112+
}//end createStuff3
113+
114+
let repoName = createAndAppend('li', ul, { text: "Repository: ", class: 'nameInContainer', function: removeNodes()});
115+
createAndAppend('a', repoName, { text: newArray[this.selectedIndex], id: 'linkInContainer', target: "_blank", href: htmlArray[this.selectedIndex]});
116+
createAndAppend('li', ul, {text: "Description: " + descriptionArray[this.selectedIndex], class: 'descriptionInContainer'});
117+
createAndAppend('li', ul, { text: "Number of Forks: " + forkArray[this.selectedIndex], class: 'forksInContainer'});
118+
createAndAppend('li', ul, { text: "Language: " + languageArray[this.selectedIndex], class: 'languageInContainer'});
119+
let dates = new Date (updatedAt[this.selectedIndex]);
120+
dates = dates.toUTCString();
121+
createAndAppend('li', ul, {text: "Updated at: " + dates, class: 'updatedAtInContainer'});
122+
123+
}// end of onchange
124+
}// end createStuff2
125+
} //end createStuff
126+
127+
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
128+
window.onload = () => main(HYF_REPOS_URL);
129+
130+
}

‎homework/src/style.css

Lines changed: 116 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -3,118 +3,137 @@
33
background-color:black;
44
font-size: 4rem;
55
}
6-
img{
7-
border: 1px solid #ddd;
8-
border-radius: 4px;
9-
margin: 10px;
10-
padding: 25px;
11-
width: 150px;
12-
display: flex;
13-
justify-content: center;
14-
15-
}
16-
176

18-
.title{
19-
color: white;
20-
background-color: darkslateblue;
21-
font-size: 2rem;
22-
border: 2px;
23-
margin: 1rem;
24-
padding-top: 1rem;
25-
}
267
#root {
278
max-width: 1200px;
289
margin: 0 auto;
2910
background-color: darkslateblue;
3011
}
3112

32-
.container {
33-
display: flex;
34-
flex-wrap: wrap;
35-
border: 2px solid gray;
36-
background-color: darkslateblue;
37-
clear: both;
38-
}
13+
.container {
14+
display: flex;
15+
flex-wrap: wrap;
16+
border: 2px solid gray;
17+
background-color: darkslateblue;
18+
clear: both;
19+
}
3920

40-
.card {
41-
margin: 1rem;
42-
border: 2px solid gray;
43-
background-color: white;
44-
color: black;
45-
display: flex;
46-
justify-content: left;
47-
font-size: 20px;
48-
}
49-
.contributorsCard {
50-
margin: 1rem;
51-
border: 2px solid gray;
52-
background-color: darkslateblue;
53-
display: flex;
54-
justify-content: right;
55-
font-size: 20px;
56-
text-align: center;
57-
}
58-
.card:hover {
59-
background-color: pink;
60-
}
61-
.header{
62-
float: center;
63-
clear: both;
64-
}
65-
.title {
66-
font-size: 3rem;
67-
text-align: center;
68-
}
21+
.card {
22+
margin: 1rem;
23+
border: 2px solid gray;
24+
background-color: white;
25+
color: black;
26+
display: flex;
27+
justify-content: left;
28+
font-size: 20px;
29+
}
6930

70-
.subtitle {
71-
color: white;
72-
margin: 1rem;
73-
font-size: 1.25rem;
74-
}
75-
#repoHeader {
76-
float: left;
77-
}
78-
#contributorHeader {
79-
float: right;
80-
}
81-
#mySelect{
82-
margin: 2rem;
83-
margin-top: 0;
84-
padding: 1.5rem;
85-
font-size: 1rem;
86-
background-color: white;
87-
color: black;
88-
}
89-
#mySelect:hover {
90-
background-color: pink;
91-
outline-color: white;
92-
}
93-
94-
#link {
95-
font-size: 20px;
96-
text-align: left;
31+
.contributorsCard {
32+
margin: 1rem;
33+
border: 2px solid gray;
34+
background-color: darkslateblue;
35+
display: flex;
36+
justify-content: right;
37+
font-size: 20px;
38+
text-align: center;
39+
}
40+
41+
.card:hover {
42+
background-color: lightblue;
43+
}
44+
45+
.header{
46+
float: center;
47+
clear: both;
48+
}
49+
50+
.title{
51+
color: white;
52+
background-color: darkslateblue;
53+
font-size: 2rem;
54+
border: 2px;
55+
margin: 1rem;
56+
padding-top: 1rem;
57+
font-size: 3rem;
58+
text-align: center;
59+
font-family: 'Allerta Stencil', sans-serif;
60+
}
61+
.subtitle {
62+
color: white;
63+
margin: 1rem;
64+
font-size: 1.5rem;
65+
font-family: 'Play', sans-serif;
66+
}
67+
68+
#repoHeader {
69+
float: left;
9770
}
98-
.badge{
99-
font-size: 20px;
100-
71+
72+
#contributorHeader {
73+
float: right;
10174
}
10275

103-
#myUl{
104-
list-style-type: none;
105-
font-size: 1.5rem;
106-
}
76+
#mySelect{
77+
margin: 2rem;
78+
margin-top: 0;
79+
padding: 1.5rem;
80+
font-size: 1.5rem;
81+
background-color: white;
82+
color: black;
83+
font-family: 'Play', sans-serif;
84+
}
10785

108-
#myUl:hover {
109-
background-color: pink;
110-
}
86+
#mySelect:hover {
87+
background-color: lightblue;
88+
outline-color: white;
89+
}
90+
91+
#myOption {
92+
font-size: 1.5rem;
93+
background-color: white;
94+
color: black;
95+
font-family: 'Play', sans-serif;
96+
}
97+
98+
#myUl{
99+
list-style-type: none;
100+
font-size: 1.5rem;
101+
font-family: 'Play', sans-serif;
102+
}
103+
104+
#myUl:hover {
105+
background-color: lightblue;
106+
}
111107

112-
#contributorsUl{
113-
list-style-type: none;
114-
font-size: 1rem;
115-
}
116-
108+
#contributorsUl{
109+
list-style-type: none;
110+
font-size: 1.5em;
111+
font-family: 'Play', sans-serif;
112+
}
113+
114+
img{
115+
border: 1px solid #ddd;
116+
border-radius: 4px;
117+
margin: 10px;
118+
padding: 25px;
119+
width: 150px;
120+
display: flex;
121+
justify-content: center;
122+
}
123+
124+
#link {
125+
font-size: 20px;
126+
text-align: left;
127+
}
117128

129+
.badge{
130+
font-size: 20px;
131+
}
132+
133+
#footer{
134+
text-align: center;
135+
}
136+
118137
@media screen and (min-width: 600px) {
119138
.card {
120139
flex: 1 1 calc(50% - 2rem);

0 commit comments

Comments
 (0)