Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit ca490e1

Browse files
mahmoudbdmahmoudbd
committed
js3-w1-homework
1 parent d443911 commit ca490e1

4 files changed

Lines changed: 194 additions & 0 deletions

File tree

‎homework/Adyan-Session/Adyen-Session.pdf‎

374 KB
Binary file not shown.

‎homework/DogPhoto/DogPhotoGallery.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Dog-photo-gallery</title>
8+
<style>
9+
body{
10+
text-align: center;
11+
background-color: whitesmoke;
12+
}
13+
button{
14+
padding: 10px;
15+
margin: 10px;
16+
font-weight: 600;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<dvi>
22+
<button id="btn">Get by Axios</button>
23+
<button id="btn2">Get by XHR</button>
24+
<div id="main">
25+
<ul>
26+
<li>
27+
28+
</li>
29+
</ul>
30+
</div>
31+
32+
</dvi>
33+
34+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
35+
<script>
36+
let mainDiv = document.getElementById('main')
37+
let getByAxios= document.getElementById('btn');
38+
let getByXHR = document.getElementById('btn2');
39+
getByAxios.addEventListener('click', fetchByAxios);
40+
getByXHR.addEventListener('click', fetchByXHR);
41+
42+
// Response by axios
43+
function fetchByAxios() {
44+
axios
45+
.get('https://dog.ceo/api/breeds/image/random')
46+
.then((res) => {
47+
mainDiv.innerHTML = '';
48+
let img = document.createElement('img');
49+
img.src = res.data.message;
50+
img.style.width = '400px';
51+
img.style.height = '400px';
52+
let h1 = document.createElement('h1');
53+
h1.innerText = 'Show by Axios';
54+
mainDiv.appendChild(h1);
55+
mainDiv.appendChild(img);
56+
})
57+
.catch((err) => console.error(err));
58+
}
59+
60+
// Response By XHR
61+
function fetchByXHR() {
62+
let getByXhr = new XMLHttpRequest();
63+
getByXhr.responseType = 'json';
64+
getByXhr.onreadystatechange = function() {
65+
if (this.readyState === 4 && this.status === 200) {
66+
mainDiv.innerHTML = '';
67+
let img = document.createElement('img');
68+
img.src = getByXhr.response.message;
69+
img.style.width = '400px';
70+
img.style.height = '400px';
71+
let h1 = document.createElement('h1');
72+
h1.innerText = 'Show by XHR';
73+
mainDiv.appendChild(h1);
74+
mainDiv.appendChild(img);
75+
}
76+
};
77+
getByXhr.open('GET', 'https://dog.ceo/api/breeds/image/random', true);
78+
getByXhr.send();
79+
}
80+
81+
</script>
82+
83+
</body>
84+
</html>

‎homework/Humor/Programmerhumor.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Programmerhumor</title>
8+
<style>
9+
body {
10+
text-align: center;
11+
background-color: whitesmoke;
12+
13+
}
14+
15+
</style>
16+
</head>
17+
<body>
18+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
19+
<script>
20+
// Response by axios
21+
22+
function getByAxios() {
23+
axios
24+
.get('https://xkcd.now.sh/?comic=614')
25+
.then((res) => {
26+
console.log(res.data);
27+
let h1 = document.createElement('h1');
28+
h1.innerText = 'Show by Axios';
29+
let img = document.createElement('img');
30+
img.src = res.data.img;
31+
document.body.appendChild(h1);
32+
document.body.appendChild(img);
33+
})
34+
.catch((err) => console.error(err));
35+
}
36+
37+
38+
39+
//Response XMLHttpRequest
40+
41+
function xhr() {
42+
let getByXhr = new XMLHttpRequest();
43+
getByXhr.responseType = 'json';
44+
getByXhr.onreadystatechange = function() {
45+
if (this.readyState === 4 && this.status === 200) {
46+
console.log(getByXhr.response);
47+
let h1 = document.createElement('h1');
48+
h1.innerText = 'Show by XHR';
49+
let img = document.createElement('img');
50+
img.src = getByXhr.response.img;
51+
document.body.appendChild(h1);
52+
document.body.appendChild(img);
53+
}
54+
};
55+
getByXhr.open('GET', 'https://xkcd.now.sh/?comic=614', true);
56+
getByXhr.send();
57+
}
58+
59+
getByAxios();
60+
xhr();
61+
62+
</script>
63+
64+
65+
</body>
66+
</html>

‎homework/Randomuser/Randomuser.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Randomuser.me</title>
8+
</head>
9+
<body>
10+
11+
12+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
13+
<script>
14+
//XMLHttpRequest
15+
function xhr() {
16+
const oRquest = new XMLHttpRequest();
17+
oRquest.responseType = 'json';
18+
oRquest.onreadystatechange = function() {
19+
if (this.readyState === 4 && this.status === 200) {
20+
console.log(oRquest.response);
21+
}
22+
};
23+
oRquest.open('GET', 'https://www.randomuser.me/api', true);
24+
oRquest.send();
25+
}
26+
27+
function getByAxios() {
28+
axios
29+
.get('https://www.randomuser.me/api')
30+
.then((res) => {
31+
console.log(res.data);
32+
})
33+
.catch((err) => console.error(err));
34+
}
35+
36+
getByAxios();
37+
38+
xhr();
39+
40+
</script>
41+
42+
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)