CodeYourFuture · FatimaAbdimalik · Aug 22, 2020 · Aug 22, 2020 · Aug 22, 2020 · Aug 22, 2020
diff --git a/week-8/Homework/mandatory/1-practice/1-practice.md b/week-8/Homework/mandatory/1-practice/1-practice.md
@@ -26,6 +26,12 @@ The following endpoint is publicly available from Github
 
 <!-- Write your answer here -->
 
+`${owner}` : name of the github account owner;
+`${repo}` : name of the repository
+`${pull_number}` : number of the pull request
+
 2. Describe in a sentence what this API endpoint returns when all of the fields are completed?
 
 <!-- Write your answer here -->
+
+A json that contain all comments made on the pull request.
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,12 @@ 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) {
-        return response.text();
-    })
-    .then(function(greeting) {
-        // Write the code to display the greeting text here
-    });
+fetch("https://codeyourfuture.herokuapp.com/api/greetings")
+  .then((response) => response.text())
+  .then((data) => {
+    document.getElementById("greeting-text").innerHTML = data;
+  })
+  .catch((error) => {
+    console.log(error);
+  });
+// Write the code to display the greeting text here;
diff --git a/week-8/Homework/mandatory/2-fetch-exercise/index.html b/week-8/Homework/mandatory/2-fetch-exercise/index.html
@@ -1,28 +1,28 @@
-<!doctype html>
+<!DOCTYPE html>
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>CodeYourFuture - Fetch</title>
-  <meta name="description" content="Introduction to Fetch">
-  <meta name="author" content="CodeYourFuture">
-  <style>
-  #greeting-text {
-    font-size: 20px;
-    border: 1px solid #ccc;
-    background-color: #ddd;
-    width: 20%;
-    text-align: center;
-    margin: 0 50px;
-    padding: 30px;
-  }
-  </style>
-</head>
+  <head>
+    <meta charset="utf-8" />
+    <title>CodeYourFuture - Fetch</title>
+    <meta name="description" content="Introduction to Fetch" />
+    <meta name="author" content="CodeYourFuture" />
+    <style>
+      #greeting-text {
+        font-size: 20px;
+        border: 1px solid #ccc;
+        background-color: #ddd;
+        width: 20%;
+        text-align: center;
+        margin: 0 50px;
+        padding: 30px;
+      }
+    </style>
+  </head>
 
-<body>
-  <h1>A greeting in a random language...</h1>
-  <p id="greeting-text"></p>
+  <body>
+    <h1>A greeting in a random language...</h1>
+    <p id="greeting-text"></p>
 
-  <script src="exercise.js"></script>
-</body>
-</html>
+    <script src="exercise.js"></script>
+  </body>
+</html>
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/index.html b/week-8/Homework/mandatory/3-dog-photo-gallery/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dog-photo</title>
+    <style>
+      #img {
+        width: 30rem;
+        height: 30rem;
+      }
+      #list {
+        list-style: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <ul>
+        <li id="list">
+          <img id="img" src="" />
+        </li>
+      </ul>
+    </div>
+    <div>
+      <button id="button">Click here</button>
+    </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,18 @@
+console.log("Hello");
+
+const fetchPhoto = () => {
+  fetch("https://dog.ceo/api/breeds/image/random")
+    .then((response) => response.json())
+    .then((data) => {
+      let img = (document.getElementById("img").src = data.message);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+let button = document.getElementById("button");
+console.log(button);
+
+button.addEventListener("click", fetchPhoto);
+
+window.onload = fetchPhoto(); /// calls the function as soon as it loads
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,15 @@
+<!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" type="text/css" />
+    <title>Programmer-Humor</title>
+  </head>
+  <body>
+    <h1 id="title">Humorous Programmers</h1>
+    <div id="container"></div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/week-8/Homework/mandatory/4-programmer-humour/script.js b/week-8/Homework/mandatory/4-programmer-humour/script.js
@@ -0,0 +1,15 @@
+const fetchData = () => {
+  fetch("https://xkcd.now.sh/?comic=latest")
+    .then((response) => response.json())
+    .then((data) => {
+      //   console.log(data.img);
+      let img = document.createElement("img");
+      img.src = data.img;
+      document.getElementById("container").appendChild(img);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+window.onload = fetchData();
diff --git a/week-8/Homework/mandatory/4-programmer-humour/style.css b/week-8/Homework/mandatory/4-programmer-humour/style.css
@@ -0,0 +1,16 @@
+@media only screen and (max-width: 600px) {
+  body {
+    background-color: lightblue;
+  }
+  #container img {
+    width: 15rem;
+    height: 5rem;
+  }
+  #title {
+    font-size: medium;
+  }
+}
+
+#container img {
+  border: 5px dotted black;
+}