exercise 3

spiropoulos94 · Feb 5, 2020 · Feb 5, 2020 · Feb 6, 2020 · Feb 6, 2020 · Feb 8, 2020
commit 727f9ccf1a4268afa76eb01900ddaf8eeaa14bd3
diff --git a/Week1/js-exercises-week1/exercise3 dog photo gallery/app.js b/Week1/js-exercises-week1/exercise3 dog photo gallery/app.js
@@ -0,0 +1,58 @@
+//made using xmlhttp request
+
+let xmlObject = new XMLHttpRequest();
+
+function randomDogPhotoXml() {
+  xmlObject.onreadystatechange = function() {
+    if (this.readyState === 4 && this.status === 200) {
+      // Typical action to be performed when the document is ready:
+      let jsonObject = JSON.parse(xmlObject.responseText);
+      let button = document.querySelector('button');
+
+      let image = document.createElement('img');
+      image.setAttribute('width', '150px');
+      image.setAttribute('height', '150px');
+      image.src = jsonObject.message;
+
+      document.body.appendChild(image);
+
+      console.log(image);
+    }
+  };
+
+  xmlObject.open('GET', 'https://dog.ceo/api/breeds/image/random');
+  xmlObject.onerror = err => {
+    console.log(err);
+  };
+  xmlObject.send();
+}
+
+let buttonOne = document.getElementById('buttonOne');
+buttonOne.addEventListener('click', () => {
+  randomDogPhotoXml();
+});
+
+//made using axios
+
+function randomDogPhotoAxios() {
+  axios
+    .get('https://dog.ceo/api/breeds/image/random')
+    .then(function(response) {
+      // handle success
+      let imageAxios = document.createElement('img');
+      imageAxios.src = response.data.message;
+      imageAxios.setAttribute('width', '300px');
+      imageAxios.setAttribute('height', '300px');
+      console.log(imageAxios);
+      document.body.appendChild(imageAxios);
+    })
+    .catch(function(error) {
+      // handle error
+      console.log(error);
+    });
+}
+
+let buttonTwo = document.getElementById('buttonTwo');
+buttonTwo.addEventListener('click', () => {
+  randomDogPhotoAxios();
+});
diff --git a/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html b/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Parcel Sandbox</title>
+    <meta charset="UTF-8" />
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  </head>
+
+  <body>
+    <button id="buttonOne">
+      click me to add a random dog photo with XMLHttpRequest
+    </button>
+    <button id="buttonTwo">
+      click me to add a random dog photo with Axios
+    </button>
+
+    <script src="app.js"></script>
+  </body>
+</html>