Skip to content

js3-w1-hw-Ev done and committed #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Evina88 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

js3-w1-hw-Ev done and committed #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions Week1/HW1-EV/Ex1-function-randomuser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Request from randomuser</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<script>
//Exercise 1: Who do we have here?

//Write a function that makes an API call to https://www.randomuser.me/api

//Inside the same file write two functions: one with XMLHttpRequest, and the other with axios
//Each function should make an API call to the given endpoint: https://www.randomuser.me/api
//Log the received data to the console
//Incorporate error handling

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(xhttp.responseText);
}
};
xhttp.open("GEt", "https://www.randomuser.me/api", true);
xhttp.send();

let getData = () => {
axios.get("https://www.randomuser.me/api").then(response => {
console.log(response);
});
};
getData();



</script>
</body>

</html>
52 changes: 52 additions & 0 deletions Week1/HW1-EV/Ex2-programmer-humor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ex.2: Programmer humor</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<img id="img" src="">
<script>
//Write an function that makes an API call to https://xkcd.com/info.0.json
//Inside the same file write two programs: one with XMLHttpRequest, and the other with axios
//Each function should make an API call to the given endpoint: https://xkcd.com/info.0.json
//Log the received data to the console
//Render the img property into an < img > tag in the DOM
//Incorporate error handling

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let response = JSON.parse(xhttp.responseText);
console.log(response);
console.log(response.img);
document.getElementById("img").src = response.img;

}

};
xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://xkcd.com/info.0.json", true);
xhttp.send();



let getData = () => {
axios.get("https://cors-anywhere.herokuapp.com/https://xkcd.com/info.0.json").then(response => {
console.log(response.data.img);
document.getElementById("img").src = response.data.img;
});
};
getData();




</script>
</body>

</html>
26 changes: 26 additions & 0 deletions Week1/HW1-EV/Ex3-dog-photo-gallery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Exercise 3: Dog photo gallery</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
<div id="frame">
<ul>
<li> <img id='randomPic' src=''></img></li>
<li> <img id="randomPicAxios" src=""></li>
</ul>

</div>
<button id="showImgBttn">Click for Random Image </button>
<button id="showImgAxios">Click again</button>
<script src="Ex3-dog-photo-gallery.js"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions Week1/HW1-EV/Ex3-dog-photo-gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// Let's make a randomized dog photo gallery!

// Write a function that makes an API call 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.

// Create an index.html file that will display your random image
// Add 2 < button > and 1 < ul > element, either in the HTML or through JavaScript
// Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios
// When any one of the 2 buttons is clicked it should make an API call to https://dog.ceo/api/breeds/image/random
// After receiving the data, append to the < ul > a < li > that contains an < img > element with the dog image
// Incorporate error handling

let btn = document.getElementById("showImgBttn").addEventListener('click', loadImg);

function loadImg() {

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
let url = JSON.parse(xhttp.responseText);
console.log(url.message);
document.getElementById("randomPic").src = url.message;
}
};
xhttp.open("GEt", "https://dog.ceo/api/breeds/image/random", true);
xhttp.send();
}

let getImg = () => {
axios.get("https://dog.ceo/api/breeds/image/random").then(response => {
console.log(response.data.message);
document.getElementById("randomPicAxios").src = response.data.message;
});
};


let btn2 = document.getElementById("showImgAxios").addEventListener("click", getImg);