Codestin Search App

From 428ec4dd0276beea439ccd7e66825dbba1dc8697 Mon Sep 17 00:00:00 2001 From: Saif Alamrani Date: Fri, 22 May 2020 17:24:25 +0200 Subject: [PATCH] JS3 Week 3 Project --- Week1/homework/js-exercises/dogPhotoex.js | 59 +++++++++ Week1/homework/js-exercises/index.html | 35 ++++++ .../js-exercises/programmerHumorEx.js | 50 ++++++++ Week1/homework/js-exercises/randomUser.js | 38 ++++++ homework-classes/App.js | 6 +- homework-classes/ContributorsView.js | 14 ++- homework-classes/HeaderView.js | 2 +- homework-classes/RepoView.js | 15 ++- homework-classes/Util.js | 2 +- homework-classes/index.html | 59 +++++---- homework-classes/style.css | 114 +++++++++++++++++- 11 files changed, 353 insertions(+), 41 deletions(-) create mode 100644 Week1/homework/js-exercises/dogPhotoex.js create mode 100644 Week1/homework/js-exercises/index.html create mode 100644 Week1/homework/js-exercises/programmerHumorEx.js create mode 100644 Week1/homework/js-exercises/randomUser.js diff --git a/Week1/homework/js-exercises/dogPhotoex.js b/Week1/homework/js-exercises/dogPhotoex.js new file mode 100644 index 000000000..144f9cd12 --- /dev/null +++ b/Week1/homework/js-exercises/dogPhotoex.js @@ -0,0 +1,59 @@ +"use strict"; + +const buttonWithXhr = document.getElementById('xhr'); +const buttonWithAxios = document.getElementById('axios'); +const ul = document.querySelector('ul'); +ul.style.listStyleType = "none"; + +buttonWithAxios.onclick = getImgWithAxios; +buttonWithXhr.onclick = getImgWithXhr; + +function getImgWithXhr() { + const xhr = new XMLHttpRequest(); + const url = "https://dog.ceo/api/breeds/image/random" + xhr.responseType = "json"; + + xhr.onload = function () { + if (xhr.status >= 200 && xhr.status < 400) { + const li = document.createElement('li'); + li.innerHTML = ` +

+ `; + ul.appendChild(li); + } else { + console.log("Error", xhr.status) + } + } + xhr.onerror = function (error) { + console.log('Network error', error) + } + xhr.open("GET", url); + xhr.send(); +} + +// using AXIOS// +function getImgWithAxios() { + const secondUrl = "https://dog.ceo/api/breeds/image/random"; + + axios.get(secondUrl) + .then(function (response) { + //with success + const li = document.createElement('li'); + li.innerHTML = ` +

+ `; + ul.appendChild(li); + + }) + // in case of error + .catch(function (error) { + console.log(error); + }); +} + +document.getElementById('dogPhotoGallery').addEventListener('click', function () { + ul.innerHTML = ""; + document.getElementById('dogPhotoGallery2').style.display = "block"; + document.getElementById('programmerHumor2').style.display = 'none'; +}); + diff --git a/Week1/homework/js-exercises/index.html b/Week1/homework/js-exercises/index.html new file mode 100644 index 000000000..3a7dac02e --- /dev/null +++ b/Week1/homework/js-exercises/index.html @@ -0,0 +1,35 @@ + + + + + + + Codestin Search App + + + +

+ + +

+ + + + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/js-exercises/programmerHumorEx.js b/Week1/homework/js-exercises/programmerHumorEx.js new file mode 100644 index 000000000..7e4375985 --- /dev/null +++ b/Week1/homework/js-exercises/programmerHumorEx.js @@ -0,0 +1,50 @@ +"use strict"; +function getImgWithXhr() { + const xhr = new XMLHttpRequest(); + const url = "https://xkcd.now.sh/?comic=latest"; + xhr.responseType = "json"; + + xhr.onload = function () { + if (xhr.status >= 200 && xhr.status < 400) { + console.log(xhr.response); + const img = document.getElementById('humorWithXhr'); + img.src = xhr.response.img; + img.alt = xhr.response.alt; + img.title = xhr.response.title; + } else { + console.log("http error", xhr.status); + } + } + xhr.onerror = function (error) { + console.log('NetWork error ; ', error) + } + xhr.open("GET", url); + xhr.send(); +} + +// second function using axios method +function getImgWithAxios() { + const secondUrl = "https://xkcd.now.sh/?comic=latest"; + + axios.get(secondUrl) + + .then(function (response) { + //with success + const img = document.getElementById('humorWithAxios'); + console.log(response.data); + img.src = response.data.img; + img.alt = response.data.alt; + img.title = response.data.title; + }) + .catch(function (error) { + //error handling + console.log(error); + }); +} + +document.getElementById('programmerHumor').addEventListener('click', function () { + document.getElementById('programmerHumor2').style.display = 'block'; + document.getElementById('dogPhotoGallery2').style.display = 'none'; + getImgWithXhr(); + getImgWithAxios(); +}); \ No newline at end of file diff --git a/Week1/homework/js-exercises/randomUser.js b/Week1/homework/js-exercises/randomUser.js new file mode 100644 index 000000000..101bb2f6a --- /dev/null +++ b/Week1/homework/js-exercises/randomUser.js @@ -0,0 +1,38 @@ +" use strict"; + +//first function that make an API Call using XMLHttp Request + +function makeAPIUsingXhr() { + const xhr = new XMLHttpRequest(); + const url = "https://www.randomuser.me/api"; + + xhr.onload = function () { + if (xhr.status >= 200 && xhr.status < 400) { + console.log(JSON.parse(xhr.response)); + } else { + console.log('HTTP ERROR', xhr.status) + } + } + xhr.onerror = function (error) { + console.log('Network Eroor', error) + } + xhr.open("GET", url); + xhr.send(); +} +// second function using Axios + +function makeAPIUsingAxios() { + const secondUrl = "https://www.randomuser.me/api"; + axios.get(secondUrl) + .then(function (response) { + console.log(response); + }) + .catch(function (error) { + console.log(error); + }); +} +window.onload = function () { + this.makeAPIUsingXhr(); + this.makeAPIUsingAxios(); +} + diff --git a/homework-classes/App.js b/homework-classes/App.js index 8788f8b85..43a8fe66e 100755 --- a/homework-classes/App.js +++ b/homework-classes/App.js @@ -39,13 +39,13 @@ const header = createAndAppend('header', root, { class: 'header' }); const error = createAndAppend('div', root); const main = createAndAppend('main', root, { - class: 'main-container', + class: 'mainContainer', }); const repo = createAndAppend('section', main, { - class: 'repo-container whiteframe', + class: 'repoContainer whiteframe', }); const contributors = createAndAppend('section', main, { - class: 'contributors-container whiteframe', + class: 'contributorsContainer whiteframe', }); return { header, error, main, repo, contributors }; } diff --git a/homework-classes/ContributorsView.js b/homework-classes/ContributorsView.js index 58cb2b984..1db965841 100755 --- a/homework-classes/ContributorsView.js +++ b/homework-classes/ContributorsView.js @@ -19,8 +19,18 @@ * @param {Object[]} contributors An array of contributor objects */ render(contributors) { - // TODO: replace this comment and the console.log with your own code - console.log('ContributorsView', contributors); + this.container.innerHTML = ''; + createAndAppend('h2', this.container, { text: 'Contributors', id: 'cont-header' }); + contributors.forEach(repoCont => { + createAndAppend('div', this.container, { + text: + `

${repoCont.login}

${repoCont.contributions}

+ ` , + class: "contributorsDetail" + }); + }) } } diff --git a/homework-classes/HeaderView.js b/homework-classes/HeaderView.js index 11f9c8971..1012b1595 100755 --- a/homework-classes/HeaderView.js +++ b/homework-classes/HeaderView.js @@ -23,7 +23,7 @@ * @param {Object[]} repos An array of repository objects. */ render(repos) { - createAndAppend('div', this.header, { text: this.account.name }); + createAndAppend('h2', this.header, { text: 'HYF Repositories', id: 'hyf-header' }); this.select = createAndAppend('select', this.header, { class: 'repo-select', autofocus: 'autofocus', diff --git a/homework-classes/RepoView.js b/homework-classes/RepoView.js index 073166fea..4d35ca4d6 100755 --- a/homework-classes/RepoView.js +++ b/homework-classes/RepoView.js @@ -19,8 +19,19 @@ * @param {Object} repo A repository object. */ render(repo) { - // TODO: replace this comment and the console.log with your own code - console.log('RepoView', repo); + this.container.innerHTML = ""; + createAndAppend('div', this.container, { + text: + `

Repository :

${repo.name}

Description :

${(repo.description === null) ? 'No description, website, or topics provided.' : repo.description}

Forks :

${repo.forks}

Updated :

${new Date(repo.updated_at).toLocaleString()}

`, + class: "repoDetail" + }); } } diff --git a/homework-classes/Util.js b/homework-classes/Util.js index dc5d79a87..5833ad081 100755 --- a/homework-classes/Util.js +++ b/homework-classes/Util.js @@ -14,7 +14,7 @@ parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { if (key === 'text') { - elem.textContent = value; + elem.innerHTML = value; } else { elem.setAttribute(key, value); } diff --git a/homework-classes/index.html b/homework-classes/index.html index ad75b0d08..d831d77d6 100755 --- a/homework-classes/index.html +++ b/homework-classes/index.html @@ -1,33 +1,30 @@ - - - - - - - - - - Codestin Search App - - - - -

- - - - - - - - - - + + + + + + + + + + + Codestin Search App + + + + + +

+ + + + + + + + + + + \ No newline at end of file diff --git a/homework-classes/style.css b/homework-classes/style.css index 90d106051..fa21a30bd 100755 --- a/homework-classes/style.css +++ b/homework-classes/style.css @@ -1,3 +1,115 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + font-family: "Roboto", Helvetica, sans-serif; + margin: 0 15%; + font-size: 1.3rem; + background:white; +} +#root,#countHeader{ + margin-bottom: 5% ; +} +#root,.contributorsContainer,.repoDetail{ + display: flex; + flex-direction: column; +} +.mainContainer,.contributorsDetail,header{ + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.contributorsContainer,.alert-error,header,.contributorsDetail,select,.repoDetail,#hyf-header{ + padding: 2%; +} + +.mainContainer section{ + flex: 0 50%; + margin: 1%; +} +.contributorsContainer,.repoDetail{ + border-radius: 5px; + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5), 0 3px 3px 0 rgba(0, 0, 0, 0.2); +} +.contributorsDetail{ + justify-content: space-between; + align-items: center; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); + margin-bottom: 1%; +} +.contributorsDetail p{ + margin: 0 2%; +} +#countHeader{ + color: rgb(124, 116, 116); +} +select{ + font-size: 15px; + color: #444; + border: 1px solid #aaa; + border-radius: .5em; + background-color: white; + background-repeat: no-repeat, repeat; + background-position: right .7em top 50%, 0 0; + background-size: .65em auto, 100%; + cursor: pointer; + margin: auto 5%; +} +#contributionCount{ + background-color: rgb(124, 116, 116); + color: rgb(255, 255, 255); + border-radius: 10%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} .alert-error { - color: red; + color: rgb(167, 57, 92); + background-color: rgb(254, 212, 217); + margin: 1%; + height: 200%; + text-align: center; +} +header{ + color: rgb(255, 255, 255); + background-color: rgb(75, 70,185); +} +.repoDetail p:nth-child(odd){ + font-weight: bold; + color: rgb(75, 70,185); +} +.repoDetail p{ + margin: 1% 4%; + padding: 1% 0; + box-shadow: 0 1px rgba(0, 0, 0, 0.2); } + + +@media screen and (max-width:767px){ + body{ + margin: 0; + font-size: 1rem; + } + header,.mainContainer,.repoDetail { + display: flex; + flex-direction: column; + } + section{ + margin: 2%; + } + .repoDetail p{ + padding: 2%; + } + .repoDetail p:nth-child(even){ + margin-bottom: 2%; + color: rgb(255, 255, 255); + background-color: rgba(183, 181, 228, 0.815); + } + select{ + margin: 4% 0; + } +}

with XML http request

with AXIOS