Skip to content

Commit 410a20f

Browse files
hasanhashasanhas
committed
js3_week1_exercises
1 parent 501df54 commit 410a20f

5 files changed

Lines changed: 204 additions & 0 deletions

File tree

‎Week1/homework/js3-week1_exercises/forHumor.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!-- Exercise 2: Programmer humor
2+
Who knew programmers could be funny?
3+
Write an function that makes an API call to https://xkcd.com/info.0.json
4+
Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
5+
Each function should make an API call to the given endpoint: https://xkcd.com/info.0.json
6+
Log the received data to the console
7+
Render the img property into an <img> tag in the DOM
8+
Incorporate error handling -->
9+
10+
<!DOCTYPE html>
11+
<html lang="en">
12+
<head>
13+
<meta charset="UTF-8">
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
16+
<title>Humor</title>
17+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
18+
</head>
19+
<body>
20+
<script type="text/javascript" src="forHumor.js" ></script>
21+
</body>
22+
</html>

‎Week1/homework/js3-week1_exercises/forHumor.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Exercise 2: Programmer humor
2+
// Who knew programmers could be funny?
3+
// Write an function that makes an API call to https://xkcd.com/info.0.json
4+
// Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
5+
// Each function should make an API call to the given endpoint: https://xkcd.com/info.0.json
6+
// Log the received data to the console
7+
// Render the img property into an <img> tag in the DOM
8+
// Incorporate error handling
9+
10+
'use strict';
11+
12+
function forHumorXml() {
13+
const xhr = new XMLHttpRequest();
14+
xhr.responseType = 'json';
15+
xhr.open('GET', 'https://xkcd.now.sh/?comic=614');
16+
xhr.onload = function () {
17+
if (this.status >= 200 && this.status <= 299) {
18+
img.src = this.response.img;
19+
} else {
20+
console.log(`Error: ${xhr.status}`);
21+
}
22+
};
23+
xhr.onerror = () => console.log('Error: Network failing');
24+
xhr.send();
25+
}
26+
27+
function forHumorAxios() {
28+
axios('https://xkcd.now.sh/?comic=614')
29+
.then(res => (img.src = res.data.img))
30+
.catch(err => console.log(err));
31+
}
32+
33+
const img = document.createElement('img');
34+
document.body.appendChild(img);
35+
36+
37+
forHumorXml();
38+
forHumorAxios();

‎Week1/homework/js3-week1_exercises/randomUser.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
11+
<body> Random User Api
12+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
13+
<script src="randomUser.js"></script>
14+
</body>
15+
16+
</html>

‎Week1/homework/js3-week1_exercises/randomUser.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
'use strict';
2+
3+
// Exercise 1: Who do we have here?
4+
// Wouldn't it cool to make a new friend with just the click of a button?
5+
// Write a function that makes an API call to https://www.randomuser.me/api
6+
// Inside the same file write two functions: one with XMLHttpRequest, and the other with axios
7+
// Each function should make an API call to the given endpoint: https://www.randomuser.me/api
8+
// Log the received data to the console
9+
// Incorporate error handling
10+
11+
function randomUserApi() {
12+
13+
const xhr = new XMLHttpRequest();
14+
15+
xhr.open('GET', 'https://www.randomuser.me/api', true);
16+
xhr.responseType = 'json';
17+
18+
xhr.onload = () => {
19+
if (xhr.status >= 200 && xhr.status <= 299) {
20+
console.log(xhr.response);
21+
} else {
22+
console.log(" Error: " + xhr.status );
23+
}
24+
};
25+
xhr.onerror = () => {
26+
console.log(" Error: Connect server error. ");
27+
};
28+
29+
xhr.send();
30+
};
31+
32+
33+
function versionAxios() {
34+
35+
axios
36+
.get('https://www.randomuser.me/api')
37+
.then(res => console.log(res.data))
38+
.catch(err => console.log(err));
39+
40+
};
41+
42+
randomUserApi();
43+
versionAxios();

‎Week1/homework/js3-week1_exercises/theDogPhotoGallery.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!-- Exercise 3: Dog photo gallery
2+
Let's make a randomized dog photo gallery!
3+
Write a function that makes an API call to https://dog.ceo/api/breeds/image/random.
4+
It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM.
5+
Create an index.html file that will display your random image
6+
Add 2 <button> and 1 <ul> element, either in the HTML or through JavaScript
7+
Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios
8+
When any one of the 2 buttons is clicked it should make an API call to https://dog.ceo/api/breeds/image/random
9+
After receiving the data, append to the <ul> a <li> that contains an <img> element with the dog image
10+
Incorporate error handling -->
11+
12+
<!DOCTYPE html>
13+
<html lang="en">
14+
<head>
15+
<meta charset="UTF-8" />
16+
<title>The Dog Photos Gallery</title>
17+
<style>
18+
body {
19+
text-align: center;
20+
background-color: #333;
21+
}
22+
23+
#buttons > button {
24+
padding: 20px;
25+
margin: 30px 0;
26+
background-color: rgb(218, 183, 183);
27+
color: #fff;
28+
font-weight: bold;
29+
}
30+
#photoLine {
31+
display: flex;
32+
list-style: none;
33+
flex-wrap: wrap;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div id="buttons">
39+
<button id="btn1">Touch to XHR for images</button>
40+
<button id="btn2">Touch to Axios for images</button>
41+
</div>
42+
<div id="imgDiv">
43+
<ul id="photoLine"></ul>
44+
</div>
45+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
46+
<script>
47+
const buttonForXhr = document.getElementById('btn1');
48+
const buttonForAxios = document.getElementById('btn2');
49+
50+
buttonForXhr.addEventListener('click', getImageWithXHR);
51+
buttonForAxios.addEventListener('click', getImageWithAxios);
52+
53+
function getImageWithXHR() {
54+
const xhr = new XMLHttpRequest();
55+
xhr.open('GET', 'https://dog.ceo/api/breeds/image/random');
56+
xhr.responseType = 'json';
57+
xhr.onload = () => {
58+
displayImage(xhr.response.message);
59+
};
60+
xhr.send();
61+
}
62+
63+
function getImageWithAxios() {
64+
axios
65+
.get('https://dog.ceo/api/breeds/image/random')
66+
.then(
67+
res => {
68+
displayImage(res.data.message);
69+
})
70+
.catch(err => console.error(err));
71+
}
72+
73+
function displayImage(imgAddress) {
74+
const photoLine = document.getElementById('photoLine');
75+
const img = document.createElement('img');
76+
const li = document.createElement('li');
77+
img.setAttribute('src', imgAddress);
78+
img.style.width = '200px';
79+
img.style.height = '200px';
80+
li.appendChild(img);
81+
photoLine.appendChild(li);
82+
}
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)