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 :)_ Creative Commons License
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 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); 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