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

Commit c4410cf

Browse files
Evina88Evina88
authored
Add files via upload
1 parent ba2980d commit c4410cf

4 files changed

Lines changed: 159 additions & 0 deletions

File tree

‎Week1/js3-w1-hw-Ev/Ex1-function-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+
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>Request from randomuser</title>
9+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
10+
</head>
11+
12+
<body>
13+
<script>
14+
//Exercise 1: Who do we have here?
15+
16+
//Write a function that makes an API call to https://www.randomuser.me/api
17+
18+
//Inside the same file write two functions: one with XMLHttpRequest, and the other with axios
19+
//Each function should make an API call to the given endpoint: https://www.randomuser.me/api
20+
//Log the received data to the console
21+
//Incorporate error handling
22+
23+
var xhttp = new XMLHttpRequest();
24+
xhttp.onreadystatechange = function () {
25+
if (this.readyState == 4 && this.status == 200) {
26+
console.log(xhttp.responseText);
27+
}
28+
};
29+
xhttp.open("GEt", "https://www.randomuser.me/api", true);
30+
xhttp.send();
31+
32+
let getData = () => {
33+
axios.get("https://www.randomuser.me/api").then(response => {
34+
console.log(response);
35+
});
36+
};
37+
getData();
38+
39+
40+
41+
</script>
42+
</body>
43+
44+
</html>

‎Week1/js3-w1-hw-Ev/Ex2-programmer-humor.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>Ex.2: Programmer humor</title>
9+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
10+
</head>
11+
12+
<body>
13+
<img id="img" src="">
14+
<script>
15+
//Write an function that makes an API call to https://xkcd.com/info.0.json
16+
//Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
17+
//Each function should make an API call to the given endpoint: https://xkcd.com/info.0.json
18+
//Log the received data to the console
19+
//Render the img property into an < img > tag in the DOM
20+
//Incorporate error handling
21+
22+
var xhttp = new XMLHttpRequest();
23+
xhttp.onreadystatechange = function () {
24+
if (this.readyState == 4 && this.status == 200) {
25+
let response = JSON.parse(xhttp.responseText);
26+
console.log(response);
27+
console.log(response.img);
28+
document.getElementById("img").src = response.img;
29+
30+
}
31+
32+
};
33+
xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://xkcd.com/info.0.json", true);
34+
xhttp.send();
35+
36+
37+
38+
let getData = () => {
39+
axios.get("https://cors-anywhere.herokuapp.com/https://xkcd.com/info.0.json").then(response => {
40+
console.log(response.data.img);
41+
document.getElementById("img").src = response.data.img;
42+
});
43+
};
44+
getData();
45+
46+
47+
48+
49+
</script>
50+
</body>
51+
52+
</html>

‎Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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>Exercise 3: Dog photo gallery</title>
9+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
10+
11+
</head>
12+
13+
<body>
14+
<div id="frame">
15+
<ul>
16+
<li> <img id='randomPic' src=''></img></li>
17+
<li> <img id="randomPicAxios" src=""></li>
18+
</ul>
19+
20+
</div>
21+
<button id="showImgBttn">Click for Random Image </button>
22+
<button id="showImgAxios">Click again</button>
23+
<script src="Ex3-dog-photo-gallery.js"></script>
24+
</body>
25+
26+
</html>

‎Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Let's make a randomized dog photo gallery!
2+
3+
// Write a function that makes an API call to https://dog.ceo/api/breeds/image/random. It should trigger after clicking a
4+
// button in your webpage.Every time the button is clicked it should append a new dog image to the DOM.
5+
6+
// Create an index.html file that will display your random image
7+
// Add 2 < button > and 1 < ul > element, either in the HTML or through JavaScript
8+
// Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios
9+
// When any one of the 2 buttons is clicked it should make an API call to https://dog.ceo/api/breeds/image/random
10+
// After receiving the data, append to the < ul > a < li > that contains an < img > element with the dog image
11+
// Incorporate error handling
12+
13+
let btn = document.getElementById("showImgBttn").addEventListener('click', loadImg);
14+
15+
function loadImg() {
16+
17+
var xhttp = new XMLHttpRequest();
18+
xhttp.onreadystatechange = function () {
19+
if (this.readyState == 4 && this.status == 200) {
20+
let url = JSON.parse(xhttp.responseText);
21+
console.log(url.message);
22+
document.getElementById("randomPic").src = url.message;
23+
}
24+
};
25+
xhttp.open("GEt", "https://dog.ceo/api/breeds/image/random", true);
26+
xhttp.send();
27+
}
28+
29+
let getImg = () => {
30+
axios.get("https://dog.ceo/api/breeds/image/random").then(response => {
31+
console.log(response.data.message);
32+
document.getElementById("randomPicAxios").src = response.data.message;
33+
});
34+
};
35+
36+
37+
let btn2 = document.getElementById("showImgAxios").addEventListener("click", getImg);

0 commit comments

Comments
 (0)