CodeYourFuture · NawalC · Jun 27, 2020 · Jun 29, 2020 · Jun 30, 2020 · Jun 30, 2020
diff --git a/week-8/Homework/.vscode/settings.json b/week-8/Homework/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week-8/Homework/mandatory/1-practice/1-practice.md b/week-8/Homework/mandatory/1-practice/1-practice.md
@@ -25,7 +25,10 @@ The following endpoint is publicly available from Github
 1. What would you put in the following fields? `{owner}`, `{repo}`, `{pull_number}`?
 
 <!-- Write your answer here -->
-
+`{owner}`- username
+`{repo}` - name of repo
+`{pull_number}`- pull request number
 2. Describe in a sentence what this API endpoint returns when all of the fields are completed?
 
 <!-- Write your answer here -->
+Lists details of a pull request by providing its number
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,23 @@ 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();
+fetch('https://codeyourfuture.herokuapp.com/api/greetings')
+    .then((response )=> {
+     return response.text();
     })
-    .then(function(greeting) {
-        // Write the code to display the greeting text here
-    });
+
+    .then((greeting)=> {
+
+        addGreeting(greeting)
+    })
+
+    // .catch((error) => {
+    //     console.log(error);
+
+    // })
+
+    const addGreeting = (greetingObj) => {
+        const pElement = document.getElementById("greeting-text");
+        pElement.textContent = `${greetingObj}`;
+
+    }
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,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Document</title>
+    <style>
+        .list{
+          display: flex;
+          justify-content: center;
+          text-align: center;
+          margin: 0 50px;
+          padding: 30px;
+        }
+        img{
+            height: 500px;
+            width: auto;
+        }
+
+        button{
+            display: flex;
+            justify-content: center;
+            background-color: brown;
+            color: cornsilk;
+            font-size: 16px;
+        }
+
+        </style>
+</head>
+<body>
+    <div id="main">
+
+    </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,41 @@
+function getImage(){
+fetch ('https://dog.ceo/api/breeds/image/random')
+.then((response )=> {
+    return response.json();
+   })
+
+   .then((randomDogImg)=> {
+       //console.log(randomDogImg.message);
+
+      getRandomDogImg(randomDogImg)
+   })
+
+   .catch((error) => {
+        console.log(error);
+
+    })
+}
+
+
+const main = document.getElementById('main')
+const btnElement = document.createElement('button')
+      btnElement.innerText = 'Show next image'
+const ulElement = document.createElement('ul')
+      main.append(btnElement, ulElement)
+const liElement =document.createElement('li')
+        liElement.classList='list'
+const imgElement =document.createElement('img')
+const containerList = ulElement.appendChild(liElement)
+const imgList = liElement.appendChild(imgElement)
+
+   const getRandomDogImg= (dogImg) => {
+    imgElement.src = dogImg.message
+
+}
+
+// Next button
+btnElement.addEventListener('click', getImage)
+
+
+
+
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 rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div id="main">
+
+    </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,30 @@
+function getHumour(){
+    fetch ('https://xkcd.now.sh/?comic=latest')
+    .then((response )=> {
+        return response.json();
+       })
+
+       .then((data)=> {
+           console.log(data.title);
+           console.log(data.alt);
+
+          getData(data)
+       })
+
+       .catch((error) => {
+            console.log(error);
+
+        })
+    }
+
+    const main = document.getElementById('main')
+    const imgEl =document.createElement('img')
+    main.append(imgEl)
+
+    const getData= (data) => {
+
+        imgEl.src = data.img
+
+    }
+
+    getHumour()
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,12 @@
+*{
+    box-sizing: border-box;
+    background-color: rgb(132, 91, 138);
+}
+
+img{
+    display: flex;
+    padding: 70px 500px;
+    height: 600px;
+    border-inline: rgb(218, 64, 97);
+
+}