diff --git a/submissions/natashafir/friends-app/index.html b/submissions/natashafir/friends-app/index.html new file mode 100644 index 000000000..c27555844 --- /dev/null +++ b/submissions/natashafir/friends-app/index.html @@ -0,0 +1,43 @@ + + + + + + + Found your new friends + + + +
+

Find your new friends

+
+ +
+ + + + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+
+
+ + + diff --git a/submissions/natashafir/friends-app/index.js b/submissions/natashafir/friends-app/index.js new file mode 100644 index 000000000..5c43a3d9e --- /dev/null +++ b/submissions/natashafir/friends-app/index.js @@ -0,0 +1,90 @@ +const URL = 'https://randomuser.me/api/?results=50'; +const CARDS = document.querySelector('.cards'); +let filterBy = 'all'; +let allFriends = []; +let friends = []; +let sortedFriends; +const input = document.querySelector('input'); + +function initialApp() { + fetch(URL) + .then(response => response.json()) + .then((data) => (allFriends = data.results)) + .then(() => userTemplate(allFriends)) + .then(()=> renderUsers(allFriends)) + .catch(err => { + console.log(err); + alert('ERROR in fetching the url'); + }) +} + +function userTemplate(array) { + allFriends = array.map(user => { + return { + name: `${user.name.first} ${user.name.last}`, + age: user.dob.age, + gender: user.gender, + photo: user.picture.large + } + }); +} + +function createCardItem(item) { + const template = `

${item.name}

Age: ${item.age}

` + return template; +}; + +document.querySelector(".gender").addEventListener("click", filterByChoose); +document.querySelector(".age").addEventListener("click", filterByChoose); +document.querySelector(".name").addEventListener("click", filterByChoose); +input.addEventListener('input', filterByChoose); + +function filterByChoose({target}) { + let sortedArr = allFriends; + if (target.type != 'radio') { + sortedArr = sortedArr.filter(element => + element.name.toLowerCase().includes(target.value.toLowerCase())); + } + sortedArr = getSortedFriends(sortedArr, target.value); + return renderUsers(sortedArr); +} + + +function getSortedFriends(dataToSort, choosedRadio) { + if (choosedRadio == 'old-first' || choosedRadio == 'young-first'){ + dataToSort.sort(function(x, y){ + return x.age - y.age; + }); + if(choosedRadio == 'old-first'){ + dataToSort.reverse(); + } + } else if (choosedRadio == 'name-AZ' || choosedRadio == 'name-ZA'){ + dataToSort.sort(function(x, y){ + let a = x.name.toUpperCase(), + b = y.name.toUpperCase(); + return a == b ? 0 : a > b ? 1 : -1; + }); + if (choosedRadio == 'name-ZA'){ + dataToSort.reverse(); + } + } else if (choosedRadio == 'all' || choosedRadio == 'female' || choosedRadio == 'male'){ + filterBy = choosedRadio; + } + + if (filterBy === 'all') { + return dataToSort; + } else { + return dataToSort.filter(element => element.gender === filterBy); + } +} + +function renderUsers(item) { + CARDS.innerHTML = ''; + let cards = ''; + item.forEach(elem => { + cards +=createCardItem(elem); +}); + CARDS.innerHTML = cards; +} + +document.addEventListener('DOMContentLoaded', initialApp); diff --git a/submissions/natashafir/friends-app/style.css b/submissions/natashafir/friends-app/style.css new file mode 100644 index 000000000..093503c78 --- /dev/null +++ b/submissions/natashafir/friends-app/style.css @@ -0,0 +1,50 @@ + +.wrapper { + padding: 0 10%; +} + +.page-name { + text-align: center; +} + +.section-memory { + margin: 0 auto; + background-color: #f9f3f3; +} + +.cards { + max-width: 840px; + margin: 0 auto; + /*background-color: lightpink;*/ + display: flex; + flex-wrap: wrap; + /*margin: 0 auto;*/ +} + +.card-wrapper { + width: calc(25% - 10px); + height: calc(25% - 10px); + padding: 2px; + margin: 2px; + background-color: #fff; + +} + +.img-card { + background-color: aliceblue; + margin: 5px; +} + +.buttons-wrapper { + background-color: #dddddd; + padding: 20px 10px; +} + +.search-form { + width: 190px; + height: 30px; + margin-bottom: 10px; + +} + +