Repository navigation
Javascript 3 project branch #7
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Parcel Sandbox</title> | ||
| <meta charset="UTF-8" /> | ||
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="app"></div> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| //function using XMLHttp Request | ||
|
|
||
| let xhrObject = new XMLHttpRequest(); | ||
|
|
||
| xhrObject.addEventListener('error', xhrObjectErrorHandler); | ||
|
|
||
| function xhrObjectErrorHandler(event) { | ||
| console.log('Error'); | ||
| } | ||
| xhrObject.onreadystatechange = function() { | ||
| if (this.readyState == 4 && this.status == 200) { | ||
|
|
||
|
|
||
| let xhrObjectJason = JSON.parse(xhrObject.responseText); | ||
|
|
||
|
|
||
| let name = `${xhrObjectJason.results[0].name.first} ${xhrObjectJason.results[0].name.last}`; | ||
| document.body.innerHTML = `<h1> Hello ${name}, you were called using XmlHttpRequest.</h1>`; | ||
| } | ||
| }; | ||
|
|
||
| xhrObject.open('GET', 'https://www.randomuser.me/api'); | ||
| xhrObject.send(); | ||
|
|
||
| //function using axios | ||
|
|
||
| axios | ||
| .get('https://www.randomuser.me/api') | ||
| .then(function(response) { | ||
| let nameAxios = `${response.data.results[0].name.first} ${response.data.results[0].name.last}`; | ||
| document.body.innerHTML += `<h1> Hello ${nameAxios}, you were called using Axios.</h1>`; | ||
| }) | ||
| .catch(function(error) { | ||
| //console.log(error); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| let header = document.createElement('H1'); | ||
| header.innerHTML = `In this webpage you will see the latest post from xkcd.com <br> | ||
| First one is displayed with an XMLHttpRequest and second one is displayed with axios library `; | ||
| document.body.appendChild(header); | ||
| //document.body.appendChild | ||
|
|
||
| //function using XMLHttpRequest-------- | ||
|
|
||
| let xhrObject = new XMLHttpRequest(); | ||
|
|
||
| xhrObject.onreadystatechange = () => { | ||
| if (xhrObject.readyState == 4 && xhrObject.status == 200) { | ||
| let xhrObjectJason = JSON.parse(xhrObject.responseText); | ||
| let image = document.createElement('img'); | ||
| image.src = xhrObjectJason.img; | ||
| document.body.appendChild(image); | ||
| } | ||
| }; | ||
|
|
||
| xhrObject.open('GET', 'https://xkcd.now.sh/?comic=latest'); | ||
| xhrObject.onerror = err => { | ||
| console.log(err); | ||
| }; | ||
| xhrObject.send(); | ||
|
|
||
| //function using axios-------- | ||
|
|
||
| axios | ||
| .get('https://xkcd.now.sh/?comic=latest') | ||
| .then(function(response) { | ||
| // handle success | ||
| let axiosImage = document.createElement('img'); | ||
| axiosImage.src = response.data.img; | ||
| document.body.appendChild(axiosImage); | ||
|
|
||
| console.log(axiosImage); | ||
| }) | ||
| .catch(function(error) { | ||
| // handle error | ||
| console.log(error); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Parcel Sandbox</title> | ||
| <meta charset="UTF-8" /> | ||
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <script src="app.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| //made using xmlhttp request | ||
|
|
||
| let xmlObject = new XMLHttpRequest(); | ||
|
|
||
| function randomDogPhotoXml() { | ||
| xmlObject.onreadystatechange = function() { | ||
| if (this.readyState === 4 && this.status === 200) { | ||
| // Typical action to be performed when the document is ready: | ||
| let jsonObject = JSON.parse(xmlObject.responseText); | ||
| let button = document.querySelector('button'); | ||
|
|
||
| let image = document.createElement('img'); | ||
| image.setAttribute('width', '150px'); | ||
| image.setAttribute('height', '150px'); | ||
| image.src = jsonObject.message; | ||
|
|
||
| document.body.appendChild(image); | ||
|
|
||
| console.log(image); | ||
| } | ||
| }; | ||
|
|
||
| xmlObject.open('GET', 'https://dog.ceo/api/breeds/image/random'); | ||
| xmlObject.onerror = err => { | ||
| console.log(err); | ||
| }; | ||
| xmlObject.send(); | ||
| } | ||
|
|
||
| let buttonOne = document.getElementById('buttonOne'); | ||
| buttonOne.addEventListener('click', () => { | ||
| randomDogPhotoXml(); | ||
| }); | ||
|
|
||
| //made using axios | ||
|
|
||
| function randomDogPhotoAxios() { | ||
| axios | ||
| .get('https://dog.ceo/api/breeds/image/random') | ||
| .then(function(response) { | ||
| // handle success | ||
| let imageAxios = document.createElement('img'); | ||
| imageAxios.src = response.data.message; | ||
| imageAxios.setAttribute('width', '300px'); | ||
| imageAxios.setAttribute('height', '300px'); | ||
| console.log(imageAxios); | ||
| document.body.appendChild(imageAxios); | ||
| }) | ||
| .catch(function(error) { | ||
| // handle error | ||
| console.log(error); | ||
| }); | ||
| } | ||
|
|
||
| let buttonTwo = document.getElementById('buttonTwo'); | ||
| buttonTwo.addEventListener('click', () => { | ||
| randomDogPhotoAxios(); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Random Dog Photo Gallery</title> | ||
| <meta charset="UTF-8" /> | ||
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <button id="buttonOne"> | ||
| click me to add a random dog photo with XMLHttpRequest | ||
| </button> | ||
| <button id="buttonTwo"> | ||
| click me to add a random dog photo with Axios | ||
| </button> | ||
|
|
||
| <script src="app.js"></script> | ||
| </body> | ||
| </html> |
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" | ||
| /> | ||
| <meta name="theme-color" content="#000000" /> | ||
| <meta name="apple-mobile-web-app-capable" content="yes" /> | ||
| <meta name="mobile-web-app-capable" content="yes" /> | ||
| <meta name="format-detection" content="telephone=no" /> | ||
| <link rel="apple-touch-icon" href="./hyf.png" /> | ||
| <link rel="shortcut icon" type="image/png" href="./hyf.png" /> | ||
| <title>HYF-GITHUB</title> | ||
| <link | ||
| href="https://fonts.googleapis.com/css?family=Roboto:400,700" | ||
| rel="stylesheet" | ||
| /> | ||
| <link rel="stylesheet" href="./style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="root"> | ||
| <!-- here will be appended the javascript generated elements--> | ||
| </div> | ||
| <script src="./index.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,26 @@ | ||
| .alert-error { | ||
| color: red; | ||
| background-color: pink; | ||
| padding: 2vh; | ||
| } | ||
|
|
||
| .banner { | ||
| background-color: blue; | ||
| color: white; | ||
| padding: 3%; | ||
| } | ||
|
|
||
| ul { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| li { | ||
| font-weight: bolder; | ||
| border-style: groove; | ||
| list-style-type: none; | ||
| display: inline-block; | ||
| margin: auto; | ||
| padding: 1.5vw; | ||
| margin-left: 0; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There should be as little code as possible that leaves outside of a function. It is better to place this code inside a init() function of example and just call init at the beginning of your code