From 25f3f81fb68a9bd9789bd71b27327c407e2acbe6 Mon Sep 17 00:00:00 2001 From: RAZAN Date: Thu, 9 Jul 2020 15:28:40 +0100 Subject: [PATCH] week-8 homework --- .vscode/settings.json | 3 +++ .../mandatory/2-fetch-exercise/exercise.js | 9 +++++--- .../3-dog-photo-gallery/gallery.html | 22 +++++++++++++++++++ .../mandatory/3-dog-photo-gallery/script.js | 22 +++++++++++++++++++ .../mandatory/3-dog-photo-gallery/style.css | 0 .../mandatory/3-dog-photo-gallery/task.md | 13 +++++++++++ .../mandatory/4-programmer-humour/index.html | 18 +++++++++++++++ .../4-programmer-humour/javascript.js | 19 ++++++++++++++++ 8 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 week-8/Homework/mandatory/3-dog-photo-gallery/gallery.html create mode 100644 week-8/Homework/mandatory/3-dog-photo-gallery/script.js create mode 100644 week-8/Homework/mandatory/3-dog-photo-gallery/style.css create mode 100644 week-8/Homework/mandatory/4-programmer-humour/index.html create mode 100644 week-8/Homework/mandatory/4-programmer-humour/javascript.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..f673a71b7 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ 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..4189eb7dd 100644 --- a/week-8/Homework/mandatory/2-fetch-exercise/exercise.js +++ b/week-8/Homework/mandatory/2-fetch-exercise/exercise.js @@ -17,10 +17,13 @@ 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) { +fetch('https://codeyourfuture.herokuapp.com/api/greetings') + .then(function (response) { return response.text(); }) - .then(function(greeting) { + .then(function (greeting) { + let greetingText = document.getElementById("greeting-text") + greetingText.innerText = greeting + // Write the code to display the greeting text here }); \ No newline at end of file diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/gallery.html b/week-8/Homework/mandatory/3-dog-photo-gallery/gallery.html new file mode 100644 index 000000000..0c4a743a3 --- /dev/null +++ b/week-8/Homework/mandatory/3-dog-photo-gallery/gallery.html @@ -0,0 +1,22 @@ + + + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file 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..a57e7777c --- /dev/null +++ b/week-8/Homework/mandatory/3-dog-photo-gallery/script.js @@ -0,0 +1,22 @@ +let x = document.getElementById("gallery") +let clickedButton = document.getElementById("button") +let list = document.getElementById("list") +function fetchData() { + fetch('https://dog.ceo/api/breeds/image/random') + .then(function (response) { + return response.json(); + }) + .then(function (data) { + console.log(data); + showImg(data) + }) + .catch((error) => console.log(error)); +} +clickedButton.addEventListener("click", fetchData) +function showImg(data) { + let ul = document.createElement("li") + list.appendChild(ul) + let img1 = document.createElement("img") + ul.appendChild(img1) + img1.src = data.message +} \ No newline at end of file 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..e69de29bb diff --git a/week-8/Homework/mandatory/3-dog-photo-gallery/task.md b/week-8/Homework/mandatory/3-dog-photo-gallery/task.md index af6b99a50..73cbf967c 100644 --- a/week-8/Homework/mandatory/3-dog-photo-gallery/task.md +++ b/week-8/Homework/mandatory/3-dog-photo-gallery/task.md @@ -9,3 +9,16 @@ Write a function that makes an API call to `https://dog.ceo/api/breeds/image/ran - When the button is clicked it should make an API call to `https://dog.ceo/api/breeds/image/random` - After receiving the data, append to the `