Skip to content

Commit 44fc9c6

Browse files
sadeq93sadeq93
committed
added ex3
1 parent c5dc7cd commit 44fc9c6

6 files changed

Lines changed: 114 additions & 71 deletions

File tree

‎Week2/homework/pokemon-app/index.html‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Pokemon App</title>
7-
</head>
8-
<body>
9-
<script src="./script.js"></script>
10-
</body>
11-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Pokemon App</title>
8+
</head>
9+
10+
<body>
11+
<select name="" id="select">
12+
<option value="">select option</option>
13+
</select>
14+
<div id="result"></div>
15+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
16+
<script src="./script.js"></script>
17+
</body>
18+
19+
</html>

‎Week2/homework/pokemon-app/script.js‎

Lines changed: 70 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,71 @@
1-
const placeholderRepos = [
2-
{
3-
name: 'SampleRepo1',
4-
description: 'This repository is meant to be a sample',
5-
forks: 5,
6-
updated: '2020-05-27 12:00:00',
7-
},
8-
{
9-
name: 'AndAnotherOne',
10-
description: 'Another sample repo! Can you believe it?',
11-
forks: 9,
12-
updated: '2020-05-27 12:00:00',
13-
},
14-
{
15-
name: 'HYF-Is-The-Best',
16-
description:
17-
"This repository contains all things HackYourFuture. That's because HYF is amazing!!!!",
18-
forks: 130,
19-
updated: '2020-05-27 12:00:00',
20-
},
21-
];
22-
const fetchData = () => {
23-
fetch('https://pokeapi.co/api/v2/pokemon/ditto')
24-
.then((response) => response.json())
25-
.then((data) => {
26-
createOptions(data);
1+
class Pokemon {
2+
constructor() {
3+
this.select = document.getElementById('select')
4+
this.result = document.getElementById('result')
5+
6+
this.data = this.fetchData('https://pokeapi.co/api/v2/pokemon?limit=151')
7+
// this.Urls = [];
8+
}
9+
10+
fetchData(url) {
11+
return axios
12+
.get(url)
13+
.then(response => {
14+
return response
15+
16+
});
17+
}
18+
19+
createOptions() {
20+
this.data.then(response => {
21+
response.data.results.forEach((poki, counter) => {
22+
const option = document.createElement('option')
23+
//
24+
option.textContent = poki.name
25+
//
26+
option.setAttribute('value', counter)
27+
//
28+
this.select.appendChild(option)
29+
//
30+
// console.log(poki)
31+
})
32+
33+
2734
});
28-
// .then((data) => {
29-
// console.log(data.sprites.back_default);
30-
// creatImg(data.sprites.back_shiny);
31-
// });
32-
};
33-
fetchData();
34-
35-
const createOptions = (jsonData) => {
36-
// create select HTML tag
37-
const select = document.createElement('select');
38-
//appending
39-
document.body.appendChild(select);
40-
jsonData.forEach((element, counter) => {
41-
// create option HTML tag
42-
const option = document.createElement('option');
43-
//appending
44-
select.appendChild(option);
45-
option.value = counter;
46-
option.textContent = element;
47-
});
48-
};
49-
50-
// createOptions(placeholderRepos);
51-
52-
const creatImg = (url) => {
53-
const img = document.createElement('img');
54-
img.src = url;
55-
document.body.appendChild(img);
56-
};
35+
36+
37+
}
38+
39+
insertImages(e) {
40+
41+
this.data.then(res => {
42+
43+
axios
44+
.get(res.data.results[e.target.value].url)
45+
.then(resForImg => {
46+
const imgUrl = resForImg.data.sprites.other["official-artwork"].front_default;
47+
const img = document.createElement('img')
48+
img.src = imgUrl
49+
img.setAttribute('width', '150px')
50+
this.result.appendChild(img)
51+
52+
})
53+
54+
})
55+
}
56+
addAndRemove(e) {
57+
if (this.result.firstChild === null) {
58+
this.insertImages(e)
59+
} else {
60+
this.result.removeChild(this.result.firstChild)
61+
this.insertImages(e)
62+
}
63+
}
64+
65+
}
66+
const poki = new Pokemon()
67+
poki.fetchData()
68+
poki.createOptions()
69+
// poki.insertImages()
70+
71+
poki.select.addEventListener('change', poki.addAndRemove.bind(poki))

‎hackyourrepo-app/API-files/getHubRepo.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export class RepoData {
77
fetchData(url) {
88
return axios.get(url).then(response => {
99
return response.data;
10-
});
10+
})
11+
;
1112
}
1213
}
1314
const repositoriesData = new RepoData()

‎hackyourrepo-app/DOM-sections/contributors-sectoin.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ export class contributors {
1717
this.contributorsSection.setAttribute('id', 'contributorsContainer');
1818
}
1919
manipulate() {
20-
// this.repoData.then(data => console.log(data))
21-
// this.contUrl.then(data => console.log(data))
2220

2321
}
2422

@@ -29,6 +27,7 @@ export class contributors {
2927
}
3028

3129
insertData(e) {
30+
const contsContainer = document.createElement("div")
3231
this.contributorsUrl.then(url => {
3332
axios
3433
.get(url[e.target.value])
@@ -40,20 +39,21 @@ export class contributors {
4039
const contContributions = document.createElement("h2")
4140

4241
// appending
43-
this.contributorsSection.appendChild(contContainer)
42+
this.contributorsSection.appendChild(contsContainer)
43+
contsContainer.appendChild(contContainer)
4444
contContainer.appendChild(contImg)
4545
contContainer.appendChild(contLink)
4646
contContainer.appendChild(contContributions)
4747
// setAttribute
4848
contContainer.setAttribute('id', 'contContainer')
49+
contsContainer.setAttribute('id', 'contsContainer')
4950
contImg.setAttribute('width', '50px')
5051
contLink.setAttribute('href', contributor.html_url)
5152
contLink.setAttribute('target', '_blank')
5253
// manipulating
5354
contLink.textContent = contributor.login
5455
contImg.src = (contributor.avatar_url)
5556
contContributions.textContent = contributor.contributions
56-
console.log(contributor)
5757
});
5858

5959
})
@@ -62,6 +62,16 @@ export class contributors {
6262

6363
}
6464

65+
66+
addAndRemove(e) {
67+
68+
if (this.contributorsSection.firstChild === null) {
69+
this.insertData(e)
70+
} else {
71+
this.contributorsSection.removeChild(this.contributorsSection.firstChild)
72+
this.insertData(e)
73+
}
74+
}
6575
}
6676

6777

‎hackyourrepo-app/script.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,16 @@ RepoContributorsSection.append();
2121
RepoContributorsSection.manipulate();
2222
RepoContributorsSection.setAttributes();
2323
RepoContributorsSection.getUrls();
24-
navigationBar.select.addEventListener('change', RepoContributorsSection.insertData.bind(RepoContributorsSection));
24+
navigationBar.select.addEventListener('change', RepoContributorsSection.addAndRemove.bind(RepoContributorsSection));
25+
// RepoContributorsSection.addAndRemove();
2526

2627

2728

2829
//
2930
// import { contributorsData } from './API-files/getHubRepo.js';
3031
// const contData = new contributorsData()
31-
// contData.printUrl()
32+
33+
34+
import { RepoData } from './API-files/getHubRepo.js'
35+
const repositoriesData = new RepoData()
36+
repositoriesData.fetchData()

‎hackyourrepo-app/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ body {
6969
padding: 7px;
7070
display: flex;
7171
}
72+
#contsContainer{
73+
display: flex;
74+
flex-direction: column;
75+
}
7276
#contributorsContainer {
7377
margin-top: 0.3rem;
7478
}

0 commit comments

Comments
 (0)