Codestin Search App

From 4cee9526b7ed1647129926e1443938f2877293c1 Mon Sep 17 00:00:00 2001 From: Sohail Haqyar Date: Thu, 2 Jan 2020 17:53:51 +0200 Subject: [PATCH 01/10] Social Hackers Academy Stamped --- README.md | 8 ++++---- Week1/MAKEME.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 34103e174..f2daf04b7 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -> Please help us improve and share your feedback! If you find better tutorials -> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls). # Module #4 - JavaScript 3: Object-Oriented Programming and working with APIs (Frontend) @@ -81,8 +79,10 @@ With this out of the way we can get started! Did you finish the module? High five! -If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Node.js) to go to Node.js! +If you feel ready for the next challenge, click [here](https://www.github.com/SocialHackersCodeSchool/Node.js) to go to Node.js! + +## Credit: +This curriculum is developed by HackYourFuture, modifications, and changes can be found in this Fork. (edited) -_The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_

This work is licensed under a Creative Commons Attribution 4.0 International License. diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 7b3cb47b8..645733b59 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -73,7 +73,7 @@ Figure 1 below shows an example of what your application will look like. This application does 2 things: -1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/hackyourfuture). +1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/SocialHackersCodeSchool). 2. It displays those repositories in an alphabetically-oreded list. When a user clicks on any of the repository names it will show more details about it. ### Getting an overview From fdea1fff1fe39a3a715a84716b776dd804b529f4 Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:46:20 +0200 Subject: [PATCH 02/10] js3-w1-hw-Ev --- Ex1-function-randomuser.html | 44 ++++++++++++++++++++++++++++++ Ex2-programmer-humor.html | 52 ++++++++++++++++++++++++++++++++++++ Ex3-dog-photo-gallery.html | 26 ++++++++++++++++++ Ex3-dog-photo-gallery.js | 37 +++++++++++++++++++++++++ 4 files changed, 159 insertions(+) create mode 100644 Ex1-function-randomuser.html create mode 100644 Ex2-programmer-humor.html create mode 100644 Ex3-dog-photo-gallery.html create mode 100644 Ex3-dog-photo-gallery.js diff --git a/Ex1-function-randomuser.html b/Ex1-function-randomuser.html new file mode 100644 index 000000000..877656f56 --- /dev/null +++ b/Ex1-function-randomuser.html @@ -0,0 +1,44 @@ + + + + + + + + Codestin Search App + + + + + + + + \ No newline at end of file diff --git a/Ex2-programmer-humor.html b/Ex2-programmer-humor.html new file mode 100644 index 000000000..362ba969f --- /dev/null +++ b/Ex2-programmer-humor.html @@ -0,0 +1,52 @@ + + + + + + + + Codestin Search App + + + + + + + + + \ No newline at end of file diff --git a/Ex3-dog-photo-gallery.html b/Ex3-dog-photo-gallery.html new file mode 100644 index 000000000..a7efec547 --- /dev/null +++ b/Ex3-dog-photo-gallery.html @@ -0,0 +1,26 @@ + + + + + + + + Codestin Search App + + + + + +

+ +

+ + + + + + \ No newline at end of file diff --git a/Ex3-dog-photo-gallery.js b/Ex3-dog-photo-gallery.js new file mode 100644 index 000000000..0683a2e6e --- /dev/null +++ b/Ex3-dog-photo-gallery.js @@ -0,0 +1,37 @@ +// Let's make a randomized dog photo gallery! + +// Write a function that makes an API call to https://dog.ceo/api/breeds/image/random. It should trigger after clicking a +// button in your webpage.Every time the button is clicked it should append a new dog image to the DOM. + +// Create an index.html file that will display your random image +// Add 2 < button > and 1 < ul > element, either in the HTML or through JavaScript +// Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios +// When any one of the 2 buttons is clicked it should make an API call to https://dog.ceo/api/breeds/image/random +// After receiving the data, append to the < ul > a < li > that contains an < img > element with the dog image +// Incorporate error handling + +let btn = document.getElementById("showImgBttn").addEventListener('click', loadImg); + +function loadImg() { + + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + let url = JSON.parse(xhttp.responseText); + console.log(url.message); + document.getElementById("randomPic").src = url.message; + } + }; + xhttp.open("GEt", "https://dog.ceo/api/breeds/image/random", true); + xhttp.send(); +} + +let getImg = () => { + axios.get("https://dog.ceo/api/breeds/image/random").then(response => { + console.log(response.data.message); + document.getElementById("randomPicAxios").src = response.data.message; + }); +}; + + +let btn2 = document.getElementById("showImgAxios").addEventListener("click", getImg); From a8600ec10162f72ef9d221d523c3cbeab4bfa7ba Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:47:25 +0200 Subject: [PATCH 03/10] Create readme.md --- js3-w1-hw-Ev/readme.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 js3-w1-hw-Ev/readme.md diff --git a/js3-w1-hw-Ev/readme.md b/js3-w1-hw-Ev/readme.md new file mode 100644 index 000000000..0c551e3a2 --- /dev/null +++ b/js3-w1-hw-Ev/readme.md @@ -0,0 +1 @@ +Homework week 1 Javascript3 From d3bbbbc7678ec03a271418df8040cfd8278cc63e Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:48:50 +0200 Subject: [PATCH 04/10] Delete Ex1-function-randomuser.html --- Ex1-function-randomuser.html | 44 ------------------------------------ 1 file changed, 44 deletions(-) delete mode 100644 Ex1-function-randomuser.html diff --git a/Ex1-function-randomuser.html b/Ex1-function-randomuser.html deleted file mode 100644 index 877656f56..000000000 --- a/Ex1-function-randomuser.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - Codestin Search App - - - - - - - - \ No newline at end of file From e7b457e58a06da2a196fb43914980c6ba41f2d28 Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:49:07 +0200 Subject: [PATCH 05/10] Delete readme.md --- js3-w1-hw-Ev/readme.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 js3-w1-hw-Ev/readme.md diff --git a/js3-w1-hw-Ev/readme.md b/js3-w1-hw-Ev/readme.md deleted file mode 100644 index 0c551e3a2..000000000 --- a/js3-w1-hw-Ev/readme.md +++ /dev/null @@ -1 +0,0 @@ -Homework week 1 Javascript3 From 479d5fd484f725f7832906d9b2aa2ff41f6b7b5a Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:49:17 +0200 Subject: [PATCH 06/10] Delete Ex2-programmer-humor.html --- Ex2-programmer-humor.html | 52 --------------------------------------- 1 file changed, 52 deletions(-) delete mode 100644 Ex2-programmer-humor.html diff --git a/Ex2-programmer-humor.html b/Ex2-programmer-humor.html deleted file mode 100644 index 362ba969f..000000000 --- a/Ex2-programmer-humor.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - Codestin Search App - - - - - - - - - \ No newline at end of file From 49fa11a7f9ca4bbfd750e612fbbcad2a13d8d3ce Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:49:25 +0200 Subject: [PATCH 07/10] Delete Ex3-dog-photo-gallery.js --- Ex3-dog-photo-gallery.js | 37 ------------------------------------- 1 file changed, 37 deletions(-) delete mode 100644 Ex3-dog-photo-gallery.js diff --git a/Ex3-dog-photo-gallery.js b/Ex3-dog-photo-gallery.js deleted file mode 100644 index 0683a2e6e..000000000 --- a/Ex3-dog-photo-gallery.js +++ /dev/null @@ -1,37 +0,0 @@ -// Let's make a randomized dog photo gallery! - -// Write a function that makes an API call to https://dog.ceo/api/breeds/image/random. It should trigger after clicking a -// button in your webpage.Every time the button is clicked it should append a new dog image to the DOM. - -// Create an index.html file that will display your random image -// Add 2 < button > and 1 < ul > element, either in the HTML or through JavaScript -// Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios -// When any one of the 2 buttons is clicked it should make an API call to https://dog.ceo/api/breeds/image/random -// After receiving the data, append to the < ul > a < li > that contains an < img > element with the dog image -// Incorporate error handling - -let btn = document.getElementById("showImgBttn").addEventListener('click', loadImg); - -function loadImg() { - - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = function () { - if (this.readyState == 4 && this.status == 200) { - let url = JSON.parse(xhttp.responseText); - console.log(url.message); - document.getElementById("randomPic").src = url.message; - } - }; - xhttp.open("GEt", "https://dog.ceo/api/breeds/image/random", true); - xhttp.send(); -} - -let getImg = () => { - axios.get("https://dog.ceo/api/breeds/image/random").then(response => { - console.log(response.data.message); - document.getElementById("randomPicAxios").src = response.data.message; - }); -}; - - -let btn2 = document.getElementById("showImgAxios").addEventListener("click", getImg); From bb379ab535fedfefe1e1e8e99f377e540a71a649 Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:49:34 +0200 Subject: [PATCH 08/10] Delete Ex3-dog-photo-gallery.html --- Ex3-dog-photo-gallery.html | 26 -------------------------- 1 file changed, 26 deletions(-) delete mode 100644 Ex3-dog-photo-gallery.html diff --git a/Ex3-dog-photo-gallery.html b/Ex3-dog-photo-gallery.html deleted file mode 100644 index a7efec547..000000000 --- a/Ex3-dog-photo-gallery.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - Codestin Search App - - - - - -

- -

- - - - - - \ No newline at end of file From ba2980d4314523c9bde4b0ac734428d6bb483770 Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:50:51 +0200 Subject: [PATCH 09/10] Create readme.md --- Week1/js3-w1-hw-Ev/readme.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 Week1/js3-w1-hw-Ev/readme.md diff --git a/Week1/js3-w1-hw-Ev/readme.md b/Week1/js3-w1-hw-Ev/readme.md new file mode 100644 index 000000000..99308f79d --- /dev/null +++ b/Week1/js3-w1-hw-Ev/readme.md @@ -0,0 +1,2 @@ +HOMEWORK FOR WEEK1 +MODULE JAVASCRIPT 3 From c4410cf726ff8ee4df3a3878e73be1ad1d4d0335 Mon Sep 17 00:00:00 2001 From: Evina Mouselimi Date: Sun, 9 Feb 2020 14:51:10 +0200 Subject: [PATCH 10/10] Add files via upload --- .../js3-w1-hw-Ev/Ex1-function-randomuser.html | 44 ++++++++++++++++ Week1/js3-w1-hw-Ev/Ex2-programmer-humor.html | 52 +++++++++++++++++++ Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.html | 26 ++++++++++ Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.js | 37 +++++++++++++ 4 files changed, 159 insertions(+) create mode 100644 Week1/js3-w1-hw-Ev/Ex1-function-randomuser.html create mode 100644 Week1/js3-w1-hw-Ev/Ex2-programmer-humor.html create mode 100644 Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.html create mode 100644 Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.js diff --git a/Week1/js3-w1-hw-Ev/Ex1-function-randomuser.html b/Week1/js3-w1-hw-Ev/Ex1-function-randomuser.html new file mode 100644 index 000000000..877656f56 --- /dev/null +++ b/Week1/js3-w1-hw-Ev/Ex1-function-randomuser.html @@ -0,0 +1,44 @@ + + + + + + + + Codestin Search App + + + + + + + + \ No newline at end of file diff --git a/Week1/js3-w1-hw-Ev/Ex2-programmer-humor.html b/Week1/js3-w1-hw-Ev/Ex2-programmer-humor.html new file mode 100644 index 000000000..362ba969f --- /dev/null +++ b/Week1/js3-w1-hw-Ev/Ex2-programmer-humor.html @@ -0,0 +1,52 @@ + + + + + + + + Codestin Search App + + + + + + + + + \ No newline at end of file diff --git a/Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.html b/Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.html new file mode 100644 index 000000000..a7efec547 --- /dev/null +++ b/Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.html @@ -0,0 +1,26 @@ + + + + + + + + Codestin Search App + + + + + +

+ +

+ + + + + + \ No newline at end of file diff --git a/Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.js b/Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.js new file mode 100644 index 000000000..0683a2e6e --- /dev/null +++ b/Week1/js3-w1-hw-Ev/Ex3-dog-photo-gallery.js @@ -0,0 +1,37 @@ +// Let's make a randomized dog photo gallery! + +// Write a function that makes an API call to https://dog.ceo/api/breeds/image/random. It should trigger after clicking a +// button in your webpage.Every time the button is clicked it should append a new dog image to the DOM. + +// Create an index.html file that will display your random image +// Add 2 < button > and 1 < ul > element, either in the HTML or through JavaScript +// Write two versions for the button functionality: one with XMLHttpRequest, and the other with axios +// When any one of the 2 buttons is clicked it should make an API call to https://dog.ceo/api/breeds/image/random +// After receiving the data, append to the < ul > a < li > that contains an < img > element with the dog image +// Incorporate error handling + +let btn = document.getElementById("showImgBttn").addEventListener('click', loadImg); + +function loadImg() { + + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + let url = JSON.parse(xhttp.responseText); + console.log(url.message); + document.getElementById("randomPic").src = url.message; + } + }; + xhttp.open("GEt", "https://dog.ceo/api/breeds/image/random", true); + xhttp.send(); +} + +let getImg = () => { + axios.get("https://dog.ceo/api/breeds/image/random").then(response => { + console.log(response.data.message); + document.getElementById("randomPicAxios").src = response.data.message; + }); +}; + + +let btn2 = document.getElementById("showImgAxios").addEventListener("click", getImg);