CodeYourFuture · roza8765 · Jul 9, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/week-8/Homework/mandatory/2-fetch-exercise/exercise.js b/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
@@ -17,10 +17,13 @@ Open index.html in your browser. Every time you refresh the page,
 a different greeting should be displayed in the box.
 */
 
-fetch('*** Write the API address here ***')
-    .then(function(response) {
+fetch('https://codeyourfuture.herokuapp.com/api/greetings')
+    .then(function (response) {
         return response.text();
     })
-    .then(function(greeting) {
+    .then(function (greeting) {
+        let greetingText = document.getElementById("greeting-text")
+        greetingText.innerText = greeting
+
         // Write the code to display the greeting text here
     });
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/gallery.html b/week-8/Homework/mandatory/3-dog-photo-gallery/gallery.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">
+    <link href="style.css" rel="stylesheet" />
+
+    <title>Document</title>
+
+</head>
+
+<body>
+
+    <button id="button"> press the Button</button>
+    <ul id="list">
+    </ul>
+    <div id="gallery"></div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/script.js b/week-8/Homework/mandatory/3-dog-photo-gallery/script.js
@@ -0,0 +1,22 @@
+let x = document.getElementById("gallery")
+let clickedButton = document.getElementById("button")
+let list = document.getElementById("list")
+function fetchData() {
+    fetch('https://dog.ceo/api/breeds/image/random')
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (data) {
+            console.log(data);
+            showImg(data)
+        })
+        .catch((error) => console.log(error));
+}
+clickedButton.addEventListener("click", fetchData)
+function showImg(data) {
+    let ul = document.createElement("li")
+    list.appendChild(ul)
+    let img1 = document.createElement("img")
+    ul.appendChild(img1)
+    img1.src = data.message
+}
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/style.css b/week-8/Homework/mandatory/3-dog-photo-gallery/style.css
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/task.md b/week-8/Homework/mandatory/3-dog-photo-gallery/task.md
@@ -9,3 +9,16 @@ Write a function that makes an API call to `https://dog.ceo/api/breeds/image/ran
 - When the button 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
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/week-8/Homework/mandatory/4-programmer-humour/index.html b/week-8/Homework/mandatory/4-programmer-humour/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="style.css" rel="stylesheet" />
+
+    <title>Document</title>
+</head>
+
+<body>
+
+    <div id="gallery"></div>
+    <script src="javascript.js"></script>
+</body>
+
+</html>
diff --git a/week-8/Homework/mandatory/4-programmer-humour/javascript.js b/week-8/Homework/mandatory/4-programmer-humour/javascript.js
@@ -0,0 +1,19 @@
+let gallery = document.getElementById("gallery")
+fetchData()
+
+function fetchData() {
+    fetch('https://xkcd.now.sh/?comic=latest')
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (data) {
+            console.log(data);
+            showImg(data)
+        })
+        .catch((error) => console.log(error));
+}
+function showImg(data) {
+    let img1 = document.createElement("img")
+    gallery.appendChild(img1)
+    img1.src = data.img
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,16 @@ Write a function that makes an API call to `https://dog.ceo/api/breeds/image/ran
		- When the button 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