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%; +}