Number API

diff --git a/Week1/homework/code along/app.js b/Week1/homework/code along/app.js new file mode 100644 index 000000000..c8a149a37 --- /dev/null +++ b/Week1/homework/code along/app.js @@ -0,0 +1,40 @@ +const number = document.getElementById('number'); +const fact = document.getElementById('fact'); + +number.addEventListener('input', addText); + +function addText(){ + const num = number.value; + const URL = `http://numbersapi.com/${num}`; + + const xhr = new XMLHttpRequest(); + xhr.open('GET', URL, true); + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { + // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { + // show the result + let response = xhr.responseText; + fact.style.display = 'block'; + fact.textContent = response; + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + }; + + xhr.onerror = function() { + console.log('Request failed'); + }; + + +} \ No newline at end of file diff --git a/Week1/homework/code along/index.html b/Week1/homework/code along/index.html new file mode 100644 index 000000000..1781ac32b --- /dev/null +++ b/Week1/homework/code along/index.html @@ -0,0 +1,30 @@ + + + + + + Number API + + + + +

Number Facts

+ Please enter number in order to find out +
+ + +

+ + +

+ + + + + + + \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js b/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js new file mode 100644 index 000000000..394f0d9cd --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex1-WhoDoWeHaveHere.js @@ -0,0 +1,51 @@ +const URL = 'https://www.randomuser.me/api'; + +function requestWithXHR(URL){ +const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; +const xhr = new XMLHttpRequest(); +xhr.open('GET', URL, true); +xhr.send(); + +// 4. This will be called after the response is received +xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + const response = JSON.parse(xhr.responseText); + console.log(response.results[0].gender); + } +}; + +xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + +}; + +xhr.onerror = function() { + console.log("Request failed"); +}; +}; + +function requestWithAxios(URL){ + const axios = require('axios').default; + axios.get(URL) + .then(function (response) { + // handle success + console.log(response.data.results[0].gender); + }) + .catch(function (error) { + // handle error + console.log("Request failed"); + }) + .then(function () { + // always executed + }); + +}; + +requestWithXHR(URL); +requestWithAxios(URL); \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js b/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js new file mode 100644 index 000000000..10bbdb92f --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex2-ProgrammerHumor.js @@ -0,0 +1,53 @@ +const URL = 'https://xkcd.now.sh/?comic=latest'; +const image1 = document.getElementById('image1'); +const image2 = document.getElementById('image2'); + +function requestWithXHR(URL){ +const xhr = new XMLHttpRequest(); +xhr.open('GET', URL, true); +xhr.send(); + +// 4. This will be called after the response is received +xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + const response = JSON.parse(xhr.responseText); + console.log(response); + image1.src = response.img; + } +}; + +xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + +}; + +xhr.onerror = function() { + console.log("Request failed"); +}; +}; + +function requestWithAxios(URL){ + axios.get(URL) + .then(function (response) { + // handle success + console.log(response.data); + image2.src = response.data.img; + }) + .catch(function (error) { + // handle error + console.log("Request failed"); + }) + .then(function () { + // always executed + }); + +}; + +requestWithXHR(URL); +requestWithAxios(URL); \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex2.html b/Week1/homework/masoud/js-exercises/Ex2.html new file mode 100644 index 000000000..a204a0823 --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex2.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js b/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js new file mode 100644 index 000000000..e4277b142 --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex3-DogPhotoGallery.js @@ -0,0 +1,70 @@ +const URL = 'https://dog.ceo/api/breeds/image/random'; +const xmlBtn = document.getElementById('xmlBTN'); +const axiosBtn = document.getElementById('axiosBTN'); +const ulElm = document.getElementById('list'); +const imgSize = '300px'; +ulElm.style.display = 'flex'; +ulElm.style.flexWrap = 'wrap'; + +xmlBtn.addEventListener('click',requestWithXHR); +axiosBtn.addEventListener('click',requestWithAxios); + + +function requestWithXHR() { + const xhr = new XMLHttpRequest(); + xhr.open('GET', URL, true); + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200 && xhr.status != 200) { + // analyze HTTP status of the response + console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { + // show the result + const response = JSON.parse(xhr.responseText); + const liElm = document.createElement('li'); + const imgElm = document.createElement('img'); + imgElm.src = response.message; + imgElm.style.height = imgSize; + liElm.style.listStyle = 'none'; + liElm.appendChild(imgElm); + ulElm.appendChild(liElm); + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + console.log(`Received ${event.loaded} of ${event.total} bytes`); + } else { + console.log(`Received ${event.loaded} bytes`); // no Content-Length + } + }; + + xhr.onerror = function() { + console.log('Request failed'); + }; +} + + + +function requestWithAxios(){ + axios.get(URL) + .then(function (response) { + // handle success + const liElm = document.createElement('li'); + const imgElm = document.createElement('img'); + imgElm.src = response.data.message; + imgElm.style.height = imgSize; + liElm.style.listStyle = 'none'; + liElm.appendChild(imgElm); + ulElm.appendChild(liElm); + }) + .catch(function (error) { + // handle error + console.log("Request failed"); + }) + .then(function () { + // always executed + }); +}; diff --git a/Week1/homework/masoud/js-exercises/Ex3.html b/Week1/homework/masoud/js-exercises/Ex3.html new file mode 100644 index 000000000..54bdb6666 --- /dev/null +++ b/Week1/homework/masoud/js-exercises/Ex3.html @@ -0,0 +1,16 @@ + + + + + + Document + + +

+ + + + + + + \ No newline at end of file diff --git a/hackyourrepo-app/Masoud/week1/css/style.css b/hackyourrepo-app/Masoud/week1/css/style.css new file mode 100644 index 000000000..be7c42c4a --- /dev/null +++ b/hackyourrepo-app/Masoud/week1/css/style.css @@ -0,0 +1,92 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body{ + background-color: #313267; + font-size: 14px; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + width: 100vw; + height: calc(100vh - 20px); + overflow: hidden; +} + +header{ + height: 15%; + background-color:#313267 ; +} + + +header a{ + height: 100%; + display: block; + text-align: center; +} + +img{ + height: inherit; + padding: 5px; +} + +.container{ + background-color: #6ed5e7; + width: calc(95% - 5px); + margin: auto; + height: 85%; +} + +.selector{ + padding: 10px; + font-size: 1.7em; + background-color: rgb(252, 103, 49); + color: white; +} + +#repo-items{ + font-size: 16px; + font-family: sans-serif; + font-weight: 700; + color: #444; + padding: .6em 1.4em .5em .8em; + max-width: 100%; /* useful when width is set to anything other than 100% */ + margin: 0px auto; + border: 1px solid #aaa; + -moz-appearance: none; + -webkit-appearance: none; + background-color: #fff; + font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +.des-con{ + display: flex; + padding: 10px; +} + +.description, .contributers{ + width: 50%; + border: 3px rgb(223, 152, 152) solid; + margin: 5px; + +} + +table{ + border-spacing: 10px; +} + +@media only screen and (max-width:550px){ + .des-con{ + flex-direction: column; + align-items: center; + } + .description, .contributers{ + width: 90%; + } + .selector{ + text-align: center; + } + #repo-items{ + margin-top: 10px; + } +} \ No newline at end of file diff --git a/hackyourrepo-app/Masoud/week1/img/favicon.ico b/hackyourrepo-app/Masoud/week1/img/favicon.ico new file mode 100644 index 000000000..08da91b2b Binary files /dev/null and b/hackyourrepo-app/Masoud/week1/img/favicon.ico differ diff --git a/hackyourrepo-app/Masoud/week1/img/hyf.png b/hackyourrepo-app/Masoud/week1/img/hyf.png new file mode 100644 index 000000000..e01f87168 Binary files /dev/null and b/hackyourrepo-app/Masoud/week1/img/hyf.png differ diff --git a/hackyourrepo-app/Masoud/week1/index.html b/hackyourrepo-app/Masoud/week1/index.html new file mode 100644 index 000000000..34d6e57b6 --- /dev/null +++ b/hackyourrepo-app/Masoud/week1/index.html @@ -0,0 +1,67 @@ + + + + + + + Hack Your Future + + + + + +

+ +

+ Hack Your Future Repositories: + +

+ +

+ + + + + + + + + + + + + + + + + + + + + +

Repository	SampleRepo1
Description	This repository is meant to be a sample
Forks	5
Updated	2020-05-27 12:00:00

+ +

contributers

+ +

+ + + + + + \ No newline at end of file diff --git a/hackyourrepo-app/Masoud/week1/js/script.js b/hackyourrepo-app/Masoud/week1/js/script.js new file mode 100644 index 000000000..bb31a8bb4 --- /dev/null +++ b/hackyourrepo-app/Masoud/week1/js/script.js @@ -0,0 +1 @@ +console.log('ssadfd'); diff --git a/hackyourrepo-app/hyf.png b/hackyourrepo-app/hyf.png deleted file mode 100755 index 76bc5a13b..000000000 Binary files a/hackyourrepo-app/hyf.png and /dev/null differ diff --git a/package-lock.json b/package-lock.json index 0d74aedda..c908fea1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,6 +83,14 @@ "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz", "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==" }, + "axios": { + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz", + "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -539,6 +547,11 @@ "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz", "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==" }, + "follow-redirects": { + "version": "1.13.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz", + "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==" + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -1332,6 +1345,11 @@ "requires": { "mkdirp": "^0.5.1" } + }, + "xmlhttprequest": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", + "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=" } } } diff --git a/package.json b/package.json index 685329c36..88ed982a9 100755 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ "author": "HackYourFuture", "license": "CC-BY-4.0", "dependencies": { + "axios": "^0.21.0", "eslint": "^6.2.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-config-prettier": "^6.0.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-prettier": "^3.1.0", - "prettier": "^1.19.1" + "prettier": "^1.19.1", + "xmlhttprequest": "^1.8.0" } }