diff --git a/Week1/homework/js3-week1_exercises/forHumor.html b/Week1/homework/js3-week1_exercises/forHumor.html new file mode 100644 index 000000000..6803b88b6 --- /dev/null +++ b/Week1/homework/js3-week1_exercises/forHumor.html @@ -0,0 +1,22 @@ + + + + + + + + + Humor + + + + + + \ No newline at end of file diff --git a/Week1/homework/js3-week1_exercises/forHumor.js b/Week1/homework/js3-week1_exercises/forHumor.js new file mode 100644 index 000000000..2e12eeb55 --- /dev/null +++ b/Week1/homework/js3-week1_exercises/forHumor.js @@ -0,0 +1,38 @@ +// Exercise 2: Programmer humor +// Who knew programmers could be funny? +// 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 tag in the DOM +// Incorporate error handling + +'use strict'; + +function forHumorXml() { + const xhr = new XMLHttpRequest(); + xhr.responseType = 'json'; + xhr.open('GET', 'https://xkcd.now.sh/?comic=614'); + xhr.onload = function () { + if (this.status >= 200 && this.status <= 299) { + img.src = this.response.img; + } else { + console.log(`Error: ${xhr.status}`); + } + }; + xhr.onerror = () => console.log('Error: Network failing'); + xhr.send(); +} + +function forHumorAxios() { + axios('https://xkcd.now.sh/?comic=614') + .then(res => (img.src = res.data.img)) + .catch(err => console.log(err)); +} + +const img = document.createElement('img'); +document.body.appendChild(img); + + +forHumorXml(); +forHumorAxios(); diff --git a/Week1/homework/js3-week1_exercises/randomUser.html b/Week1/homework/js3-week1_exercises/randomUser.html new file mode 100644 index 000000000..748ff97a1 --- /dev/null +++ b/Week1/homework/js3-week1_exercises/randomUser.html @@ -0,0 +1,16 @@ + + + + + + + + Document + + + Random User Api + + + + + \ No newline at end of file diff --git a/Week1/homework/js3-week1_exercises/randomUser.js b/Week1/homework/js3-week1_exercises/randomUser.js new file mode 100644 index 000000000..45c6bd322 --- /dev/null +++ b/Week1/homework/js3-week1_exercises/randomUser.js @@ -0,0 +1,43 @@ +'use strict'; + +// Exercise 1: Who do we have here? +// Wouldn't it cool to make a new friend with just the click of a button? +// 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 + +function randomUserApi() { + + const xhr = new XMLHttpRequest(); + + xhr.open('GET', 'https://www.randomuser.me/api', true); + xhr.responseType = 'json'; + + xhr.onload = () => { + if (xhr.status >= 200 && xhr.status <= 299) { + console.log(xhr.response); + } else { + console.log(" Error: " + xhr.status ); + } + }; + xhr.onerror = () => { + console.log(" Error: Connect server error. "); + }; + + xhr.send(); +}; + + +function versionAxios() { + +axios + .get('https://www.randomuser.me/api') + .then(res => console.log(res.data)) + .catch(err => console.log(err)); + +}; + +randomUserApi(); +versionAxios(); \ No newline at end of file diff --git a/Week1/homework/js3-week1_exercises/theDogPhotoGallery.html b/Week1/homework/js3-week1_exercises/theDogPhotoGallery.html new file mode 100644 index 000000000..d9a56d8d3 --- /dev/null +++ b/Week1/homework/js3-week1_exercises/theDogPhotoGallery.html @@ -0,0 +1,85 @@ + + + + + + + The Dog Photos Gallery + + + +
+ + +
+
+ +
+ + + + \ No newline at end of file