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

Skip to content

Commit dead44a

Browse files
amirhshadamirhshad
committed
LEft box is finished
1 parent da65b19 commit dead44a

File tree

1 file changed

+76
-53
lines changed

1 file changed

+76
-53
lines changed

‎hackyourrepo-app/AmirHossein/script.js

Lines changed: 76 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,42 @@
33
/*
44
Write here your JavaScript for HackYourRepo!
55
*/
6+
window.onload = main;
7+
8+
function main() {
9+
10+
}
11+
const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
612
const elFactory = (type, attributes, ...children) => {
7-
const el = document.createElement(type)
13+
const el = document.createElement(type);
814
let key;
915
for (key in attributes) {
10-
el.setAttribute(key, attributes[key])
11-
}
16+
el.setAttribute(key, attributes[key]);
17+
};
1218

1319
children.forEach(child => {
1420
if (typeof child === 'string') {
15-
el.appendChild(document.createTextNode(child))
21+
el.appendChild(document.createTextNode(child));
1622
} else {
17-
el.appendChild(child)
23+
el.appendChild(child);
1824
}
19-
})
25+
});
2026

2127
return el
22-
}
28+
};
29+
2330
const container = elFactory('div', {calss: 'container'});
24-
const header = elFactory('section', {id: 'header'},
31+
const header = elFactory('section', {id: 'header'}, //Header section
2532
elFactory('p', {}, 'HYF Repositories'),
26-
elFactory('select', {calss: 'selectMenu'}),
27-
elFactory('option', {value: ''}, 'alumni'));
33+
elFactory('select', {calss: 'selectMenu'}
34+
));
2835
const bottomBox = elFactory('div', {class: 'bottom-box'});
29-
const leftSide = elFactory('section', {id: 'left-side'})
30-
31-
32-
const card = elFactory('div', {calss: 'card'},
36+
const leftSide = elFactory('section', {id: 'left-side'});
37+
const card = elFactory('div', {calss: 'card'}, // Leftside table
3338
elFactory('table', {},
3439
elFactory('tr', {},
3540
elFactory('td', {class: 'col-left'}, 'Repositories: '),
36-
elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, 'SampleRepo1'))),
41+
elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, ))),
3742
elFactory('tr', {},
3843
elFactory('td', {class: 'col-left'}, 'Description: '),
3944
elFactory('td', {class: 'col-right rep-description'}, 'Lorem ipsom')),
@@ -44,57 +49,80 @@ const card = elFactory('div', {calss: 'card'},
4449
elFactory('td', {class: 'col-left'}, 'Update: '),
4550
elFactory('td', {class: 'col-right rep-update'}, '2020-05-27 12:00:00'))));
4651

47-
4852
const rightSide = elFactory('section', {id: 'right-side'},
4953
elFactory('div', {id: 'contributor'}, 'Contributors'));
5054
const smallCard = elFactory('div', {class: 'card samll-card'},
5155
elFactory('img', {src: 'https://avatars3.githubusercontent.com/u/3985124?v=4', calss: 'userPhoto', width: '50px'}),
5256
elFactory('a', {href: '', class: 'userName'}, 'Isabela'),
5357
elFactory('div', {class: 'badge'}, '9'));
5458

55-
leftSide.appendChild(card)
56-
rightSide.appendChild(smallCard)
59+
leftSide.appendChild(card);
60+
rightSide.appendChild(smallCard);
5761
container.appendChild(header);
5862
bottomBox.appendChild(leftSide);
5963
bottomBox.appendChild(rightSide)
6064
container.appendChild(bottomBox);
6165
document.body.appendChild(container)
62-
console.log(container)
63-
64-
65-
// const container = elFactory('div', {calss: 'container'},
66-
// elFactory('section', {id: 'header'},
67-
// elFactory('p', {}, 'HYF Repositories'),
68-
// elFactory('select', {calss: 'selectMenu'},
69-
// elFactory('option', {value: ''}, 'alumni'))),
70-
// elFactory('div', {class: 'bottom-box'},
71-
// elFactory('section', {id: 'left-side'},
72-
// elFactory('div', {calss: 'card'},
73-
// elFactory('table', {},
74-
// elFactory('tr', {},
75-
// elFactory('td', {class: 'col-left'}, 'Repositories: '),
76-
// elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, 'SampleRepo1')) ),
77-
// elFactory('tr', {},
78-
// elFactory('td', {class: 'col-left'}, 'Description: '),
79-
// elFactory('td', {class: 'col-right rep-description'}, 'Lorem ipsom')),
80-
// elFactory('tr', {},
81-
// elFactory('td', {class: 'col-left'}, 'Forks: '),
82-
// elFactory('td', {class: 'col-right rep-fork'}, '5')),
83-
// elFactory('tr', {},
84-
// elFactory('td', {class: 'col-left'}, 'Update: '),
85-
// elFactory('td', {class: 'col-right rep-update'}, '2020-05-27 12:00:00'))))))
86-
// );
87-
88-
// console.log(container);
89-
// const select = container.querySelector('select')
90-
// const para = container.querySelector('p')
91-
// console.log(para)
9266

67+
const select = header.querySelector('select');
68+
69+
70+
71+
72+
function addrepoNames(data) {
73+
74+
data.forEach(element => {
75+
const option = elFactory('option', {value: ''})
76+
option.innerHTML = element.name;
77+
option.value = element.name;
78+
select.appendChild(option);
79+
});
80+
81+
select.addEventListener('input', () => {
82+
data.forEach(element => {
83+
if(select.value === element.name) {
84+
const repoDescription = card.querySelector('.rep-description');
85+
repoDescription.innerHTML = element.description;
86+
const repoName = card.querySelector('.repo-link');
87+
repoName.innerHTML = element.name;
88+
repoName.href = element.html_url;
89+
const forks = card.querySelector('.rep-fork');
90+
forks.innerHTML = element.forks;
91+
const update = card.querySelector('.rep-update');
92+
update.innerHTML = element.updated_at;
93+
const smallCard = elFactory('div', {class: 'card samll-card'},
94+
elFactory('img', {src: 'https://avatars3.githubusercontent.com/u/3985124?v=4', calss: 'userPhoto', width: '50px'}),
95+
elFactory('a', {href: '', class: 'userName'}, 'Isabela'),
96+
elFactory('div', {class: 'badge'}, '9'));
97+
const contributorsUrl = element.contributors_url;
98+
fetch(contributorsUrl)
99+
.then(response => response.json())
100+
.then(data2 => console.log(data2))
101+
// image.src = ''
102+
// fetch(pokUrl)
103+
// .then(response => response.json())
104+
// .then(data => {
105+
// image.src = data.sprites.front_default;
106+
// document.body.appendChild(image);
107+
// })
108+
// .catch(error => console.log(error))
109+
}
110+
111+
112+
})
113+
})
93114

115+
};
94116

117+
function fetchData(url) {
95118

119+
fetch(url)
120+
.then(res => res.json())
121+
.then(data => addrepoNames(data))
96122

97123

124+
}
125+
fetchData(url);
98126

99127

100128

@@ -105,9 +133,4 @@ console.log(container)
105133

106134

107135

108-
// const container = document.createElement('div');
109-
// container.classList.add('container');
110-
// const header = document.createElement('section');
111-
// const title = document.createElement('')
112-
// const selectMenu = document.createElement('select');
113136

0 commit comments

Comments
 (0)