From de6f42656e41e0dd5070b86723ab93a46cb64d88 Mon Sep 17 00:00:00 2001
From: Harris Sheraz <58743620+HarrisSheraz20@users.noreply.github.com>
Date: Sat, 13 Jun 2020 15:44:09 +0100
Subject: [PATCH] js3-week8 done
---
.../mandatory/2-fetch-exercise/exercise.js | 15 +++++-----
.../mandatory/3-dog-photo-gallery/index.html | 10 +++++++
.../mandatory/3-dog-photo-gallery/script.js | 28 +++++++++++++++++++
.../mandatory/4-programmer-humour/index.html | 12 ++++++++
.../mandatory/4-programmer-humour/script.js | 18 ++++++++++++
5 files changed, 76 insertions(+), 7 deletions(-)
create mode 100644 week-8/Homework/mandatory/3-dog-photo-gallery/index.html
create mode 100644 week-8/Homework/mandatory/3-dog-photo-gallery/script.js
create mode 100644 week-8/Homework/mandatory/4-programmer-humour/index.html
create mode 100644 week-8/Homework/mandatory/4-programmer-humour/script.js
diff --git a/week-8/Homework/mandatory/2-fetch-exercise/exercise.js b/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
index fb3a39c2a..761c4875e 100644
--- a/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
+++ b/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
@@ -17,10 +17,11 @@ 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
- });
\ No newline at end of file
+fetch("*** Write the API address here ***")
+ .then(function (response) {
+ return response.text();
+ })
+ .then(function (greeting) {
+ const textEL = document.getElementById("greeting-text");
+ textEL.textContent = greeting;
+ });
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/index.html b/week-8/Homework/mandatory/3-dog-photo-gallery/index.html
new file mode 100644
index 000000000..4ede8a417
--- /dev/null
+++ b/week-8/Homework/mandatory/3-dog-photo-gallery/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+ Dog Photo Gallery
+
+
+
+
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/script.js b/week-8/Homework/mandatory/3-dog-photo-gallery/script.js
new file mode 100644
index 000000000..1ce49ff8d
--- /dev/null
+++ b/week-8/Homework/mandatory/3-dog-photo-gallery/script.js
@@ -0,0 +1,28 @@
+const btn1El = document.createElement("button");
+const listEl = document.createElement("ul");
+
+document.body.appendChild(btn1El);
+btn1El.textContent = "Generate a random dog photo";
+document.body.appendChild(listEl);
+
+btn1El.addEventListener("click", () => {
+ doSomething();
+});
+
+function doSomething() {
+ fetch("https://dog.ceo/api/breeds/image/random")
+ .then((response) => response.json())
+ .then((url) => {
+ console.log(url);
+ addRandomImg(url);
+ })
+ .catch((error) => console.log(error));
+}
+
+function addRandomImg(url) {
+ let liEl = document.createElement("li");
+ listEl.appendChild(liEl);
+ let imgEl = document.createElement("img");
+ listEl.appendChild(imgEl);
+ imgEl.src = url.message;
+}
diff --git a/week-8/Homework/mandatory/4-programmer-humour/index.html b/week-8/Homework/mandatory/4-programmer-humour/index.html
new file mode 100644
index 000000000..a2df62285
--- /dev/null
+++ b/week-8/Homework/mandatory/4-programmer-humour/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Programmer Humour
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week-8/Homework/mandatory/4-programmer-humour/script.js b/week-8/Homework/mandatory/4-programmer-humour/script.js
new file mode 100644
index 000000000..36b31339a
--- /dev/null
+++ b/week-8/Homework/mandatory/4-programmer-humour/script.js
@@ -0,0 +1,18 @@
+myFunction();
+
+function myFunction() {
+ fetch("https://xkcd.now.sh/?comic=latest")
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data);
+ showImg(data);
+ })
+ .catch((error) => console.log(error));
+}
+
+function showImg(obj) {
+ const imgEl = document.createElement("img");
+ document.body.appendChild(imgEl);
+ imgEl.src = obj.img;
+ imgEl.alt = obj.alt;
+}
\ No newline at end of file