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 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/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/js-exercises/index.html b/Week3/AmirHossein/homework/js-exercises/index.html new file mode 100644 index 000000000..13cbe4a0a --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/index.html @@ -0,0 +1,12 @@ + + + + + + Codestin Search App + + + + + + \ No newline at end of file diff --git a/Week3/AmirHossein/homework/js-exercises/promiseMe.js b/Week3/AmirHossein/homework/js-exercises/promiseMe.js new file mode 100644 index 000000000..a5fbc0e97 --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/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 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/app.js b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js new file mode 100644 index 000000000..eff8940ce --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js @@ -0,0 +1,100 @@ +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.')); + +const allPage = elFactory('div', {class: 'allpage'}) +allPage.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 => { + 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()) + .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..9da6c5bf5 --- /dev/null +++ b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css @@ -0,0 +1,43 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + +} + +.container { + position: fixed; + top: 50%; + left: 50%; + padding: 5px; + /* bring your own prefixes */ + transform: translate(-50%, -50%); + background-color: lightgreen; + +} + +h1 { + margin-bottom: 20px; + +} + +h3 { + margin-bottom: 20px; +} + + +.question { + + padding: 10px; + background-color: lightpink; +} + +.question:hover { + background-color: lightblue; + cursor: pointer; +} + +.answer { + display: none; + padding: 10px; +} 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..b0f7d345c --- /dev/null +++ b/hackyourrepo-app/AmirHossein/util/addRepoName.js @@ -0,0 +1,110 @@ +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) + }) + +} + + + + + + + + + + + +