Skip to content

Commit dd63b26

Browse files
ErejaEreja
committed
homework exercises
1 parent 39b4b40 commit dd63b26

7 files changed

Lines changed: 230 additions & 0 deletions

File tree

‎Week1/HW Week1/JS-exercises/ex1-getRandomUser.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>Get random user using XMLHttpReques and axios</title>
7+
</head>
8+
<body>
9+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10+
<script src="ex1-getRandomUser.js"></script>
11+
</body>
12+
</html>

‎Week1/HW Week1/JS-exercises/ex1-getRandomUser.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
Write a function that makes a HTTP Request to https://www.randomuser.me/api
3+
4+
Inside the JavaScript file write two functions: one with XMLHttpRequest, and the other with axios
5+
Each function should make a HTTP Request to the given endpoint: https://www.randomuser.me/api
6+
Log the received data to the console
7+
Incorporate error handling: log to the console the error message
8+
*/
9+
10+
//global variable since both functions will use it
11+
const url = 'https://www.randomuser.me/api';
12+
13+
//XMLHttpRequest:
14+
function getRandomUserXML() {
15+
const xhr = new XMLHttpRequest();
16+
xhr.responseType = 'json';
17+
xhr.open('GET', url);
18+
19+
xhr.onload = function () {
20+
if (xhr.status === 200 && xhr.readyState === 4) {
21+
console.log(xhr.response);
22+
} else {
23+
console.log('Error:', xhr.status);
24+
}
25+
};
26+
xhr.onerror = function () {
27+
console.log('Something went wrong');
28+
};
29+
xhr.send();
30+
}
31+
getRandomUserXML();
32+
33+
//axios request:
34+
35+
function getRandomUserAxios() {
36+
axios
37+
.get(url)
38+
.then((response) => console.log(response.data))
39+
.catch((err) => console.log(err));
40+
}
41+
getRandomUserAxios();

‎Week1/HW Week1/JS-exercises/ex2-getComics.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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>Programmer humor</title>
7+
</head>
8+
<body>
9+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
10+
<script src="ex2-getComics.js"></script>
11+
</body>
12+
</html>

‎Week1/HW Week1/JS-exercises/ex2-getComics.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
Write a function that makes a HTTP Request to https://xkcd.now.sh/?comic=latest
3+
4+
Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
5+
Each function should make a HTTP Request to the given endpoint: https://xkcd.now.sh/?comic=latest
6+
Log the received data to the console
7+
Render the img property into an <img> tag in the DOM
8+
Incorporate error handling: log to the console the error message
9+
*/
10+
11+
const body = document.body;
12+
const url = 'https://xkcd.now.sh/?comic=latest';
13+
14+
//XMLHttpRequest:
15+
function getComicXML() {
16+
const xhr = new XMLHttpRequest();
17+
xhr.responseType = 'json';
18+
xhr.open('GET', url);
19+
20+
xhr.onreadystatechange = () => {
21+
if (xhr.readyState === XMLHttpRequest.DONE) {
22+
console.log(xhr.response);
23+
const image = document.createElement('img');
24+
body.appendChild(image);
25+
image.src = xhr.response.img;
26+
image.alt = xhr.response.alt;
27+
} else {
28+
console.log('Error:', xhr.status);
29+
}
30+
};
31+
32+
xhr.onerror = function () {
33+
console.log('Something went wrong');
34+
};
35+
xhr.send();
36+
}
37+
getComicXML();
38+
39+
// axios request:
40+
function getComicAxios() {
41+
axios
42+
.get(url)
43+
.then((response) => {
44+
const newImage = document.createElement('img');
45+
body.appendChild(newImage);
46+
console.log(response.data);
47+
newImage.src = response.data.img;
48+
newImage.alt = response.alt;
49+
})
50+
.catch((err) => console.log(err));
51+
}
52+
getComicAxios();

‎Week1/HW Week1/JS-exercises/ex3-dogGallery.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-size: 2rem;
9+
text-align: center;
10+
}
11+
12+
13+
ul {
14+
display: flex;
15+
flex-wrap: wrap;
16+
justify-content: center;
17+
list-style: none;
18+
}
19+
20+
img {
21+
width: 350px;
22+
height: 350px;
23+
object-fit: cover;
24+
margin: 0.15rem 0.3rem;
25+
}
26+
27+
button {
28+
font-size: 2rem;
29+
cursor: pointer;
30+
padding: 1rem;
31+
margin: 1rem 0;
32+
}

‎Week1/HW Week1/JS-exercises/ex3-dogGallery.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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+
<link rel="stylesheet" href="ex3-dogGallery.css">
7+
<title>Dog Gallery</title>
8+
</head>
9+
<body>
10+
<h1>Dog Gallery</h1>
11+
<button id="xmlBtn">Get a dog image!</button>
12+
<button id="axiosBtn">Get a dog image!</button>
13+
<ul id="gallery"></ul>
14+
15+
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
16+
<script src="ex3-dogGallery.js"></script>
17+
</body>
18+
</html>

‎Week1/HW Week1/JS-exercises/ex3-dogGallery.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*
2+
Write a function that makes a HTTP Request to https://dog.ceo/api/breeds/image/random. 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.
3+
4+
Create an index.html file that will display your random image
5+
Add 2 <button> and 1 <ul> element, either in the HTML or through JavaScript
6+
Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios
7+
When any one of the 2 buttons is clicked it should make a HTTP Request to https://dog.ceo/api/breeds/image/random
8+
After receiving the data, append to the <ul> a <li> that contains an <img> element with the dog image
9+
Incorporate error handling: log to the console the error message
10+
*/
11+
12+
//HTML elements:
13+
const galleryList = document.getElementById('gallery');
14+
const xmlBtn = document.getElementById('xmlBtn');
15+
const axiosBtn = document.getElementById('axiosBtn');
16+
//API
17+
const url = 'https://dog.ceo/api/breeds/image/random';
18+
19+
//Getting dog image using XML:
20+
function getDogPicXML() {
21+
const xhr = new XMLHttpRequest();
22+
xhr.responseType = 'json';
23+
xhr.open('GET', url);
24+
25+
xhr.onload = function () {
26+
if (xhr.status < 400) {
27+
const list = document.createElement('li');
28+
galleryList.appendChild(list);
29+
const dogImg = document.createElement('img');
30+
list.appendChild(dogImg);
31+
dogImg.src = xhr.response.message;
32+
} else {
33+
console.log('Error:', xhr.status);
34+
}
35+
};
36+
37+
xhr.onerror = function () {
38+
console.log('Something went wrong');
39+
};
40+
xhr.send();
41+
}
42+
43+
/*
44+
In all three excersises used different conditions to check xhr status, as there were given a lot of examples in reading and video materials, just to see if behavior would change.
45+
*/
46+
47+
//Getting dog image using axios:
48+
function getDogPicAxios() {
49+
axios
50+
.get(url)
51+
.then((response) => {
52+
const list = document.createElement('li');
53+
galleryList.appendChild(list);
54+
const dogImg = document.createElement('img');
55+
list.appendChild(dogImg);
56+
dogImg.src = response.data.message;
57+
})
58+
.catch((err) => console.log(err));
59+
}
60+
61+
//Event listeners:
62+
xmlBtn.addEventListener('click', getDogPicXML);
63+
axiosBtn.addEventListener('click', getDogPicAxios);

0 commit comments

Comments
 (0)