diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/week-8/Homework/mandatory/2-fetch-exercise/exercise.js b/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
index fb3a39c2a..9867161f4 100644
--- a/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
+++ b/week-8/Homework/mandatory/2-fetch-exercise/exercise.js
@@ -8,7 +8,6 @@ Response: A greeting in a random language
To learn more about fetch, refer to the doc:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
-
================
Expected result
================
@@ -17,10 +16,21 @@ 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("https://codeyourfuture.herokuapp.com/api/greetings")
+ .then(function (response) {
+ return response.text();
+ })
+ .then(function (greeting) {
+ greetingWords(greeting);
+ console.log(greeting);
+
+ // Write the code to display the greeting text here
+ });
+
+let getHtmlDoc = document.getElementById("greeting-text");
+
+function greetingWords(greet) {
+ let createH2 = document.createElement("H2");
+ createH2.textContent = greet;
+ getHtmlDoc.appendChild(createH2);
+}
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/exercise.js b/week-8/Homework/mandatory/3-dog-photo-gallery/exercise.js
new file mode 100644
index 000000000..da904047a
--- /dev/null
+++ b/week-8/Homework/mandatory/3-dog-photo-gallery/exercise.js
@@ -0,0 +1,30 @@
+let getBtn = document.getElementById("random-image");
+function getData() {
+ fetch("https://dog.ceo/api/breeds/image/random")
+ .then((response) => {
+ return response.json();
+ })
+ .then((data) => {
+ let printImg = data.message;
+ myImages(printImg);
+ console.log(data);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+}
+let createUl = document.createElement("ul");
+createUl.className += "ul-size";
+function myImages(image) {
+ let content = document.getElementById("add-photos");
+ let createImg = document.createElement("img");
+ createImg.className += "image-size";
+ let createList = document.createElement("li");
+ createList.className += "img-list";
+ createImg.src = image;
+ createList.appendChild(createImg);
+ createUl.appendChild(createList);
+ content.appendChild(createUl);
+}
+
+getBtn.addEventListener("click", getData);
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..81b1c5fa5
--- /dev/null
+++ b/week-8/Homework/mandatory/3-dog-photo-gallery/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/style.css b/week-8/Homework/mandatory/3-dog-photo-gallery/style.css
new file mode 100644
index 000000000..95bd66189
--- /dev/null
+++ b/week-8/Homework/mandatory/3-dog-photo-gallery/style.css
@@ -0,0 +1,14 @@
+.image-size {
+ width: 400px;
+ display: flex;
+}
+#container {
+ display: flex;
+}
+.ul-size {
+ display: flex;
+ flex-wrap: wrap;
+}
+.img-list {
+ max-width: 400px;
+}
diff --git a/week-8/Homework/mandatory/4-programmer-humour/exercise.js b/week-8/Homework/mandatory/4-programmer-humour/exercise.js
new file mode 100644
index 000000000..c9f470c37
--- /dev/null
+++ b/week-8/Homework/mandatory/4-programmer-humour/exercise.js
@@ -0,0 +1,23 @@
+console.log("Hi");
+function getData(url) {
+ fetch(url)
+ .then((response) => {
+ console.log(response);
+ return response.json();
+ })
+ .then((data) => {
+ let getData = data.img;
+ displayImg(getData);
+ console.log(getData);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+}
+getData("https://xkcd.now.sh/?comic=latest");
+let content = document.getElementById("container");
+function displayImg(image) {
+ let createImg = document.createElement("img");
+ createImg.src = image;
+ content.appendChild(createImg);
+}
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..b939646b0
--- /dev/null
+++ b/week-8/Homework/mandatory/4-programmer-humour/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/week-8/Homework/mandatory/4-programmer-humour/style.css b/week-8/Homework/mandatory/4-programmer-humour/style.css
new file mode 100644
index 000000000..975eaf26e
--- /dev/null
+++ b/week-8/Homework/mandatory/4-programmer-humour/style.css
@@ -0,0 +1,9 @@
+body {
+ background-color: cyan;
+}
+#container {
+ display: block;
+ margin-left: 40%;
+ margin-right: 30%;
+ width: 60%;
+}