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