PROJECT: Hack Your Repo I j3 w1

diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png b/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png new file mode 100644 index 000000000..bd27a0444 Binary files /dev/null and b/Week1/HomeWork/js-exercises/Project j3 w1/HYF.png differ diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/index.html b/Week1/HomeWork/js-exercises/Project j3 w1/index.html new file mode 100644 index 000000000..a21588870 --- /dev/null +++ b/Week1/HomeWork/js-exercises/Project j3 w1/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + PROJECT: Hack Your Repo I j3 w1 + + +

+ + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/index.js b/Week1/HomeWork/js-exercises/Project j3 w1/index.js new file mode 100644 index 000000000..0961f42e9 --- /dev/null +++ b/Week1/HomeWork/js-exercises/Project j3 w1/index.js @@ -0,0 +1,81 @@ +'use strict'; +{ +// window.onload = () => main(HYF_REPOS_URL_ERROR); // to get ERROR +// const HYF_REPOS_URL_ERROR ='https://api.github.com/orgsX/HackYourFuture/repos?per_page=100'; + + window.onload = () => main(HYF_REPOS_URL); + const HYF_REPOS_URL ='https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + const root = document.querySelector('#root'); + + function fetchJSON(url, callback) { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.responseType = 'json'; + xhr.onload = () => { + if (xhr.status >= 200 && xhr.status < 300) { + callback(null, xhr.response); + } else { + callback(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); + } + }; + xhr.onerror = () => callback(new Error('Network request failed')); + xhr.send(); + } + + function main(url) { + createAndAppend('img', root, { src: 'HYF.png' }); + createAndAppend('h3', root, { text: 'HYF Repositories' }); + fetchJSON(url, (error, response) => { + if (error) { + createAndAppend('div', root, { + text: error.message, + class: 'alert-error', + }); + return; + } + const ul = createAndAppend('ul', root); + response.sort((curRepo, nextRepo) => curRepo.name.localeCompare(nextRepo.name)) + // Display the first 10 items + .slice(0, 10) + .forEach(repo => repoDetails(repo, ul)) + }); + } + + function repoDetails(repo, ul) { + const li = createAndAppend('li', ul); + const table = createAndAppend('table', li); + const titles = ['Repository:', 'Description:', 'Forks:', 'Updated:']; + const dataKeys = ['name', 'description', 'forks', 'updated_at']; + + for (let i = 0; i < titles.length; ++i) { + + const tr = createAndAppend('tr', table); + createAndAppend('th', tr, { text: titles[i] }); + if (i > 0 ){ + createAndAppend('td', tr, { text: repo[dataKeys[i]] }); + } else { + const td = createAndAppend('td', tr); + createAndAppend('a', td, { + href: repo.html_url, + text: repo.name, + target: '_blank', + }); + } + } + } + + + function createAndAppend(name, parent, options = {}) { + const el = document.createElement(name); + parent.appendChild(el); + Object.entries(options).forEach(([key, value]) => { + if (key === 'text') { + el.textContent = value; + } else { + el.setAttribute(key, value); + } + }); + return el; + }; + +}; \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/Project j3 w1/style.css b/Week1/HomeWork/js-exercises/Project j3 w1/style.css new file mode 100644 index 000000000..fb8b8baa8 --- /dev/null +++ b/Week1/HomeWork/js-exercises/Project j3 w1/style.css @@ -0,0 +1,57 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +img{ + float: left; + width: 25px; + height: 25px; + border-radius: 0 50% 50% 50%; +} +body { + padding: 25px; +} +h3 { + font-weight: lighter; + background-color: #253dc5; + padding: 35px; + padding-left: 25px; + color: whitesmoke; + +} +table { + width: 100%; + margin-top: 3px; + padding: 20px; + border: 1px solid rgb(240, 240, 240) ; + border-radius: 4px; + box-shadow: 0px 3px 3px rgb(179, 178, 178) ; + color: #333; +} +th { + width: 10%; + padding: 3px; +} +li:nth-child(even) { + background: rgb(224, 224, 224); +} +li { + list-style: none; +} + +.alert-error { + margin-top: 2px; + padding: 20px; + padding-left: 25px; + border-radius: 6px; + color: brown; + background-color: #f0c6ca; +} +@media (max-width: 650px) { + table, header { + width: 100%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-1.html b/Week1/HomeWork/js-exercises/ex-1.html new file mode 100644 index 000000000..e8ed8671d --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-1.html @@ -0,0 +1,14 @@ + + + + + + Make a new friend + + + + + + + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-1.js b/Week1/HomeWork/js-exercises/ex-1.js new file mode 100644 index 000000000..a54721c5a --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-1.js @@ -0,0 +1,42 @@ +'use strict'; + +// inside the same file write two functions: +// one with XMLHttpRequest() + +const button = document.querySelector('#btn'); + +const serverRequest = () => { + const xhr = new XMLHttpRequest(); + + xhr.responseType = 'json'; + + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + console.log(xhr.response); + } else { + console.error(); + } + }; + xhr.open('GET', 'https://www.randomuser.me/api'); + xhr.send(); +}; + +button.addEventListener('click', serverRequest); + +// and the other with : +// axios + +const axiosRequest = () => { + + axios.get('https://www.randomuser.me/api') + + .then(function(response) { + console.log('this apparently was seccesfull',response.data); + }) + .catch(function(error) { + console.log('there are some errors',error); + }) + .finally(function(){ + console.log('let me know what happend') + }) +}; \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-2.html b/Week1/HomeWork/js-exercises/ex-2.html new file mode 100644 index 000000000..25a9c827a --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-2.html @@ -0,0 +1,14 @@ + + + + + + Programmer humor + + + + + + + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-2.js b/Week1/HomeWork/js-exercises/ex-2.js new file mode 100644 index 000000000..89bf3c8a4 --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-2.js @@ -0,0 +1,47 @@ +'use strict'; + +// one with XMLHttpRequest + +const humorRequest = () => { + const xhr = new XMLHttpRequest(); + + const img = document.querySelector('#img'); + + xhr.responseType = 'json'; + + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + console.log(xhr.response); + img.setAttribute('src', xhr.response.img); + } else { + console.error(); + } + }; + xhr.open('GET', 'https://xkcd.now.sh/?comic=614 '); + xhr.send(); + }; + + humorRequest(); + +// and the other with : +// axios + + const requestHumor = () => { + + const img = document.querySelector('#img'); + + axios + .get('https://xkcd.now.sh/?comic=614') + + .then(function(response) { + console.log('this apparently was seccesfull',response); + img.setAttribute('src', response.data.img); + }) + .catch(function(error) { + console.log('there are some errors', error); + }) + .finally(function(){ + console.log('let me know what happend') + }) + }; + requestHumor(); \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-3.html b/Week1/HomeWork/js-exercises/ex-3.html new file mode 100644 index 000000000..915473392 --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-3.html @@ -0,0 +1,18 @@ + + + + + + Dog photo gallery + + + +

+ + + + + + + + \ No newline at end of file diff --git a/Week1/HomeWork/js-exercises/ex-3.js b/Week1/HomeWork/js-exercises/ex-3.js new file mode 100644 index 000000000..92311e3d8 --- /dev/null +++ b/Week1/HomeWork/js-exercises/ex-3.js @@ -0,0 +1,55 @@ + +'use strict'; + +// one with XMLHttpRequest() + +const btnNormal = document.querySelector('#normal'); + +const randomDogNormal = () => { + const xhr = new XMLHttpRequest(); + const ul = document.querySelector('#ulList'); + + xhr.responseType = 'json'; + + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + const li = document.createElement('li'); + const img = document.createElement('img'); + img.setAttribute('src', xhr.response.message); + li.appendChild(img); + ul.appendChild(li); + } else { + console.log(`${xhr.status}`); + } + }; + + xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); + xhr.send(); +}; +btnNormal.addEventListener('click', randomDogNormal); + +// and the other with : +// axios + +const btnAxios = document.querySelector('#axios'); + +const randomDogAxios = () => { + const ul = document.querySelector('#ulList'); + + axios.get('https://dog.ceo/api/breeds/image/random') + + .then(function(response) { + const li = document.createElement('li'); + const img = document.createElement('img'); + img.setAttribute('src', response.data.message); + li.appendChild(img); + ul.appendChild(li); + }) + .catch(function(error) { + console.log('there are some errors', error); + }) + .finally(function(){ + console.log('let me know what happend') + }) +}; +btnAxios.addEventListener('click', randomDogAxios); \ No newline at end of file