From c2cb9b81fe7b5a06f897fc77b0f67060cfb0a458 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Wed, 5 Feb 2020 14:12:37 +0200 Subject: [PATCH 01/23] Create test.txt.txt --- Week1/test.txt.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Week1/test.txt.txt diff --git a/Week1/test.txt.txt b/Week1/test.txt.txt new file mode 100644 index 000000000..e69de29bb From a086173df6254ab4a783cb777f9bc5cc621662fe Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Wed, 5 Feb 2020 14:15:31 +0200 Subject: [PATCH 02/23] Create testReadme.txt --- Week1/js-exercises-week1/testReadme.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Week1/js-exercises-week1/testReadme.txt diff --git a/Week1/js-exercises-week1/testReadme.txt b/Week1/js-exercises-week1/testReadme.txt new file mode 100644 index 000000000..e69de29bb From 91cb85c09098c4476f3051c3317a402e86bfdd9c Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Thu, 6 Feb 2020 13:47:26 +0200 Subject: [PATCH 03/23] Create whoDoWeHaveHere.js --- Week1/js-exercises-week1/whoDoWeHaveHere.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Week1/js-exercises-week1/whoDoWeHaveHere.js diff --git a/Week1/js-exercises-week1/whoDoWeHaveHere.js b/Week1/js-exercises-week1/whoDoWeHaveHere.js new file mode 100644 index 000000000..e69de29bb From 42f644bb355c556f0b656616846f2c03eb0bbdfb Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Thu, 6 Feb 2020 14:27:59 +0200 Subject: [PATCH 04/23] exercise1 finished --- Week1/js-exercises-week1/exercise1/index.html | 14 ++++++++ Week1/js-exercises-week1/exercise1/script.js | 36 +++++++++++++++++++ Week1/js-exercises-week1/testReadme.txt | 0 Week1/js-exercises-week1/whoDoWeHaveHere.js | 0 4 files changed, 50 insertions(+) create mode 100644 Week1/js-exercises-week1/exercise1/index.html create mode 100644 Week1/js-exercises-week1/exercise1/script.js delete mode 100644 Week1/js-exercises-week1/testReadme.txt delete mode 100644 Week1/js-exercises-week1/whoDoWeHaveHere.js 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 @@ + + + + Codestin Search App + + + + + +

+ + + + diff --git a/Week1/js-exercises-week1/exercise1/script.js b/Week1/js-exercises-week1/exercise1/script.js new file mode 100644 index 000000000..948dcfc59 --- /dev/null +++ b/Week1/js-exercises-week1/exercise1/script.js @@ -0,0 +1,36 @@ +//function using XMLHttp Request + +let xhrObject = new XMLHttpRequest(); +//console.log(xhrObject); +// +xhrObject.addEventListener("error", xhrObjectErrorHandler); + +function xhrObjectErrorHandler(event) { + console.log("Error"); +} +xhrObject.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + // Typical action to be performed when the document is ready: <=== ιI leave as it is for better explanation + + let xhrObjectJason = JSON.parse(xhrObject.responseText); + //console.log(xhrObjectJason); + + 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/testReadme.txt b/Week1/js-exercises-week1/testReadme.txt deleted file mode 100644 index e69de29bb..000000000 diff --git a/Week1/js-exercises-week1/whoDoWeHaveHere.js b/Week1/js-exercises-week1/whoDoWeHaveHere.js deleted file mode 100644 index e69de29bb..000000000 From dc3f122f9503f9eb3b0e83c62092065348db30ec Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sat, 8 Feb 2020 17:46:27 +0200 Subject: [PATCH 05/23] programming humour added --- Week1/js-exercises-week1/exercise1/script.js | 15 ++++--- .../exercise2 Programming Humour/app.js | 41 +++++++++++++++++++ .../exercise2 Programming Humour/index.html | 12 ++++++ 3 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 Week1/js-exercises-week1/exercise2 Programming Humour/app.js create mode 100644 Week1/js-exercises-week1/exercise2 Programming Humour/index.html diff --git a/Week1/js-exercises-week1/exercise1/script.js b/Week1/js-exercises-week1/exercise1/script.js index 948dcfc59..00040d3cf 100644 --- a/Week1/js-exercises-week1/exercise1/script.js +++ b/Week1/js-exercises-week1/exercise1/script.js @@ -1,32 +1,31 @@ //function using XMLHttp Request let xhrObject = new XMLHttpRequest(); -//console.log(xhrObject); -// -xhrObject.addEventListener("error", xhrObjectErrorHandler); + +xhrObject.addEventListener('error', xhrObjectErrorHandler); function xhrObjectErrorHandler(event) { - console.log("Error"); + console.log('Error'); } xhrObject.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { - // Typical action to be performed when the document is ready: <=== ιI leave as it is for better explanation + let xhrObjectJason = JSON.parse(xhrObject.responseText); - //console.log(xhrObjectJason); + 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.open('GET', 'https://www.randomuser.me/api'); xhrObject.send(); //function using axios axios - .get("https://www.randomuser.me/api") + .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.

`; 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 @@ + + + + Codestin Search App + + + + + + + + From 727f9ccf1a4268afa76eb01900ddaf8eeaa14bd3 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 10 Feb 2020 20:24:38 +0200 Subject: [PATCH 06/23] exercise 3 --- .../exercise3 dog photo gallery/app.js | 58 +++++++++++++++++++ .../exercise3 dog photo gallery/index.html | 19 ++++++ 2 files changed, 77 insertions(+) create mode 100644 Week1/js-exercises-week1/exercise3 dog photo gallery/app.js create mode 100644 Week1/js-exercises-week1/exercise3 dog photo gallery/index.html 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..644bf04ac --- /dev/null +++ b/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html @@ -0,0 +1,19 @@ + + + + Codestin Search App + + + + + + + + + + + From 8f5e9555772a2ff1b783b59a2f8cc66933c7bd1d Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 10 Feb 2020 20:26:03 +0200 Subject: [PATCH 07/23] Update index.html --- Week1/js-exercises-week1/exercise3 dog photo gallery/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html b/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html index 644bf04ac..2efa3cbee 100644 --- a/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html +++ b/Week1/js-exercises-week1/exercise3 dog photo gallery/index.html @@ -1,7 +1,7 @@ - Codestin Search App + Codestin Search App From 06906b836d70a494ee4039c4677ad4865e831623 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Wed, 12 Feb 2020 10:10:37 +0200 Subject: [PATCH 08/23] first comment work --- homework/index.html | 46 +++++++++++++++++++++++++-------------------- homework/index.js | 2 ++ 2 files changed, 28 insertions(+), 20 deletions(-) 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 @@ + + + + + + + + + + Codestin Search App + + + - - - - - - - - - - Codestin Search App - - - - - -

- - - - \ No newline at end of file + +

+ +

+ + + diff --git a/homework/index.js b/homework/index.js index 3886cbac9..f72e54226 100755 --- a/homework/index.js +++ b/homework/index.js @@ -16,10 +16,12 @@ xhr.send(); } + //the options = {} means that it is an object. function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { + //gia kathe object entry tou object, diladi gia kathe zeygari opws [[name:nikos], [age:25], [key:value]] if (key === 'text') { elem.textContent = value; } else { From da96f3d6f8518127d78782c885c2ef47d51c4717 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 03:36:51 +0200 Subject: [PATCH 09/23] little update on week1 of project --- homework/index.js | 26 +++++++++++++++++++++++++- homework/style.css | 6 ++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/homework/index.js b/homework/index.js index f72e54226..f00b27282 100755 --- a/homework/index.js +++ b/homework/index.js @@ -7,7 +7,7 @@ xhr.responseType = 'json'; xhr.onload = () => { if (xhr.status >= 200 && xhr.status <= 299) { - cb(null, xhr.response); + cb(null, xhr.response); // if everything works well here is supposed to return the response in a JSON format } else { cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); } @@ -35,8 +35,17 @@ createAndAppend('li', ul, { text: repo.name }); } + //from now on the function calls are starting--------------------------------------------------------------------------------------- + + let reposBanner = document.createElement('H1'); + reposBanner.innerHTML = 'HYF REPOSITORIES'; + document.getElementById('root').appendChild(reposBanner); + reposBanner.className += 'banner'; + function main(url) { fetchJSON(url, (err, repos) => { + //to repos anaferetai sto xhr.response + //olo ayto einai meros ths cb(callback function) const root = document.getElementById('root'); if (err) { createAndAppend('div', root, { @@ -46,7 +55,22 @@ return; } const ul = createAndAppend('ul', root); + repos.forEach(repo => renderRepoDetails(repo, ul)); + + repos.sort(function(a, b) { + return a['name'].toUpperCase() > b['name'].toUpperCase() + ? 1 + : b['name'].toUpperCase() > a['name'].toUpperCase() + ? -1 + : 0; + }); + for (let i = 0; i < 10; i++) { + console.log(`Name : ${repos[i]['name']}`); + console.log(`Description : ${repos[i]['description']}`); + console.log(`Forks : ${repos[i]['forks']}`); + console.log(`Updated at : ${repos[i]['updated_at']}`); + } }); } diff --git a/homework/style.css b/homework/style.css index 90d106051..a6abe8edc 100755 --- a/homework/style.css +++ b/homework/style.css @@ -1,3 +1,9 @@ .alert-error { color: red; } + +.banner { + background-color: blue; + color: white; + padding: 3%; +} From 95da06438ec85ca8956f5d7950f73e9ce0a062dc Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 12:00:28 +0200 Subject: [PATCH 10/23] Update index.js --- homework/index.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/homework/index.js b/homework/index.js index f00b27282..6b27863f1 100755 --- a/homework/index.js +++ b/homework/index.js @@ -33,6 +33,9 @@ function renderRepoDetails(repo, ul) { createAndAppend('li', ul, { text: repo.name }); + createAndAppend('li', ul, { text: repo.description }); + createAndAppend('li', ul, { text: repo.forks }); + createAndAppend('li', ul, { text: repo.updated_at }); } //from now on the function calls are starting--------------------------------------------------------------------------------------- @@ -53,11 +56,11 @@ class: 'alert-error', }); return; + + //continue from here-----------------------------------------------------!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } const ul = createAndAppend('ul', root); - repos.forEach(repo => renderRepoDetails(repo, ul)); - repos.sort(function(a, b) { return a['name'].toUpperCase() > b['name'].toUpperCase() ? 1 @@ -65,12 +68,19 @@ ? -1 : 0; }); - for (let i = 0; i < 10; i++) { - console.log(`Name : ${repos[i]['name']}`); - console.log(`Description : ${repos[i]['description']}`); - console.log(`Forks : ${repos[i]['forks']}`); - console.log(`Updated at : ${repos[i]['updated_at']}`); + + let reposIndices = []; + for (let x = 0; x < 10; x++) { + reposIndices.push(repos[x]); } + + repos = reposIndices; + console.log(repos); + + //console.log(repos); + + repos.forEach(repo => renderRepoDetails(repo, ul)); + //console.log(`thse are the repos ${repos}`); }); } From 2768963de17dd1077aea6094fb5f63933efbdd04 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 12:23:40 +0200 Subject: [PATCH 11/23] Update index.js --- homework/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/homework/index.js b/homework/index.js index 6b27863f1..77da1bde4 100755 --- a/homework/index.js +++ b/homework/index.js @@ -33,9 +33,9 @@ function renderRepoDetails(repo, ul) { createAndAppend('li', ul, { text: repo.name }); - createAndAppend('li', ul, { text: repo.description }); - createAndAppend('li', ul, { text: repo.forks }); - createAndAppend('li', ul, { text: repo.updated_at }); + createAndAppend('p', ul, { text: repo.description }); + createAndAppend('p', ul, { text: repo.forks }); + createAndAppend('p', ul, { text: repo.updated_at }); } //from now on the function calls are starting--------------------------------------------------------------------------------------- From 2c606d339cfedaefdb4d45ec09f3471eeb097ffb Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 12:29:19 +0200 Subject: [PATCH 12/23] Update index.js --- homework/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/homework/index.js b/homework/index.js index 77da1bde4..2d00d7874 100755 --- a/homework/index.js +++ b/homework/index.js @@ -56,8 +56,6 @@ class: 'alert-error', }); return; - - //continue from here-----------------------------------------------------!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! } const ul = createAndAppend('ul', root); @@ -77,10 +75,7 @@ repos = reposIndices; console.log(repos); - //console.log(repos); - repos.forEach(repo => renderRepoDetails(repo, ul)); - //console.log(`thse are the repos ${repos}`); }); } From 0db052ff4521dbb40dd7435ca47d2dddcaceec0a Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 12:29:41 +0200 Subject: [PATCH 13/23] Update index.js --- homework/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/index.js b/homework/index.js index 2d00d7874..2ccadc982 100755 --- a/homework/index.js +++ b/homework/index.js @@ -7,7 +7,7 @@ xhr.responseType = 'json'; xhr.onload = () => { if (xhr.status >= 200 && xhr.status <= 299) { - cb(null, xhr.response); // if everything works well here is supposed to return the response in a JSON format + cb(null, xhr.response); } else { cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); } From 81da1d6d7993260b79ea20fea5c31f195e9f0029 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 12:31:55 +0200 Subject: [PATCH 14/23] Update index.js --- homework/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework/index.js b/homework/index.js index 2ccadc982..957553936 100755 --- a/homework/index.js +++ b/homework/index.js @@ -17,7 +17,7 @@ } //the options = {} means that it is an object. - function createAndAppend(name, parent, options = {}) { + function createAndAppend(name, descriptionTag, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { From 1ce003674d97e6658c6321f0819247d17b83cc07 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 16 Feb 2020 13:58:23 +0200 Subject: [PATCH 15/23] update --- homework/index.js | 10 +++++----- homework/style.css | 5 +++++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/homework/index.js b/homework/index.js index 957553936..cdbf885a5 100755 --- a/homework/index.js +++ b/homework/index.js @@ -17,7 +17,7 @@ } //the options = {} means that it is an object. - function createAndAppend(name, descriptionTag, parent, options = {}) { + function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { @@ -32,10 +32,10 @@ } function renderRepoDetails(repo, ul) { - createAndAppend('li', ul, { text: repo.name }); - createAndAppend('p', ul, { text: repo.description }); - createAndAppend('p', ul, { text: repo.forks }); - createAndAppend('p', ul, { text: repo.updated_at }); + createAndAppend('li', ul, { text: ` Repository : ${repo.name}` }); + createAndAppend('p', ul, { text: `Description : ${repo.description}` }); + createAndAppend('p', ul, { text: `Forks : ${repo.forks}` }); + createAndAppend('p', ul, { text: `Update at : ${repo.updated_at}` }); } //from now on the function calls are starting--------------------------------------------------------------------------------------- diff --git a/homework/style.css b/homework/style.css index a6abe8edc..b31ada9b1 100755 --- a/homework/style.css +++ b/homework/style.css @@ -7,3 +7,8 @@ color: white; padding: 3%; } + +li { + color: red; + font-weight: bolder; +} From 0c3527f569f439b3474f0d880b71197862edb331 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 17 Feb 2020 10:49:10 +0200 Subject: [PATCH 16/23] week one part of project finished --- homework/index.js | 3 +++ homework/style.css | 14 +++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/homework/index.js b/homework/index.js index cdbf885a5..b74d58be2 100755 --- a/homework/index.js +++ b/homework/index.js @@ -33,6 +33,9 @@ function renderRepoDetails(repo, ul) { 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}` }); createAndAppend('p', ul, { text: `Update at : ${repo.updated_at}` }); diff --git a/homework/style.css b/homework/style.css index b31ada9b1..ba26ab8e6 100755 --- a/homework/style.css +++ b/homework/style.css @@ -1,5 +1,7 @@ .alert-error { color: red; + background-color: pink; + padding: 2vh; } .banner { @@ -8,7 +10,17 @@ padding: 3%; } +ul { + display: flex; + flex-direction: column; +} + li { - color: red; font-weight: bolder; + border-style: groove; + list-style-type: none; + display: inline-block; + margin: auto; + padding: 1.5vw; + margin-left: 0; } From c918bbad2a1d55d1c46386c7db1edf6dabb6c3cf Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 17 Feb 2020 10:50:08 +0200 Subject: [PATCH 17/23] Update index.js --- homework/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/homework/index.js b/homework/index.js index b74d58be2..5636060e1 100755 --- a/homework/index.js +++ b/homework/index.js @@ -16,12 +16,10 @@ xhr.send(); } - //the options = {} means that it is an object. function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { - //gia kathe object entry tou object, diladi gia kathe zeygari opws [[name:nikos], [age:25], [key:value]] if (key === 'text') { elem.textContent = value; } else { @@ -41,8 +39,6 @@ createAndAppend('p', ul, { text: `Update at : ${repo.updated_at}` }); } - //from now on the function calls are starting--------------------------------------------------------------------------------------- - let reposBanner = document.createElement('H1'); reposBanner.innerHTML = 'HYF REPOSITORIES'; document.getElementById('root').appendChild(reposBanner); From 0cd011b299cc07bd590882e05fed69fe6e619e6b Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 17 Feb 2020 19:43:11 +0200 Subject: [PATCH 18/23] i love commiting --- homework/index.js | 20 ++++++++++++++------ homework/testJs.js | 8 ++++++++ 2 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 homework/testJs.js diff --git a/homework/index.js b/homework/index.js index 5636060e1..af37ee3be 100755 --- a/homework/index.js +++ b/homework/index.js @@ -36,7 +36,10 @@ a.setAttribute('target', '_blank'); createAndAppend('p', ul, { text: `Description : ${repo.description}` }); createAndAppend('p', ul, { text: `Forks : ${repo.forks}` }); - createAndAppend('p', ul, { text: `Update at : ${repo.updated_at}` }); + var dateobj = new Date(repo.updated_at); + var updateDate = dateobj.toUTCString(); + + createAndAppend('p', ul, { text: `Update at : ${updateDate}` }); } let reposBanner = document.createElement('H1'); @@ -46,8 +49,7 @@ function main(url) { fetchJSON(url, (err, repos) => { - //to repos anaferetai sto xhr.response - //olo ayto einai meros ths cb(callback function) + // "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, { @@ -57,11 +59,10 @@ return; } const ul = createAndAppend('ul', root); - repos.sort(function(a, b) { - return a['name'].toUpperCase() > b['name'].toUpperCase() + return a.name.toUpperCase() > b.name.toUpperCase() ? 1 - : b['name'].toUpperCase() > a['name'].toUpperCase() + : b.name.toUpperCase() > a.name.toUpperCase() ? -1 : 0; }); @@ -74,6 +75,13 @@ repos = reposIndices; console.log(repos); + const select = createAndAppend('select', ul); + + repos.forEach(repo => { + select.innerHTML += ``; + console.log(repo); + }); + repos.forEach(repo => renderRepoDetails(repo, ul)); }); } diff --git a/homework/testJs.js b/homework/testJs.js new file mode 100644 index 000000000..8a633f268 --- /dev/null +++ b/homework/testJs.js @@ -0,0 +1,8 @@ +// me ayto prosthetei ta repos san option sto select element + +const select = createAndAppend('select', ul); + +repos.forEach(repo => { + select.innerHTML += ``; + console.log(repo); +}); From b33bffa216509a9bfb28a04401d7f3518c52cba7 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 17 Feb 2020 21:27:23 +0200 Subject: [PATCH 19/23] update --- homework/index.js | 18 ++++++++++++++---- homework/testJs.js | 5 ++++- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/homework/index.js b/homework/index.js index af37ee3be..e4e90a9e6 100755 --- a/homework/index.js +++ b/homework/index.js @@ -78,11 +78,21 @@ const select = createAndAppend('select', ul); repos.forEach(repo => { - select.innerHTML += ``; - console.log(repo); - }); + let option = document.createElement('option'); + option.innerHTML = repo.name; + option.value = repo.name; + select.appendChild(option); + + const selectElement = document.querySelector('select'); - repos.forEach(repo => renderRepoDetails(repo, ul)); + selectElement.addEventListener('change', event => { + const result = option; + if (repo.name == event.target.value) { + console.log(repo); + renderRepoDetails(repo, ul); + } + }); + }); }); } diff --git a/homework/testJs.js b/homework/testJs.js index 8a633f268..02084970d 100644 --- a/homework/testJs.js +++ b/homework/testJs.js @@ -3,6 +3,9 @@ const select = createAndAppend('select', ul); repos.forEach(repo => { - select.innerHTML += ``; + let option = document.createElement('option'); + option = repo.name; + option.value = repo.name; + select.appendChild(option); console.log(repo); }); From 8fd4613f63483abd73cfb28f90bfa77339accd72 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Tue, 18 Feb 2020 14:52:39 +0200 Subject: [PATCH 20/23] up to date --- homework/index.js | 9 +++------ homework/style.css | 4 ++++ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/homework/index.js b/homework/index.js index e4e90a9e6..3c88af0ec 100755 --- a/homework/index.js +++ b/homework/index.js @@ -83,12 +83,9 @@ option.value = repo.name; select.appendChild(option); - const selectElement = document.querySelector('select'); - - selectElement.addEventListener('change', event => { - const result = option; - if (repo.name == event.target.value) { - console.log(repo); + let selectBtn = document.querySelector('select'); + selectBtn.addEventListener('change', () => { + if (selectBtn.value == repo.name) { renderRepoDetails(repo, ul); } }); diff --git a/homework/style.css b/homework/style.css index ba26ab8e6..b57a15506 100755 --- a/homework/style.css +++ b/homework/style.css @@ -15,6 +15,10 @@ ul { flex-direction: column; } +select { + padding: 5px; +} + li { font-weight: bolder; border-style: groove; From 07f25bc5ffb93d0b870111a1b1795819de89d760 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Sun, 23 Feb 2020 14:17:29 +0200 Subject: [PATCH 21/23] trying to implement repo replacing(progress from week 2) --- homework/index.js | 24 +++++++++++++++--------- homework/style.css | 17 +++++++++++++++++ homework/testJs.js | 14 +++++--------- 3 files changed, 37 insertions(+), 18 deletions(-) diff --git a/homework/index.js b/homework/index.js index 3c88af0ec..4334d7abc 100755 --- a/homework/index.js +++ b/homework/index.js @@ -38,15 +38,10 @@ 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}` }); } - let reposBanner = document.createElement('H1'); - reposBanner.innerHTML = 'HYF REPOSITORIES'; - document.getElementById('root').appendChild(reposBanner); - reposBanner.className += 'banner'; - + /////////////////////////////////////////////////////////////////////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 @@ -58,7 +53,7 @@ }); return; } - const ul = createAndAppend('ul', root); + repos.sort(function(a, b) { return a.name.toUpperCase() > b.name.toUpperCase() ? 1 @@ -75,7 +70,18 @@ repos = reposIndices; console.log(repos); - const select = createAndAppend('select', ul); + let reposBanner = document.createElement('H1'); + reposBanner.innerHTML = 'HYF REPOSITORIES'; + reposBanner.className += 'banner'; + + document.getElementById('root').appendChild(reposBanner); + + const ul = createAndAppend('ul', root); + const select = createAndAppend('select', reposBanner); + + let startingRepo = repos[0]; + + renderRepoDetails(startingRepo, ul); repos.forEach(repo => { let option = document.createElement('option'); @@ -86,7 +92,7 @@ let selectBtn = document.querySelector('select'); selectBtn.addEventListener('change', () => { if (selectBtn.value == repo.name) { - renderRepoDetails(repo, ul); + ul.replaceChild(repo, startingRepo); } }); }); diff --git a/homework/style.css b/homework/style.css index b57a15506..f6bbee8ef 100755 --- a/homework/style.css +++ b/homework/style.css @@ -8,15 +8,32 @@ background-color: blue; color: white; padding: 3%; + display: flex; + justify-content: left; + width: 45%; +} + +.repos { + float: left; +} + +.contributors { + float: right; } 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 { diff --git a/homework/testJs.js b/homework/testJs.js index 02084970d..784580c00 100644 --- a/homework/testJs.js +++ b/homework/testJs.js @@ -1,11 +1,7 @@ -// me ayto prosthetei ta repos san option sto select element -const select = createAndAppend('select', ul); -repos.forEach(repo => { - let option = document.createElement('option'); - option = repo.name; - option.value = repo.name; - select.appendChild(option); - console.log(repo); -}); + let selectBtn = document.querySelector('select'); + selectBtn.addEventListener('change', () => { + if (selectBtn.value == repo.name) { + ul.replaceChild(repo, startingRepo); + } \ No newline at end of file From c448476afb96faf64eb24a6d1cf2f3f9f81e11e2 Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Mon, 24 Feb 2020 17:11:16 +0200 Subject: [PATCH 22/23] added repo List, making of contributors list --- homework/index.js | 44 ++++++++++++++++++++++++++++++++++++++++---- homework/style.css | 4 ++++ homework/testJs.js | 10 +++------- 3 files changed, 47 insertions(+), 11 deletions(-) diff --git a/homework/index.js b/homework/index.js index 4334d7abc..d5fd3b17d 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,16 @@ xhr.send(); } + function fetchContributors(repo) { + fetch(repo.contributors_url) + .then(response => { + return response.json(); + }) + .then(contributors => { + console.log(contributors); + }); + } + function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); parent.appendChild(elem); @@ -41,6 +54,19 @@ createAndAppend('p', ul, { text: `Update at : ${updateDate}` }); } + function renderContributors(contributors, contributorsBanner) { + contributors.forEach(contributor => { + let contLi = createAndAppend('li', contributorsBanner); + let contImage = createAndAppend('img', contributorsBanner); + contImage.setAttribute('href', contributor.avatar_url); + + let contName = createAndAppend('p', contLi); + contName.innerHTML = contributor.login; + contLi.appendChild(contImage); + contImage.appendChild(contName); + }); + } + /////////////////////////////////////////////////////////////////////MAIN FUNCTION STARTS HERE//////////////////////////////////////////////////////////////////////////////////////// function main(url) { fetchJSON(url, (err, repos) => { @@ -68,13 +94,17 @@ } repos = reposIndices; - console.log(repos); - - let reposBanner = document.createElement('H1'); + ///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'; document.getElementById('root').appendChild(reposBanner); + document.getElementById('root').appendChild(contributorsBanner); const ul = createAndAppend('ul', root); const select = createAndAppend('select', reposBanner); @@ -82,6 +112,7 @@ let startingRepo = repos[0]; renderRepoDetails(startingRepo, ul); + fetchContributors(startingRepo); repos.forEach(repo => { let option = document.createElement('option'); @@ -90,9 +121,14 @@ 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.replaceChild(repo, startingRepo); + ul.innerHTML = ' '; + renderRepoDetails(repo, ul); + fetchContributors(repo); } }); }); diff --git a/homework/style.css b/homework/style.css index f6bbee8ef..5884f1d5c 100755 --- a/homework/style.css +++ b/homework/style.css @@ -11,14 +11,18 @@ display: flex; justify-content: left; width: 45%; + font-weight: bold; + font-size: 2vw; } .repos { float: left; + width: 40%; } .contributors { float: right; + width: 40%; } ul { diff --git a/homework/testJs.js b/homework/testJs.js index 784580c00..6ba46022d 100644 --- a/homework/testJs.js +++ b/homework/testJs.js @@ -1,7 +1,3 @@ - - - let selectBtn = document.querySelector('select'); - selectBtn.addEventListener('change', () => { - if (selectBtn.value == repo.name) { - ul.replaceChild(repo, startingRepo); - } \ No newline at end of file +function renderContributors(repo) { + fetchContributors(repo); +} From 2b955156e06a89a7205feb54cda5ae151e76db3c Mon Sep 17 00:00:00 2001 From: Nikos Spiropoulos Date: Tue, 25 Feb 2020 14:48:37 +0200 Subject: [PATCH 23/23] added some eye-hurting functionality for contributors banner --- homework/index.js | 53 +++++++++++++++++++++++----------------------- homework/testJs.js | 4 ++-- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/homework/index.js b/homework/index.js index d5fd3b17d..7d1db8301 100755 --- a/homework/index.js +++ b/homework/index.js @@ -19,14 +19,26 @@ body.id = 'body'; 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(response => { - return response.json(); - }) - .then(contributors => { - console.log(contributors); - }); + .then(res => res.json()) + .then(data => (obj = data)) + .then(() => console.log(obj)) + .then(() => renderContributors(obj, contributorsBanner)); } function createAndAppend(name, parent, options = {}) { @@ -54,18 +66,14 @@ body.id = 'body'; createAndAppend('p', ul, { text: `Update at : ${updateDate}` }); } - function renderContributors(contributors, contributorsBanner) { - contributors.forEach(contributor => { - let contLi = createAndAppend('li', contributorsBanner); - let contImage = createAndAppend('img', contributorsBanner); - contImage.setAttribute('href', contributor.avatar_url); - - let contName = createAndAppend('p', contLi); - contName.innerHTML = contributor.login; - contLi.appendChild(contImage); - contImage.appendChild(contName); - }); - } + ///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) { @@ -94,14 +102,6 @@ body.id = 'body'; } repos = reposIndices; - ///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'; document.getElementById('root').appendChild(reposBanner); document.getElementById('root').appendChild(contributorsBanner); @@ -127,6 +127,7 @@ body.id = 'body'; selectBtn.addEventListener('change', () => { if (selectBtn.value == repo.name) { ul.innerHTML = ' '; + contributorsBanner.innerHTML = ' '; renderRepoDetails(repo, ul); fetchContributors(repo); } diff --git a/homework/testJs.js b/homework/testJs.js index 6ba46022d..1d24ef523 100644 --- a/homework/testJs.js +++ b/homework/testJs.js @@ -1,3 +1,3 @@ -function renderContributors(repo) { - fetchContributors(repo); +function renderContributors(contributors) { + contributor; }