Skip to content

Commit 1af3dad

Browse files
amirhshadamirhshad
authored
Merge pull request #2 from samravan/master
merge
2 parents b49bf00 + 6b2ef7e commit 1af3dad

38 files changed

Lines changed: 1187 additions & 53 deletions

File tree

Week1/homework/js-exercises/dogGallery.js renamed to Week1/AmirHossein/homework/js-exercises/dogGallery.js

File renamed without changes.

Week1/homework/js-exercises/getandomUser.js renamed to Week1/AmirHossein/homework/js-exercises/getandomUser.js

File renamed without changes.

Week1/homework/js-exercises/humor.js renamed to Week1/AmirHossein/homework/js-exercises/humor.js

File renamed without changes.

Week1/homework/js-exercises/index.html renamed to Week1/AmirHossein/homework/js-exercises/index.html

File renamed without changes.

‎Week1/homework/code along/app.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const number = document.getElementById('number');
2+
const fact = document.getElementById('fact');
3+
4+
number.addEventListener('input', addText);
5+
6+
function addText(){
7+
const num = number.value;
8+
const URL = `http://numbersapi.com/${num}`;
9+
10+
const xhr = new XMLHttpRequest();
11+
xhr.open('GET', URL, true);
12+
xhr.send();
13+
14+
// 4. This will be called after the response is received
15+
xhr.onload = function() {
16+
if (xhr.status != 200 && xhr.status != 200) {
17+
// analyze HTTP status of the response
18+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
19+
} else {
20+
// show the result
21+
let response = xhr.responseText;
22+
fact.style.display = 'block';
23+
fact.textContent = response;
24+
}
25+
};
26+
27+
xhr.onprogress = function(event) {
28+
if (event.lengthComputable) {
29+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
30+
} else {
31+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
32+
}
33+
};
34+
35+
xhr.onerror = function() {
36+
console.log('Request failed');
37+
};
38+
39+
40+
}

‎Week1/homework/code along/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
<title>Number API</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
8+
</head>
9+
10+
<body class="bg-secondary">
11+
<div class="container mx-auto text-center mt-4" style="width: 400px;">
12+
<div class="card bg-primary text-white">
13+
<div class="card-body">
14+
<h5 class="card-title">Number Facts</h5>
15+
<label class="mb-2" for="number">Please enter number in order to find out</label>
16+
<br>
17+
<input id="number" type="number" placeholder="Enter Number">
18+
<p id="fact" class="mt-4" style="display: none;"></p>
19+
</div>
20+
21+
22+
</div>
23+
</div>
24+
25+
26+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
27+
<script src="app.js"></script>
28+
</body>
29+
30+
</html>

‎Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const URL = 'https://www.randomuser.me/api';
2+
3+
function requestWithXHR(URL){
4+
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
5+
const xhr = new XMLHttpRequest();
6+
xhr.open('GET', URL, true);
7+
xhr.send();
8+
9+
// 4. This will be called after the response is received
10+
xhr.onload = function() {
11+
if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response
12+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
13+
} else { // show the result
14+
const response = JSON.parse(xhr.responseText);
15+
console.log(response.results[0].gender);
16+
}
17+
};
18+
19+
xhr.onprogress = function(event) {
20+
if (event.lengthComputable) {
21+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
22+
} else {
23+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
24+
}
25+
26+
};
27+
28+
xhr.onerror = function() {
29+
console.log("Request failed");
30+
};
31+
};
32+
33+
function requestWithAxios(URL){
34+
const axios = require('axios').default;
35+
axios.get(URL)
36+
.then(function (response) {
37+
// handle success
38+
console.log(response.data.results[0].gender);
39+
})
40+
.catch(function (error) {
41+
// handle error
42+
console.log("Request failed");
43+
})
44+
.then(function () {
45+
// always executed
46+
});
47+
48+
};
49+
50+
requestWithXHR(URL);
51+
requestWithAxios(URL);

‎Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const URL = 'https://xkcd.now.sh/?comic=latest';
2+
const image1 = document.getElementById('image1');
3+
const image2 = document.getElementById('image2');
4+
5+
function requestWithXHR(URL){
6+
const xhr = new XMLHttpRequest();
7+
xhr.open('GET', URL, true);
8+
xhr.send();
9+
10+
// 4. This will be called after the response is received
11+
xhr.onload = function() {
12+
if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response
13+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
14+
} else { // show the result
15+
const response = JSON.parse(xhr.responseText);
16+
console.log(response);
17+
image1.src = response.img;
18+
}
19+
};
20+
21+
xhr.onprogress = function(event) {
22+
if (event.lengthComputable) {
23+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
24+
} else {
25+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
26+
}
27+
28+
};
29+
30+
xhr.onerror = function() {
31+
console.log("Request failed");
32+
};
33+
};
34+
35+
function requestWithAxios(URL){
36+
axios.get(URL)
37+
.then(function (response) {
38+
// handle success
39+
console.log(response.data);
40+
image2.src = response.data.img;
41+
})
42+
.catch(function (error) {
43+
// handle error
44+
console.log("Request failed");
45+
})
46+
.then(function () {
47+
// always executed
48+
});
49+
50+
};
51+
52+
requestWithXHR(URL);
53+
requestWithAxios(URL);

‎Week1/homework/masoud/js-exercises/Ex2.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
<title>Document</title>
7+
</head>
8+
<body>
9+
<img id="image1">
10+
<img id="image2">
11+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
12+
<script src="Ex2-ProgrammerHumor.js"></script>
13+
</body>
14+
</html>

‎Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const URL = 'https://dog.ceo/api/breeds/image/random';
2+
const xmlBtn = document.getElementById('xmlBTN');
3+
const axiosBtn = document.getElementById('axiosBTN');
4+
const ulElm = document.getElementById('list');
5+
const imgSize = '300px';
6+
ulElm.style.display = 'flex';
7+
ulElm.style.flexWrap = 'wrap';
8+
9+
xmlBtn.addEventListener('click',requestWithXHR);
10+
axiosBtn.addEventListener('click',requestWithAxios);
11+
12+
13+
function requestWithXHR() {
14+
const xhr = new XMLHttpRequest();
15+
xhr.open('GET', URL, true);
16+
xhr.send();
17+
18+
// 4. This will be called after the response is received
19+
xhr.onload = function() {
20+
if (xhr.status != 200 && xhr.status != 200) {
21+
// analyze HTTP status of the response
22+
console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
23+
} else {
24+
// show the result
25+
const response = JSON.parse(xhr.responseText);
26+
const liElm = document.createElement('li');
27+
const imgElm = document.createElement('img');
28+
imgElm.src = response.message;
29+
imgElm.style.height = imgSize;
30+
liElm.style.listStyle = 'none';
31+
liElm.appendChild(imgElm);
32+
ulElm.appendChild(liElm);
33+
}
34+
};
35+
36+
xhr.onprogress = function(event) {
37+
if (event.lengthComputable) {
38+
console.log(`Received ${event.loaded} of ${event.total} bytes`);
39+
} else {
40+
console.log(`Received ${event.loaded} bytes`); // no Content-Length
41+
}
42+
};
43+
44+
xhr.onerror = function() {
45+
console.log('Request failed');
46+
};
47+
}
48+
49+
50+
51+
function requestWithAxios(){
52+
axios.get(URL)
53+
.then(function (response) {
54+
// handle success
55+
const liElm = document.createElement('li');
56+
const imgElm = document.createElement('img');
57+
imgElm.src = response.data.message;
58+
imgElm.style.height = imgSize;
59+
liElm.style.listStyle = 'none';
60+
liElm.appendChild(imgElm);
61+
ulElm.appendChild(liElm);
62+
})
63+
.catch(function (error) {
64+
// handle error
65+
console.log("Request failed");
66+
})
67+
.then(function () {
68+
// always executed
69+
});
70+
};

0 commit comments

Comments
 (0)