diff --git a/Week1/js-exercises-week1/exercise1/index.html b/Week1/js-exercises-week1/exercise1/index.html new file mode 100644 index 000000000..e1fd57d56 --- /dev/null +++ b/Week1/js-exercises-week1/exercise1/index.html @@ -0,0 +1,14 @@ + + + + Parcel Sandbox + + + + + +
+ + + + diff --git a/Week1/js-exercises-week1/exercise1/script.js b/Week1/js-exercises-week1/exercise1/script.js new file mode 100644 index 000000000..00040d3cf --- /dev/null +++ b/Week1/js-exercises-week1/exercise1/script.js @@ -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 = `

Hello ${name}, you were called using XmlHttpRequest.

`; + } +}; + +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 += `

Hello ${nameAxios}, you were called using Axios.

`; + }) + .catch(function(error) { + //console.log(error); + }); diff --git a/Week1/js-exercises-week1/exercise2 Programming Humour/app.js b/Week1/js-exercises-week1/exercise2 Programming Humour/app.js new file mode 100644 index 000000000..61ac49104 --- /dev/null +++ b/Week1/js-exercises-week1/exercise2 Programming Humour/app.js @@ -0,0 +1,41 @@ +let header = document.createElement('H1'); +header.innerHTML = `In this webpage you will see the latest post from xkcd.com
+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); + }); diff --git a/Week1/js-exercises-week1/exercise2 Programming Humour/index.html b/Week1/js-exercises-week1/exercise2 Programming Humour/index.html new file mode 100644 index 000000000..a7b0f9b90 --- /dev/null +++ b/Week1/js-exercises-week1/exercise2 Programming Humour/index.html @@ -0,0 +1,12 @@ + + + + Parcel Sandbox + + + + + + + + diff --git a/Week1/js-exercises-week1/exercise3 dog photo gallery/app.js b/Week1/js-exercises-week1/exercise3 dog photo gallery/app.js new file mode 100644 index 000000000..53e1e4e4a --- /dev/null +++ b/Week1/js-exercises-week1/exercise3 dog photo gallery/app.js @@ -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(); +}); diff --git a/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html b/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html new file mode 100644 index 000000000..2efa3cbee --- /dev/null +++ b/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html @@ -0,0 +1,19 @@ + + + + Random Dog Photo Gallery + + + + + + + + + + + diff --git a/Week1/test.txt.txt b/Week1/test.txt.txt new file mode 100644 index 000000000..e69de29bb diff --git a/homework/index.html b/homework/index.html index 9c8f80c1a..3ed5c3acd 100755 --- a/homework/index.html +++ b/homework/index.html @@ -1,23 +1,29 @@ + + + + + + + + + + HYF-GITHUB + + + - - - - - - - - - - HYF-GITHUB - - - - - -
- - - - \ No newline at end of file + +
+ +
+ + + diff --git a/homework/index.js b/homework/index.js index 3886cbac9..7d1db8301 100755 --- a/homework/index.js +++ b/homework/index.js @@ -1,5 +1,8 @@ 'use strict'; +let body = document.querySelector('body'); +body.id = 'body'; + { function fetchJSON(url, cb) { const xhr = new XMLHttpRequest(); @@ -16,6 +19,28 @@ xhr.send(); } + function renderContributors(data, contributorsBanner) { + let container = document.createElement('div'); + contributorsBanner.appendChild(container); + data.forEach(contributor => { + let image = document.createElement('img'); + image.setAttribute('href', contributor.avatar_url); + let name = document.createElement('h5'); + name.innerHTML = `${contributor.login}`; + container.appendChild(image); + container.appendChild(name); + }); + } + + function fetchContributors(repo) { + var obj; + fetch(repo.contributors_url) + .then(res => res.json()) + .then(data => (obj = data)) + .then(() => console.log(obj)) + .then(() => renderContributors(obj, contributorsBanner)); + } + function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); @@ -30,11 +55,30 @@ } function renderRepoDetails(repo, ul) { - createAndAppend('li', ul, { text: repo.name }); + createAndAppend('li', ul, { text: ` Repository : ${repo.name}` }); + let a = createAndAppend('a', ul, { text: repo.name }); + a.setAttribute('href', repo.html_url); + a.setAttribute('target', '_blank'); + createAndAppend('p', ul, { text: `Description : ${repo.description}` }); + createAndAppend('p', ul, { text: `Forks : ${repo.forks}` }); + var dateobj = new Date(repo.updated_at); + var updateDate = dateobj.toUTCString(); + createAndAppend('p', ul, { text: `Update at : ${updateDate}` }); } + ///crreating repos banner + let reposBanner = document.createElement('section'); + reposBanner.innerHTML = 'HYF REPOSITORIES'; + reposBanner.className += 'banner'; + ///creating contributors banner + let contributorsBanner = document.createElement('section'); + contributorsBanner.className = ' contributors banner'; + contributorsBanner.innerHTML = 'Contributors'; + + /////////////////////////////////////////////////////////////////////MAIN FUNCTION STARTS HERE//////////////////////////////////////////////////////////////////////////////////////// function main(url) { fetchJSON(url, (err, repos) => { + // "repos" is a referrence to xhr response. all this is part of the predefined callback function const root = document.getElementById('root'); if (err) { createAndAppend('div', root, { @@ -43,8 +87,52 @@ }); return; } + + repos.sort(function(a, b) { + return a.name.toUpperCase() > b.name.toUpperCase() + ? 1 + : b.name.toUpperCase() > a.name.toUpperCase() + ? -1 + : 0; + }); + + let reposIndices = []; + for (let x = 0; x < 10; x++) { + reposIndices.push(repos[x]); + } + + repos = reposIndices; + + document.getElementById('root').appendChild(reposBanner); + document.getElementById('root').appendChild(contributorsBanner); + const ul = createAndAppend('ul', root); - repos.forEach(repo => renderRepoDetails(repo, ul)); + const select = createAndAppend('select', reposBanner); + + let startingRepo = repos[0]; + + renderRepoDetails(startingRepo, ul); + fetchContributors(startingRepo); + + repos.forEach(repo => { + let option = document.createElement('option'); + option.innerHTML = repo.name; + option.value = repo.name; + select.appendChild(option); + + let selectBtn = document.querySelector('select'); + let li = document.querySelector('li'); + let div = document.getElementById('root'); + + selectBtn.addEventListener('change', () => { + if (selectBtn.value == repo.name) { + ul.innerHTML = ' '; + contributorsBanner.innerHTML = ' '; + renderRepoDetails(repo, ul); + fetchContributors(repo); + } + }); + }); }); } diff --git a/homework/style.css b/homework/style.css index 90d106051..5884f1d5c 100755 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,51 @@ .alert-error { color: red; + background-color: pink; + padding: 2vh; +} + +.banner { + background-color: blue; + color: white; + padding: 3%; + display: flex; + justify-content: left; + width: 45%; + font-weight: bold; + font-size: 2vw; +} + +.repos { + float: left; + width: 40%; +} + +.contributors { + float: right; + width: 40%; +} + +ul { + display: flex; + flex-direction: column; + border-width: 2px; + border-style: groove; + padding: 2vw; + width: 45%; +} + +select { + padding: 5px; + width: 10vw; + margin-left: 1.5vw; +} + +li { + font-weight: bolder; + border-style: groove; + list-style-type: none; + display: inline-block; + margin: auto; + padding: 1.5vw; + margin-left: 0; } diff --git a/homework/testJs.js b/homework/testJs.js new file mode 100644 index 000000000..1d24ef523 --- /dev/null +++ b/homework/testJs.js @@ -0,0 +1,3 @@ +function renderContributors(contributors) { + contributor; +}