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

Skip to content

Commit 82cb573

Browse files
massam89massam89
committed
check
2 parents dd603ef + 63a5404 commit 82cb573

File tree

9 files changed

+419
-0
lines changed

9 files changed

+419
-0
lines changed

‎Week2/homework/masoud/js-exercises/Ex1-johnWho.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const getAnonName = firstName => {
2+
return new Promise((resolves, rejects) => {
3+
if (firstName) {
4+
resolves(`${firstName} S`);
5+
} else {
6+
rejects(new Error("You didn't pass in a first name!"));
7+
}
8+
})
9+
};
10+
11+
const firstName = 'Mas';
12+
getAnonName(firstName).then(response => {
13+
console.log(response);
14+
})
15+
.catch(error => {
16+
console.log(error);
17+
})

‎Week2/homework/masoud/js-exercises/Ex2-isItBiggerThan10.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const checkDoubleDigits = number => {
2+
return new Promise((resolves, rejects) => {
3+
if (number >= 10) {
4+
resolves('The number is bigger than or equal 10!');
5+
} else {
6+
rejects(new Error('Error! The number is smaller than 10...'));
7+
}
8+
})
9+
};
10+
11+
const number = 10;
12+
13+
checkDoubleDigits(number).then(response => {
14+
console.log(response);
15+
})
16+
.catch(error => {
17+
console.log(error);
18+
})

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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">
7+
<title>pokemon</title>
8+
</head>
9+
10+
<body>
11+
12+
<script src="script.js"></script>
13+
</body>
14+
15+
</html>

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
//Calling main function after window load
2+
window.onload = main;
3+
4+
//Define main function
5+
function main() {
6+
//Define button element
7+
const btn = document.createElement('button');
8+
btn.textContent = 'start';
9+
btn.style.display = 'block';
10+
document.body.appendChild(btn);
11+
12+
// Define select element
13+
const select = document.createElement('select');
14+
select.style.display = 'block';
15+
document.body.appendChild(select);
16+
17+
//Define image
18+
const img = document.createElement('img');
19+
20+
//When button is clicked
21+
btn.addEventListener('click', () => {
22+
const url = `https://pokeapi.co/api/v2/pokemon/?limit=20&offset=20`;//Define API URL
23+
fetchData(url, select, img); // Get data from API and insert to DOM
24+
});
25+
}
26+
27+
// Add data to DOM
28+
function addPokemonToDOM(data, select, img) {
29+
30+
//Add list to select tag
31+
data.results.forEach(element => {
32+
const option = document.createElement('option');
33+
option.value = element.name;
34+
option.textContent = element.name;
35+
select.appendChild(option);
36+
});
37+
38+
//User selection
39+
select.addEventListener('input', () => {
40+
data.results.forEach(element => {
41+
if (select.value == element.name) {
42+
const imgURL = element.url;
43+
fetch(imgURL) // second API request to get image
44+
.then(function (response) {
45+
return response.json();
46+
})
47+
.then(function (myJson) {
48+
img.src = myJson.sprites.back_default;
49+
document.body.appendChild(img);
50+
})
51+
.catch(function (error) {
52+
console.log(error);
53+
});
54+
}
55+
})
56+
})
57+
};
58+
59+
//Get data from API by using fetch API
60+
function fetchData(url, select, img) {
61+
fetch(url) // First getting data
62+
.then(function (response) {
63+
return response.json();
64+
})
65+
.then(function (myJson) {
66+
addPokemonToDOM(myJson, select, img); // Add data to DOM
67+
})
68+
.catch(function (error) {
69+
console.log(error);
70+
});
71+
};

‎hackyourrepo-app/Masoud/week2/css/style.css

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background-color: #313267;
9+
font-size: 14px;
10+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11+
width: 100vw;
12+
height: calc(100vh - 20px);
13+
}
14+
15+
header{
16+
height: 15%;
17+
background-color:#313267 ;
18+
}
19+
20+
21+
header a{
22+
height: 100%;
23+
display: block;
24+
text-align: center;
25+
}
26+
27+
img{
28+
height: inherit;
29+
padding: 5px;
30+
}
31+
32+
.container{
33+
background-color: #6ed5e7;
34+
width: calc(95% - 5px);
35+
margin: auto;
36+
height: 85%;
37+
}
38+
39+
.selector{
40+
padding: 10px;
41+
font-size: 1.4em;
42+
background-color: rgb(252, 103, 49);
43+
color: white;
44+
}
45+
46+
#repo-items{
47+
font-size: 12px;
48+
font-family: sans-serif;
49+
font-weight: 700;
50+
color: #444;
51+
padding: .6em 1.4em .5em .8em;
52+
max-width: 100%; /* useful when width is set to anything other than 100% */
53+
margin: 0px auto;
54+
border: 1px solid #aaa;
55+
-moz-appearance: none;
56+
-webkit-appearance: none;
57+
background-color: #fff;
58+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
59+
}
60+
61+
.des-con{
62+
display: flex;
63+
padding: 10px;
64+
}
65+
66+
.description, .contributers{
67+
border: 2px rgb(223, 152, 152) solid;
68+
margin: 5px;
69+
height: 70vh;
70+
overflow: auto;
71+
}
72+
73+
.description {
74+
width: 40%;
75+
}
76+
77+
.contributers{
78+
width: 60%;
79+
}
80+
81+
.contributers img{
82+
width: 20%;
83+
border-radius: 50%;
84+
}
85+
86+
.items {
87+
display: flex;
88+
justify-content: space-between;
89+
padding: 5px 15px;
90+
margin: 5px;
91+
align-items: center;
92+
}
93+
94+
table{
95+
border-spacing: 10px;
96+
}
97+
98+
@media only screen and (max-width:550px){
99+
.des-con{
100+
flex-direction: column;
101+
align-items: center;
102+
}
103+
.description, .contributers{
104+
width: 90%;
105+
overflow:visible;
106+
height: auto;
107+
}
108+
.selector{
109+
text-align: center;
110+
}
111+
#repo-items{
112+
margin-top: 10px;
113+
}
114+
115+
body{
116+
width: 100%;
117+
height: 100%;
118+
}
119+
}

‎hackyourrepo-app/Masoud/week2/img/favicon.ico

1.12 KB
Binary file not shown.

‎hackyourrepo-app/Masoud/week2/img/hyf.png

7.64 KB
Loading

‎hackyourrepo-app/Masoud/week2/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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">
7+
<title>Hack Your Future</title>
8+
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
14+
<script src="js/script.js"></script>
15+
</body>
16+
17+
</html>

0 commit comments

Comments
 (0)