From ea302dcf74a7b5bf7ca1cafecd30d3d81be901a2 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Thu, 31 Dec 2020 15:41:16 +0330 Subject: [PATCH 1/9] wierd commit! --- .../homework/js-exercises/dogGallery.js | 0 .../homework/js-exercises/getandomUser.js | 0 .../homework/js-exercises/humor.js | 0 .../homework/js-exercises/index.html | 0 .../homework/js-exercises/doubleDigit.js | 11 ++ .../homework/js-exercises/johnWho.js | 25 +++-- .../pokemon-app/.vscode/settings.json | 3 + .../homework/pokemon-app/index.html | 15 +++ .../homework/pokemon-app/script.js | 49 +++++++++ hackyourrepo-app/hyf.png | Bin 9116 -> 0 bytes hackyourrepo-app/index.html | 87 ---------------- hackyourrepo-app/script.js | 26 ----- hackyourrepo-app/style.css | 96 ------------------ 13 files changed, 93 insertions(+), 219 deletions(-) rename Week1/{ => AmirHossein}/homework/js-exercises/dogGallery.js (100%) rename Week1/{ => AmirHossein}/homework/js-exercises/getandomUser.js (100%) rename Week1/{ => AmirHossein}/homework/js-exercises/humor.js (100%) rename Week1/{ => AmirHossein}/homework/js-exercises/index.html (100%) create mode 100644 Week2/AmirHossein/homework/js-exercises/doubleDigit.js create mode 100644 Week2/AmirHossein/homework/pokemon-app/.vscode/settings.json create mode 100644 Week2/AmirHossein/homework/pokemon-app/index.html create mode 100644 Week2/AmirHossein/homework/pokemon-app/script.js delete mode 100755 hackyourrepo-app/hyf.png delete mode 100755 hackyourrepo-app/index.html delete mode 100755 hackyourrepo-app/script.js delete mode 100755 hackyourrepo-app/style.css diff --git a/Week1/homework/js-exercises/dogGallery.js b/Week1/AmirHossein/homework/js-exercises/dogGallery.js similarity index 100% rename from Week1/homework/js-exercises/dogGallery.js rename to Week1/AmirHossein/homework/js-exercises/dogGallery.js diff --git a/Week1/homework/js-exercises/getandomUser.js b/Week1/AmirHossein/homework/js-exercises/getandomUser.js similarity index 100% rename from Week1/homework/js-exercises/getandomUser.js rename to Week1/AmirHossein/homework/js-exercises/getandomUser.js diff --git a/Week1/homework/js-exercises/humor.js b/Week1/AmirHossein/homework/js-exercises/humor.js similarity index 100% rename from Week1/homework/js-exercises/humor.js rename to Week1/AmirHossein/homework/js-exercises/humor.js diff --git a/Week1/homework/js-exercises/index.html b/Week1/AmirHossein/homework/js-exercises/index.html similarity index 100% rename from Week1/homework/js-exercises/index.html rename to Week1/AmirHossein/homework/js-exercises/index.html diff --git a/Week2/AmirHossein/homework/js-exercises/doubleDigit.js b/Week2/AmirHossein/homework/js-exercises/doubleDigit.js new file mode 100644 index 000000000..2a975f4f2 --- /dev/null +++ b/Week2/AmirHossein/homework/js-exercises/doubleDigit.js @@ -0,0 +1,11 @@ +function checkDoubleDigits(number) { + return new Promise((resolve, reject) => { + if(number > 10) { + resolve('The number is bigger than 10!'); + } else { + reject('Error! The number is smaller than 10'); + }; + }); + +} +checkDoubleDigits(30).then(response => console.log(response)); \ No newline at end of file diff --git a/Week2/AmirHossein/homework/js-exercises/johnWho.js b/Week2/AmirHossein/homework/js-exercises/johnWho.js index a99b02cf4..90d5ca82a 100644 --- a/Week2/AmirHossein/homework/js-exercises/johnWho.js +++ b/Week2/AmirHossein/homework/js-exercises/johnWho.js @@ -1,16 +1,21 @@ const getAnonName = (firstName) => { return new Promise((resolve, reject) => { - const fullName = `${firstName} Doe` - resolve(fullName) - console.log(fullName) - - - - reject(new Error("You didn't pass in a first name!")) + const fullName = `${firstName} Doe`; + if(firstName) { + resolve(fullName); + } else { + reject(new Error("You didn't pass in a first name!")); + } + }); +}; + getAnonName('Masood') + .then(response => { + console.log(response) + }) + .catch(error => { + console.log(error) + }) - }) -}; -getAnonName() \ No newline at end of file diff --git a/Week2/AmirHossein/homework/pokemon-app/.vscode/settings.json b/Week2/AmirHossein/homework/pokemon-app/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/Week2/AmirHossein/homework/pokemon-app/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week2/AmirHossein/homework/pokemon-app/index.html b/Week2/AmirHossein/homework/pokemon-app/index.html new file mode 100644 index 000000000..b4614f847 --- /dev/null +++ b/Week2/AmirHossein/homework/pokemon-app/index.html @@ -0,0 +1,15 @@ + + + + + + Codestin Search App + + + + + + + \ No newline at end of file diff --git a/Week2/AmirHossein/homework/pokemon-app/script.js b/Week2/AmirHossein/homework/pokemon-app/script.js new file mode 100644 index 000000000..fc5382c91 --- /dev/null +++ b/Week2/AmirHossein/homework/pokemon-app/script.js @@ -0,0 +1,49 @@ +window.onload = main; +function main() { + const url = 'https://pokeapi.co/api/v2/pokemon/?limit=20&offset=20' + const btn = document.createElement('button'); + btn.innerHTML = 'Get Pokemon!' + document.body.appendChild(btn); + const select = document.createElement('select'); + document.body.appendChild(select); + btn.addEventListener('click', () => [ + fetchData(url, select) + ]); +} + +function addPokemonToDOM(data, select) { + data.results.forEach(element => { + const option = document.createElement('option'); + option.innerHTML = element.name; + option.value = element.name; + select.appendChild(option); + + }); + let image = document.createElement('img'); + select.addEventListener('input', () => { + data.results.forEach(element => { + if(select.value == element.name) { + const pokUrl = element.url; + image.src = '' + fetch(pokUrl) + .then(response => response.json()) + .then(data => { + image.src = data.sprites.front_default; + document.body.appendChild(image); + }) + .catch(error => console.log(error)) + } + + + }) + } ) +} + +function fetchData(url, select) { + fetch(url) + .then(res => res.json()) + .then(data => addPokemonToDOM(data, select)) + .catch(error => console.log(error)); + +} + diff --git a/hackyourrepo-app/hyf.png b/hackyourrepo-app/hyf.png deleted file mode 100755 index 76bc5a13b4a53ea97a6c09ca5fe399f40ab20e4e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9116 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 GkN*WepL25n diff --git a/hackyourrepo-app/index.html b/hackyourrepo-app/index.html deleted file mode 100755 index c17533242..000000000 --- a/hackyourrepo-app/index.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - - - - - Codestin Search App - - - - -
- -
-
-
- - - - - - - - - - - - - - - - - - -
Repositories:SampleRepo1
Description: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, iure ipsum? Consequatur sequi esse veritatis in exercitationem quos repellat doloribus earum tempora cumque!
Forks: 5
Update: 2020-05-27 12:00:00
-
- -
-
-
Contributors
-
- - isalga -
9
-
-
- - isalga -
9
-
- -
-
-
- - - - - - - diff --git a/hackyourrepo-app/script.js b/hackyourrepo-app/script.js deleted file mode 100755 index 705924282..000000000 --- a/hackyourrepo-app/script.js +++ /dev/null @@ -1,26 +0,0 @@ -"use strict"; - -/* - Write here your JavaScript for HackYourRepo! -*/ -const placeholderRepos = [ - { - name: 'SampleRepo1', - description: 'This repository is meant to be a sample', - forks: 5, - updated: '2020-05-27 12:00:00', - }, - { - name: 'AndAnotherOne', - description: 'Another sample repo! Can you believe it?', - forks: 9, - updated: '2020-05-27 12:00:00', - }, - { - name: 'HYF-Is-The-Best', - description: - "This repository contains all things HackYourFuture. That's because HYF is amazing!!!!", - forks: 130, - updated: '2020-05-27 12:00:00', - }, -]; \ No newline at end of file diff --git a/hackyourrepo-app/style.css b/hackyourrepo-app/style.css deleted file mode 100755 index 64627fdfd..000000000 --- a/hackyourrepo-app/style.css +++ /dev/null @@ -1,96 +0,0 @@ -/* - Write here your CSS rules for HackYourRepo! -*/ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - -} - -#header { - color: white; - height: 50px; - background-color: #3f51b5; - display: flex; - align-items: center; - padding: 20px; - -} -p { - margin-right: 30px; -} - -.container { - width: 80%; - margin: 0 auto; - - -} - -.bottom-box { - - display: flex; - flex-direction: row; - height: auto; -} - -#left-side { - margin-top: 10px; - width: 50%; - -} -.card { - margin-left: 5px; - margin-top: 5px; - box-shadow: - 0px 20px 30px 0px rgba(0, 0, 0, 0.05), - 0px 4px 4px 0 rgba(0, 0, 0, .15), - 1px 2px 2px 0 rgba(0, 0, 0, .2); - font-size: 2vmin; -} -.card .col-right { - padding-left: 30px; - padding-right: 25px; - -} -.col-left { - - padding: 5px 0 0 5px; -} -#right-side { - - width: 50%; -} - -#contributor { - margin-top: 10px; - margin-left:0.4rem; - color: darkgray; - box-shadow: none; - padding-top: 1rem; - padding-left: 0.3rem; - border: 1px solid rgba(0, 0, 0, 0.12); - border-bottom: none; - height: 3em; -} -.small-card { - display: flex; - justify-content: flex-start; - align-items: center; - margin: 0.4rem; -} -img { - margin: 1rem; -} - - -.badge { - margin-left: auto; - background-color: #a9a9a9; - color: white; - border-radius: 4px; - margin-right: 1rem; - margin-top: 1.3rem; - padding: 0.1rem 0.8rem; -} From 91ec70c543e26ea18920dd00f23a182e3f4c2494 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Sat, 2 Jan 2021 16:41:10 +0330 Subject: [PATCH 2/9] Exer1 is added --- Week3/AmirHossein/homework/index.html | 12 +++++ Week3/AmirHossein/homework/promiseMe.js | 58 +++++++++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 Week3/AmirHossein/homework/index.html create mode 100644 Week3/AmirHossein/homework/promiseMe.js diff --git a/Week3/AmirHossein/homework/index.html b/Week3/AmirHossein/homework/index.html new file mode 100644 index 000000000..13cbe4a0a --- /dev/null +++ b/Week3/AmirHossein/homework/index.html @@ -0,0 +1,12 @@ + + + + + + Codestin Search App + + + + + + \ No newline at end of file diff --git a/Week3/AmirHossein/homework/promiseMe.js b/Week3/AmirHossein/homework/promiseMe.js new file mode 100644 index 000000000..b87bc8f02 --- /dev/null +++ b/Week3/AmirHossein/homework/promiseMe.js @@ -0,0 +1,58 @@ +/*function getData(url) { + fetch(url) + .then(response => response.json) + .then(json => console.log(json)) + .catch(error => console.log(error)); + } + + getData('https://randomfox.ca/floof/'); + + + +async function getData(url) { + try { + const response = await fetch(url); + return console.log(response) + } + catch(error) { + console.log(error); + }; + +} +getData('https://randomfox.ca/floof/')*/ + + +const arrayOfWords = ['apple', 'tomatos', 'avocado']; + +// const makeAllCaps = array => { +// return new Promise((resolve, reject) => { +// let capsArray = array.map(word => { +// if (typeof word === 'string') { +// return word.toUpperCase(); +// } else { +// reject('Error: Not all items in the array are strings!'); +// } +// }); +// resolve(capsArray); +// }); +// }; + +async function makeAllCaps(array) { + try { + let capsArray = await array.map(word => { + if (typeof word === 'string') { + return word.toUpperCase(); + }else { + reject(error); + } + }) + return capsArray + + } + catch(error) { + return console.log('Error: Not all items in the array are strings!') + } +} +makeAllCaps(arrayOfWords) + .then(result => console.log(result)) + .catch(error => console.log(error)); \ No newline at end of file From b6d0a5e6d3dc696500e3041e999acf5729a94f91 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Sat, 2 Jan 2021 16:46:32 +0330 Subject: [PATCH 3/9] Comments are removed --- Week3/AmirHossein/homework/promiseMe.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week3/AmirHossein/homework/promiseMe.js b/Week3/AmirHossein/homework/promiseMe.js index b87bc8f02..a5fbc0e97 100644 --- a/Week3/AmirHossein/homework/promiseMe.js +++ b/Week3/AmirHossein/homework/promiseMe.js @@ -1,4 +1,4 @@ -/*function getData(url) { +function getData(url) { fetch(url) .then(response => response.json) .then(json => console.log(json)) @@ -19,7 +19,7 @@ async function getData(url) { }; } -getData('https://randomfox.ca/floof/')*/ +getData('https://randomfox.ca/floof/') const arrayOfWords = ['apple', 'tomatos', 'avocado']; From ca7a1c062067dd1079b4356e9814fcaf7ef068e8 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Tue, 5 Jan 2021 13:02:43 +0330 Subject: [PATCH 4/9] Trivia html and some part of js is added --- .../homework/js-exercises/classify.js | 31 ++++++++ .../homework/{ => js-exercises}/index.html | 0 .../homework/{ => js-exercises}/promiseMe.js | 0 .../homework/js-exercises/trivia-app/app.js | 73 +++++++++++++++++++ .../js-exercises/trivia-app/index.html | 14 ++++ .../js-exercises/trivia-app/style.css | 33 +++++++++ 6 files changed, 151 insertions(+) create mode 100644 Week3/AmirHossein/homework/js-exercises/classify.js rename Week3/AmirHossein/homework/{ => js-exercises}/index.html (100%) rename Week3/AmirHossein/homework/{ => js-exercises}/promiseMe.js (100%) create mode 100644 Week3/AmirHossein/homework/js-exercises/trivia-app/app.js create mode 100644 Week3/AmirHossein/homework/js-exercises/trivia-app/index.html create mode 100644 Week3/AmirHossein/homework/js-exercises/trivia-app/style.css diff --git a/Week3/AmirHossein/homework/js-exercises/classify.js b/Week3/AmirHossein/homework/js-exercises/classify.js new file mode 100644 index 000000000..0dbd2bfd7 --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/classify.js @@ -0,0 +1,31 @@ +/*# STORY + +Abdulkareem is a 35 year old man, that lives in Riyadh. He has a wife and 3 children. As a day job he's a construction worker, that makes houses. He likes to eat dates and smoke water pipe. + +Abdulkareem has a horse, named Adel. The horse is 15 years old and has the color brown. Usually the horse eats grass or helps transport materials for Abdulkareem. + +And they lived happily ever after!*/ + +class Person { + constructor(name, location, age, maritalStatus, children, job, interests,) { + this.name = name, + this.location = location, + this.age = age, + this.maritalStatus = maritalStatus; + this.children = children; + this.job = job; + this.interests = interests; + } +} + +class Horse { + constructor(name, age, color, hobby) { + this.name = name, + this.age = age, + this.color = color; + this.hobby = hobby; + } +} + +const abdulkareem = Person('Abdulkareem', 35, 'Riyadh', 'married', '3 children', 'construction worker', ['dates', 'smoke water pipe'] ); +const adel = Horse('Adel', 15, 'brown', ['eat grasses', 'transport materials']); diff --git a/Week3/AmirHossein/homework/index.html b/Week3/AmirHossein/homework/js-exercises/index.html similarity index 100% rename from Week3/AmirHossein/homework/index.html rename to Week3/AmirHossein/homework/js-exercises/index.html diff --git a/Week3/AmirHossein/homework/promiseMe.js b/Week3/AmirHossein/homework/js-exercises/promiseMe.js similarity index 100% rename from Week3/AmirHossein/homework/promiseMe.js rename to Week3/AmirHossein/homework/js-exercises/promiseMe.js diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js new file mode 100644 index 000000000..a40ee10c3 --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js @@ -0,0 +1,73 @@ +const elFactory = (type, attributes, ...children) => { // Function for creating elements + const el = document.createElement(type); + let key; + for (key in attributes) { + el.setAttribute(key, attributes[key]); + }; + + children.forEach(child => { + if (typeof child === 'string') { + el.appendChild(document.createTextNode(child)); + } else { + el.appendChild(child); + } + }); + + return el + }; + + const container = elFactory('div', {class: 'container'}, + elFactory('h1',{}, 'Let\'s play some Trivia!'), + elFactory('h3', {}, 'Try your best to figure out the answer. If you really have no clue, click on the question to reveal the answer.')); + +console.log(container) + +const list = elFactory('div', {id: 'list'}) + + +document.body.appendChild(container); + +const url = 'https://opentdb.com/api.php?amount=5' + +function addTrivia(response) { + + response.results.forEach(element => { + console.log(element) + const list = elFactory('div', {id: 'list'}, + elFactory('p', {class: 'question'}, + elFactory('p', {class: 'answer'}))) + const questions = list.querySelector('.question'); + const answer = list.querySelector('.answer'); + questions.innerHTML = element.question; + answer.innerHTML = element.correct_answer; + list.appendChild(questions); + list.appendChild(answer); + container.appendChild(list); + +}) + +} + +function getData1() { + fetch(url) + .then(result => result.json()) + .then(response => { + addTrivia(response) + } + ) + +} +getData1(); + + + +// async function getData(url) { +// const fetchData = await fetch(url); +// const jsonData = fetchData.json(); + +// console.log(jsonData) + + +// } + +// getData(url); diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/index.html b/Week3/AmirHossein/homework/js-exercises/trivia-app/index.html new file mode 100644 index 000000000..37a4330ab --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/index.html @@ -0,0 +1,14 @@ + + + + + + + Codestin Search App + + + + + + + \ No newline at end of file diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css new file mode 100644 index 000000000..902f7e416 --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css @@ -0,0 +1,33 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + position: fixed; + top: 50%; + left: 50%; + /* bring your own prefixes */ + transform: translate(-50%, -50%); +} + +h1 { + margin-bottom: 20px; + +} + +h3 { + margin-bottom: 20px; +} + +#list { + padding: 10px; + +} + +.question { + margin-bottom: 10px; + padding: 5px; + background-color: lightgray; +} From d8cefeff7427ad4f08ae8f68a58ca533aa4c1d2b Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Tue, 5 Jan 2021 18:31:27 +0330 Subject: [PATCH 5/9] Ex3 is added --- .../homework/js-exercises/trivia-app/app.js | 45 +++++++++++++++---- .../js-exercises/trivia-app/style.css | 16 ++++--- 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js index a40ee10c3..eff8940ce 100644 --- a/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js @@ -16,38 +16,65 @@ const elFactory = (type, attributes, ...children) => { // Function for creati return el }; - const container = elFactory('div', {class: 'container'}, - elFactory('h1',{}, 'Let\'s play some Trivia!'), - elFactory('h3', {}, 'Try your best to figure out the answer. If you really have no clue, click on the question to reveal the answer.')); +const container = elFactory('div', {class: 'container'}, + elFactory('h1',{}, 'Let\'s play some Trivia!'), + elFactory('h3', {}, 'Try your best to figure out the answer. If you really have no clue, click on the question to reveal the answer.')); -console.log(container) - -const list = elFactory('div', {id: 'list'}) +const allPage = elFactory('div', {class: 'allpage'}) +allPage.appendChild(container) -document.body.appendChild(container); +const list = elFactory('div', {id: 'list'}) +document.body.appendChild(allPage); const url = 'https://opentdb.com/api.php?amount=5' function addTrivia(response) { - response.results.forEach(element => { - console.log(element) const list = elFactory('div', {id: 'list'}, elFactory('p', {class: 'question'}, elFactory('p', {class: 'answer'}))) const questions = list.querySelector('.question'); const answer = list.querySelector('.answer'); + questions.innerHTML = element.question; answer.innerHTML = element.correct_answer; list.appendChild(questions); list.appendChild(answer); container.appendChild(list); + function openFunction() { + + questions.addEventListener('click', function(){ + answer.style.display = 'block'; + closeFunction(); + }) + } + function closeFunction() { + + questions.addEventListener('click', function(){ + answer.style.display = 'none'; + openFunction(); + }) + } + closeFunction(); + document.addEventListener('click', function (event) { + const isClickInsideElement = container.contains(event.target); + if (!isClickInsideElement) { + answer.style.display = 'none' + + + + }; + }); + + }) } + + function getData1() { fetch(url) .then(result => result.json()) diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css index 902f7e416..98e3cd745 100644 --- a/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css @@ -21,13 +21,19 @@ h3 { margin-bottom: 20px; } -#list { + +.question { + padding: 10px; + background-color: lightgray; +} +.question:hover { + background-color: gray; + cursor: pointer; } -.question { - margin-bottom: 10px; - padding: 5px; - background-color: lightgray; +.answer { + display: none; + padding: 10px; } From e9b9329ee7982b85ad6c1b65a6b282e889c6f060 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Tue, 19 Jan 2021 14:45:28 +0330 Subject: [PATCH 6/9] Project is added --- hackyourrepo-app/AmirHossein/index.html | 2 +- hackyourrepo-app/AmirHossein/script.js | 149 ------------------ hackyourrepo-app/AmirHossein/style.css | 36 +++++ .../AmirHossein/util/addOptions.js | 16 ++ .../AmirHossein/util/addRepoName.js | 111 +++++++++++++ hackyourrepo-app/AmirHossein/util/elements.js | 46 ++++++ .../AmirHossein/util/elfactory.js | 21 +++ hackyourrepo-app/AmirHossein/util/error.js | 4 + .../AmirHossein/util/fetchData.js | 8 + .../AmirHossein/util/pagination.js | 55 +++++++ hackyourrepo-app/AmirHossein/util/script.js | 30 ++++ 11 files changed, 328 insertions(+), 150 deletions(-) delete mode 100644 hackyourrepo-app/AmirHossein/script.js create mode 100644 hackyourrepo-app/AmirHossein/util/addOptions.js create mode 100644 hackyourrepo-app/AmirHossein/util/addRepoName.js create mode 100644 hackyourrepo-app/AmirHossein/util/elements.js create mode 100644 hackyourrepo-app/AmirHossein/util/elfactory.js create mode 100644 hackyourrepo-app/AmirHossein/util/error.js create mode 100644 hackyourrepo-app/AmirHossein/util/fetchData.js create mode 100644 hackyourrepo-app/AmirHossein/util/pagination.js create mode 100644 hackyourrepo-app/AmirHossein/util/script.js diff --git a/hackyourrepo-app/AmirHossein/index.html b/hackyourrepo-app/AmirHossein/index.html index 654eee321..b343d9961 100644 --- a/hackyourrepo-app/AmirHossein/index.html +++ b/hackyourrepo-app/AmirHossein/index.html @@ -23,6 +23,6 @@ - + diff --git a/hackyourrepo-app/AmirHossein/script.js b/hackyourrepo-app/AmirHossein/script.js deleted file mode 100644 index a283717af..000000000 --- a/hackyourrepo-app/AmirHossein/script.js +++ /dev/null @@ -1,149 +0,0 @@ -"use strict"; - -/* - Write here your JavaScript for HackYourRepo! -*/ -window.onload = main; - -function main() { - const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; // The repositories API - const elFactory = (type, attributes, ...children) => { // Function for creating elements - const el = document.createElement(type); - let key; - for (key in attributes) { - el.setAttribute(key, attributes[key]); - }; - - children.forEach(child => { - if (typeof child === 'string') { - el.appendChild(document.createTextNode(child)); - } else { - el.appendChild(child); - } - }); - - return el - }; - - const container = elFactory('div', {class: 'container'}); - const header = elFactory('section', {id: 'header'}, - elFactory('p', {}, 'HYF Repositories'), - elFactory('select', {class: 'selectMenu'} - )); - const bottomBox = elFactory('div', {class: 'bottom-box'}); - const errorBox = elFactory('div', {id: 'error'}); - const leftSide = elFactory('section', {id: 'left-side'}); - const card = elFactory('div', {class: 'card'}, // Cards that inserted to the left box. - elFactory('table', {}, - elFactory('tr', {}, - elFactory('td', {class: 'col-left'}, 'Repositories: '), - elFactory('td', {class: 'col-right rep-text'}, elFactory('a', {href: '#', class: 'repo-link'}, ))), - elFactory('tr', {}, - elFactory('td', {class: 'col-left'}, 'Description: '), - elFactory('td', {class: 'col-right rep-description'}, '')), - elFactory('tr', {}, - elFactory('td', {class: 'col-left'}, 'Forks: '), - elFactory('td', {class: 'col-right rep-fork'}, '')), - elFactory('tr', {}, - elFactory('td', {class: 'col-left'}, 'Update: '), - elFactory('td', {class: 'col-right rep-update'}, '')))); - - const rightSide = elFactory('section', {id: 'right-side'}, - elFactory('div', {id: 'contributor'}, 'Contributors')); - const select = header.querySelector('select'); - const cardName = elFactory('div', {id: 'cardNameBox'}); // Box to add small cards of contributors - container.appendChild(header); - container.appendChild(errorBox); - bottomBox.appendChild(leftSide); - bottomBox.appendChild(rightSide); - leftSide.appendChild(card); - rightSide.appendChild(cardName); - container.appendChild(bottomBox); - document.body.appendChild(container) - - // Adding repository names to the select element. - function addrepoNames(data) { - data.forEach(element => { - const option = elFactory('option', {value: ''}) - option.innerHTML = element.name; - option.value = element.name; - - select.appendChild(option); - }); - - // Function to fetch data for items in select elemen. - select.addEventListener('input', () => { - document.querySelector('#left-side').style.display = 'block'; - document.querySelector('#contributor').style.display = 'block'; - cardName.innerHTML = '' - // IF the value of option is equal to element name this function will work. - // Despite showing error this section still works! I don't know how should I fix it. - data.forEach(element => { - if(select.value == element.name) { - // Adding items to description part - const repoDescription = card.querySelector('.rep-description'); - const repoName = card.querySelector('.repo-link'); - const forks = card.querySelector('.rep-fork'); - const update = card.querySelector('.rep-update'); - repoDescription.innerHTML = element.description; - repoName.innerHTML = element.name; - repoName.href = element.html_url; - forks.innerHTML = element.forks; - update.innerHTML = element.updated_at; - - const contributorsUrl = element.contributors_url; // URL of contributors - fetch(contributorsUrl) - .then(response => response.json()) - - // Creat and adding contributors name to the right side of the page. - .then(data2 => { - data2.forEach(element2 => { - const smallCard = elFactory('div', {class: 'card small-card'}, - elFactory('img', {src: '', class: 'userPhoto', width: '50px'}), - elFactory('a', {href: '', class: 'userName'}, ''), - elFactory('div', {class: 'badge'}, '')); - const userName = smallCard.querySelector('.userName'); - const image = smallCard.querySelector('img'); - const badge = smallCard.querySelector('.badge'); - image.src = element2.avatar_url; - userName.innerHTML = element2.login; - userName.href = element2.html_url; - badge.innerHTML = element2.contributions; - document.getElementById('error').style.display = 'none'; - cardName.appendChild(smallCard) - }) - }) - .catch(error => { - errorBox.innerHTML = error; - document.getElementById('error').style.display = 'block'; - }) - console.log(container) - } - }) - }) - - }; - function fetchData() { - fetch(url) - .then(res => res.json()) - .then(data => addrepoNames(data)) - .catch(error => { - errorBox.innerHTML = error; - document.getElementById('error').style.display = 'block'; - }) - } - fetchData(); - -} - - - - - - - - - - - - diff --git a/hackyourrepo-app/AmirHossein/style.css b/hackyourrepo-app/AmirHossein/style.css index 2cf35bd15..cabff2c3c 100644 --- a/hackyourrepo-app/AmirHossein/style.css +++ b/hackyourrepo-app/AmirHossein/style.css @@ -122,3 +122,39 @@ img { margin-top: 1.3rem; padding: 0.2rem 0.4rem; } + +.pagenumbers { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.pagenumbers button { + width: 30px; + height: 30px; + + appearance: none; + border: none; + outline: none; + cursor: pointer; + + background-color: #44AAEE; + + margin: 5px; + transition: 0.4s; + + color: #FFF; + font-size: 18px; + text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2); +} + +.pagenumbers button:hover { + background-color: #44EEAA; +} + +.pagenumbers button.active { + background-color: #44EEAA; + box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); +} diff --git a/hackyourrepo-app/AmirHossein/util/addOptions.js b/hackyourrepo-app/AmirHossein/util/addOptions.js new file mode 100644 index 000000000..c7c552860 --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/addOptions.js @@ -0,0 +1,16 @@ +import elFactory from './elfactory.js'; + +import elements from './elements.js' +const myElements2 = elements(); +console.log(myElements2) + +export default function addOption(data) { + data.forEach(element => { + const option = elFactory('option', {value: ''}) + option.innerHTML = element.name; + option.value = element.name; + // let x = myElements2.select + x.appendChild(option); + console.log(x) + +})}; \ No newline at end of file diff --git a/hackyourrepo-app/AmirHossein/util/addRepoName.js b/hackyourrepo-app/AmirHossein/util/addRepoName.js new file mode 100644 index 000000000..504092775 --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/addRepoName.js @@ -0,0 +1,111 @@ +import elFactory from './elfactory.js'; + +// import addOption from './addOptions.js' +// import {runPagination} from './pagination.js' + + +function addrepoNames(data, select, cardName, card, container, pagination) { + data.forEach(element => { + const option = elFactory('option', {value: ''}) + option.innerHTML = element.name; + option.value = element.name; + select.appendChild(option); + }); + // addOption(data); + + // Function to fetch data for items in select elemen. + select.addEventListener('change', () => { + document.querySelector('#left-side').style.display = 'block'; + document.querySelector('#contributor').style.display = 'block'; + cardName.innerHTML = '' + // IF the value of option is equal to element name this function will work. + // Despite showing error this section still works! I don't know how should I fix it. + data.forEach(element => { + if(select.value == element.name) { + // Adding items to description part + const repoDescription = card.querySelector('.rep-description'); + const repoName = card.querySelector('.repo-link'); + const forks = card.querySelector('.rep-fork'); + const update = card.querySelector('.rep-update'); + repoDescription.innerHTML = element.description; + repoName.innerHTML = element.name; + repoName.href = element.html_url; + forks.innerHTML = element.forks; + update.innerHTML = element.updated_at; + + const contributorsUrl = element.contributors_url; // URL of contributors + fetch(contributorsUrl) + .then(response => response.json()) + + // Creat and adding contributors name to the right side of the page. + .then(data2 => { + + data2.forEach(element2 => { + console.log(element2) + let current_page = 1; + const rows = 5; + function displayList(items, cardName, rows_per_page, page) { + cardName.innerHTML = ''; + page--; + let start = rows_per_page * page; + let end = start + rows_per_page; + let paginatedItems = items.slice(start, end); + + for(let i = 0; i < paginatedItems.length; i++) { + const smallCard = elFactory('div', {class: 'card small-card'}, + elFactory('img', {src: '', class: 'userPhoto', width: '50px'}), + elFactory('a', {href: '', class: 'userName'}, ''), + elFactory('div', {class: 'badge'}, '')); + const userName = smallCard.querySelector('.userName'); + const image = smallCard.querySelector('img'); + const badge = smallCard.querySelector('.badge'); + let item = paginatedItems[i]; + image.src = item.avatar_url; + userName.innerHTML = item.login; + userName.href = item.html_url; + badge.innerHTML = item.contributions; + document.getElementById('error').style.display = 'none'; + cardName.appendChild(smallCard) + + } + } + + function setUpPagination(items, cardName, rows_per_page) { + cardName.innerHTML = ""; + let page_count = Math.ceil(items.length / rows_per_page); + for (let i = 1; i < page_count +1 ; i++) { + let btn = paginationButton(i); + cardName.appendChild(btn); + } + } + + function paginationButton(page) { + let button = document.createElement('button'); + button.innerText = page; + if (current_page == page) button.classList.add('active'); + button.addEventListener('click', function () { + current_page = page; + displayList(data2, cardName, rows, current_page) + let current_btn = document.querySelector('.pagenumbers button.active'); + current_btn.classList.remove('active'); + button.classList.add('active'); + }) + return button; + } + + displayList(data2, cardName, rows, current_page) + setUpPagination(data2, pagination,rows) + }); + }) + .catch(error => { + document.getElementById('error').innerHTML = error; + console.log(error) + document.getElementById('error').style.display = 'block'; + }) + console.log(container) + } + }) + }) + }; + + export default addrepoNames; \ No newline at end of file diff --git a/hackyourrepo-app/AmirHossein/util/elements.js b/hackyourrepo-app/AmirHossein/util/elements.js new file mode 100644 index 000000000..1d15d90fa --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/elements.js @@ -0,0 +1,46 @@ +import elFactory from './elfactory.js' + +function elements() { + const container = elFactory('div', { class: 'container' }); + const header = elFactory('section', { id: 'header' }, + elFactory('p', {}, 'HYF Repositories'), + elFactory('select', { class: 'selectMenu' } + )); + const bottomBox = elFactory('div', { class: 'bottom-box' }); + const errorBox = elFactory('div', { id: 'error' }); + const leftSide = elFactory('section', { id: 'left-side' }); + const card = elFactory('div', { class: 'card' }, + elFactory('table', {}, + elFactory('tr', {}, + elFactory('td', { class: 'col-left' }, 'Repositories: '), + elFactory('td', { class: 'col-right rep-text' }, elFactory('a', { href: '#', class: 'repo-link' }))), + elFactory('tr', {}, + elFactory('td', { class: 'col-left' }, 'Description: '), + elFactory('td', { class: 'col-right rep-description' }, '')), + elFactory('tr', {}, + elFactory('td', { class: 'col-left' }, 'Forks: '), + elFactory('td', { class: 'col-right rep-fork' }, '')), + elFactory('tr', {}, + elFactory('td', { class: 'col-left' }, 'Update: '), + elFactory('td', { class: 'col-right rep-update' }, '')))); + + const rightSide = elFactory('section', { id: 'right-side' }, + elFactory('div', { id: 'contributor' }, 'Contributors')); + const select = header.querySelector('select'); + const cardName = elFactory('div', { id: 'cardNameBox' }); + const pagination = elFactory('div', {class: 'pagenumbers', id: 'pagination'}); + + container.appendChild(header); + container.appendChild(errorBox); + bottomBox.appendChild(leftSide); + bottomBox.appendChild(rightSide); + leftSide.appendChild(card); + rightSide.appendChild(cardName); + rightSide.appendChild(pagination); + container.appendChild(bottomBox); + document.body.appendChild(container) + return {leftSide, rightSide, card, select, cardName, container, pagination} + + } + + export default elements; diff --git a/hackyourrepo-app/AmirHossein/util/elfactory.js b/hackyourrepo-app/AmirHossein/util/elfactory.js new file mode 100644 index 000000000..a0b8d40b8 --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/elfactory.js @@ -0,0 +1,21 @@ +const elFactory = (type, attributes, ...children) => { // Function for creating elements + const el = document.createElement(type); + let key; + for (key in attributes) { + el.setAttribute(key, attributes[key]); + }; + + children.forEach(child => { + if (typeof child === 'string') { + el.appendChild(document.createTextNode(child)); + } else { + el.appendChild(child); + } + }); + + return el + }; + + + export default elFactory; + diff --git a/hackyourrepo-app/AmirHossein/util/error.js b/hackyourrepo-app/AmirHossein/util/error.js new file mode 100644 index 000000000..5355e1087 --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/error.js @@ -0,0 +1,4 @@ +function error() { + errorBox.innerHTML = error; + document.getElementById('error').style.display = 'block'; +} \ No newline at end of file diff --git a/hackyourrepo-app/AmirHossein/util/fetchData.js b/hackyourrepo-app/AmirHossein/util/fetchData.js new file mode 100644 index 000000000..bc3df1868 --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/fetchData.js @@ -0,0 +1,8 @@ + +// const errorBox = elFactory('div', {id: 'error'}); +async function fetchData(url) { + const getData = await fetch(url); + return getData.json(); +} + + export {fetchData} \ No newline at end of file diff --git a/hackyourrepo-app/AmirHossein/util/pagination.js b/hackyourrepo-app/AmirHossein/util/pagination.js new file mode 100644 index 000000000..773adccfe --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/pagination.js @@ -0,0 +1,55 @@ +import elFactory from './elfactory.js'; +function runPagination() { + const list_element = document.querySelector('#cardNameBox'); + console.log(list_element) + + let current_page = 1; + const rows = 5; + + function displayList(items, wrapper, rows_per_page, page) { + wrapper.innerHTML = ''; + page--; + + let start = rows_per_page * page; + let end = start + rows_per_page; + let paginatedItems = items.slice(start, end); + + for(let i = 0; i < paginatedItems.length; i++) { + let item = paginatedItems[i]; + + let item_element = document.createElement('div'); + item_element.classList.add('item'); + item_element.innerText = item; + // console.log(item_element) + // wrapper.appendChild(item_element) + console.log(wrapper) + } + } + + function setUpPagination(items, wrapper, rows_per_page) { + wrapper.innerHTML = ""; + + let page_count = Math.ceil(items.length / rows_per_page); + for (let i = 1; i < page_count; i++) { + let btn = paginationButton(i); + wapper.appendChild(btn); + } + } + + function paginationButton(page) { + let button = document.createElement('button'); + button.innerText = page; + + if (current_page == page) button.classList.add('active'); + + return button; + } + + displayList(data2, list_element, rows, current_page) + setUpPagination(data2, pagination_element,rows) + +} + + + +export {runPagination} diff --git a/hackyourrepo-app/AmirHossein/util/script.js b/hackyourrepo-app/AmirHossein/util/script.js new file mode 100644 index 000000000..db239ca6b --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/script.js @@ -0,0 +1,30 @@ +"use strict"; + +import elements from './elements.js' +import addrepoNames from './addRepoName.js'; +window.onload = main; + +import {fetchData} from './fetchData.js'; + +function main() { + const url = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; // The repositories API + const myElements = elements(); + fetchData(url) + .then(data => addrepoNames(data, myElements.select, myElements.cardName, myElements.card, myElements.container, myElements.pagination)) + .catch(error => { + console.log(error) + }) + +} + + + + + + + + + + + + From 4f7370db3318386ed39b47cb0f8ff6f1229b57c0 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Sun, 4 Jul 2021 13:13:51 +0430 Subject: [PATCH 7/9] nothing --- Week1/AmirHossein/homework/js-exercises/.vscode/settings.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 Week1/AmirHossein/homework/js-exercises/.vscode/settings.json diff --git a/Week1/AmirHossein/homework/js-exercises/.vscode/settings.json b/Week1/AmirHossein/homework/js-exercises/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/Week1/AmirHossein/homework/js-exercises/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file From 083ccafe0a1e3229c93e4be49ca112b46b5d075c Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Sun, 4 Jul 2021 13:14:28 +0430 Subject: [PATCH 8/9] nothing| --- hackyourrepo-app/AmirHossein/util/addRepoName.js | 1 - 1 file changed, 1 deletion(-) diff --git a/hackyourrepo-app/AmirHossein/util/addRepoName.js b/hackyourrepo-app/AmirHossein/util/addRepoName.js index 504092775..b0f7d345c 100644 --- a/hackyourrepo-app/AmirHossein/util/addRepoName.js +++ b/hackyourrepo-app/AmirHossein/util/addRepoName.js @@ -39,7 +39,6 @@ function addrepoNames(data, select, cardName, card, container, pagination) { // Creat and adding contributors name to the right side of the page. .then(data2 => { - data2.forEach(element2 => { console.log(element2) let current_page = 1; From 7b3f1106f057563b503b4328afa8c32cf5a60838 Mon Sep 17 00:00:00 2001 From: Amirhossein Date: Sat, 17 Jul 2021 13:03:51 +0430 Subject: [PATCH 9/9] Changed background colors --- .../homework/js-exercises/.vscode/settings.json | 3 +++ .../trivia-app/.vscode/settings.json | 3 +++ .../homework/js-exercises/trivia-app/style.css | 16 ++++++++++------ 3 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 Week3/AmirHossein/homework/js-exercises/.vscode/settings.json create mode 100644 Week3/AmirHossein/homework/js-exercises/trivia-app/.vscode/settings.json diff --git a/Week3/AmirHossein/homework/js-exercises/.vscode/settings.json b/Week3/AmirHossein/homework/js-exercises/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/.vscode/settings.json b/Week3/AmirHossein/homework/js-exercises/trivia-app/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css index 98e3cd745..9da6c5bf5 100644 --- a/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css @@ -2,14 +2,18 @@ margin: 0; padding: 0; box-sizing: border-box; + } .container { position: fixed; - top: 50%; - left: 50%; - /* bring your own prefixes */ - transform: translate(-50%, -50%); + top: 50%; + left: 50%; + padding: 5px; + /* bring your own prefixes */ + transform: translate(-50%, -50%); + background-color: lightgreen; + } h1 { @@ -25,11 +29,11 @@ h3 { .question { padding: 10px; - background-color: lightgray; + background-color: lightpink; } .question:hover { - background-color: gray; + background-color: lightblue; cursor: pointer; }