week1 js-exercises complete

Stef-Lev · Stef-Lev · commit d22ff41ff3fe · 2020-03-05T00:34:26.000+02:00
diff --git a/Week1/Homework/js-exercises/dogPhotoGallery/dogPhoto.js b/Week1/Homework/js-exercises/dogPhotoGallery/dogPhoto.js
@@ -0,0 +1,50 @@
+"use strict"
+const xmlButton = document.querySelector("#xml");
+const axButton = document.querySelector("#axios");
+const ul = document.querySelector("ul");
+
+
+const xml = new XMLHttpRequest();
+let xmData;
+let axData;
+let newLi;
+let newImg;
+
+
+function requestXML() {
+    xml.onreadystatechange = () => {
+        if (xml.readyState === 4 && xml.status === 200) {
+            xmData = JSON.parse(xml.response);
+            console.log(xml.response);
+            newLi = document.createElement("li");
+            newImg = document.createElement("img");
+            newImg.src = xmData.message;
+            newLi.appendChild(newImg);
+            ul.appendChild(newLi);
+
+        } else {
+            err => console.log(err)
+        }
+    }
+
+    xml.open("GET", "https://dog.ceo/api/breeds/image/random", true);
+    xml.send();
+}
+xmlButton.addEventListener("click", requestXML);
+
+function requestAxios() {
+    axios
+        .get("https://dog.ceo/api/breeds/image/random")
+        .then(resp => {
+            console.log(resp);
+            axData = resp.data.message;
+            newLi = document.createElement("li");
+            newImg = document.createElement("img");
+            newImg.src = axData;
+            newLi.appendChild(newImg);
+            ul.appendChild(newLi);
+
+        })
+        .catch(err => console.log(err))
+}
+axButton.addEventListener("click", requestAxios)
diff --git a/Week1/Homework/js-exercises/dogPhotoGallery/index.html b/Week1/Homework/js-exercises/dogPhotoGallery/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dog Gallery</title>
+</head>
+
+<body>
+    <button id="xml">XML</button>
+    <button id="axios">AXIOS</button>
+    <div>
+        <ul>
+
+        </ul>
+
+    </div>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="dogPhoto.js"></script>
+</body>
+
+</html>
diff --git a/Week1/Homework/js-exercises/programmerHumor/progHumor.html b/Week1/Homework/js-exercises/programmerHumor/progHumor.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>progHumor</title>
+</head>
+
+<body>
+    <button id="xml">XML</button>
+    <button id="axios">AXIOS</button>
+    <br>
+    <img src="" id="cat-image" width="500px" style="border: 2px solid grey; border-radius: 10px; margin: 20px;">
+
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="progHumor.js"></script>
+</body>
+
+
+</html>
diff --git a/Week1/Homework/js-exercises/programmerHumor/progHumor.js b/Week1/Homework/js-exercises/programmerHumor/progHumor.js
@@ -0,0 +1,40 @@
+"use strict"
+//Due to a CORS error I couldn't use the API of the exercise so I used another API with the same logic.
+//Each time you press a button a request is being sent, the data is logged in the console, and an image of a cute cat appears.
+const xmlButton = document.querySelector("#xml");
+const axiosButton = document.querySelector("#axios");
+const textbox = document.querySelector("#textbox");
+const image = document.querySelector("#cat-image")
+
+const xhr = new XMLHttpRequest();
+let xmlData;
+let axiosData;
+
+
+function xmlReq() {
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            xmlData = JSON.parse(xhr.response);
+            console.log(xmlData[0]);
+            image.src = xmlData[0].url;
+        } else {
+            err => console.log(err)
+        }
+    }
+    xhr.open("GET", "https://api.thecatapi.com/v1/images/search", true);
+    xhr.send();
+}
+xmlButton.addEventListener("click", xmlReq);
+
+function axiosReq() {
+    axios
+        .get("https://api.thecatapi.com/v1/images/search")
+        .then(response => {
+            console.log(response.data[0]);
+            axiosData = response.data[0];
+            image.src = axiosData.url;
+        })
+        .catch(error => console.log(error))
+}
+
+axiosButton.addEventListener("click", axiosReq);
