Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Friends App task #723

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Add Friends App task #723

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0a12705
Add Friends App task
AriadnaKravchuk Sep 30, 2022
2a248d6
Make self-check
AriadnaKravchuk Oct 2, 2022
cb23653
Change passed value
AriadnaKravchuk Oct 2, 2022
ae01620
Change passed value
AriadnaKravchuk Oct 2, 2022
e07df65
Make code formatting
AriadnaKravchuk Oct 2, 2022
200d673
Revert previous sort functions
AriadnaKravchuk Oct 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Make code formatting
  • Loading branch information
@AriadnaKravchuk
AriadnaKravchuk committed Oct 2, 2022
commit e07df657da8457f3ad4eb6fec670d75df9b98780
131 changes: 67 additions & 64 deletions submissions/AriadnaKravchuk/friends-app/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
function sortDown(friends, key) {
return friends.sort((firstFriend, secondFriend) =>
firstFriend[key] < secondFriend[key] ? 1 : -1
);
}

function sortUp(friends, key) {
return friends.sort((firstFriend, secondFriend) =>
firstFriend[key] > secondFriend[key] ? 1 : -1
);
function compareKey(firstFriend, secondFriend, key) {
return firstFriend[key] - secondFriend[key];
}

function sortCards(friends) {
const [key, diraction] = document.querySelector("#select__sort").value.split("-");
return diraction === "up" ? sortUp(friends, key) : sortDown(friends, key);

return diraction === "up"
? friends.sort((a, b) => compareKey(a, b, key))
: friends.sort((a, b) => compareKey(b, a, key));
}

function filterCards(friends) {
const selectedGender = document.querySelector("#select__filter").value;

if (selectedGender === "all") return Object.assign([], friends);

return friends.filter(({ gender }) => {
return gender === selectedGender;
});
return selectedGender === "all"
? Object.assign([], friends)
: friends.filter(({ gender }) => gender === selectedGender);
}

function searchByFullname(friends) {
const searchInput = document.querySelector(".search__input").value;

return friends.filter(({ fullname }) => {
return fullname.toUpperCase().indexOf(searchInput.toUpperCase()) > -1;
});
return friends.filter(({ fullname }) =>
fullname.toUpperCase().indexOf(searchInput.toUpperCase()) > -1
);
}

function resetForm() {
Expand All @@ -39,22 +32,23 @@ function resetForm() {
document.querySelector("#select__sort").children,
];

firstFilter.selected, firstSort.selected = "selected";
firstFilter.selected = "selected";
firstSort.selected = "selected";
document.querySelector(".search").reset();
}

function processData(friendsData) {
let processedData = [];
const processedData = [];

friendsData.forEach((friendData) => {
friendsData.forEach((friendData) =>
processedData.push({
age: friendData.dob.age,
fullname: friendData.name.first + " " + friendData.name.last,
gender: friendData.gender,
phone: friendData.phone,
picture: friendData.picture.large
});
});
})
);

return processedData;
}
Expand All @@ -63,55 +57,64 @@ function createFriendsCards(friends) {
let friendsCards = "";
const mainInner = document.querySelector(".main__inner");

friends.forEach(({age, fullname, gender, phone, picture}) => {
friends.forEach(({ age, fullname, gender, phone, picture }) =>
friendsCards += `<article class="card">
<div class="card__inner">
<img src="${picture}" alt="" class="card__image">
<p class="card__name">${fullname}</p>
<p class="card__age-and-gender">${age}, ${gender}</p>
<a href="tel:${phone}" class="card__telephone">${phone}</a>
</div>
</article>`;
});
<div class="card__inner">
<img src="${picture}" alt="" class="card__image">
<p class="card__name">${fullname}</p>
<p class="card__age-and-gender">${age}, ${gender}</p>
<a href="tel:${phone}" class="card__telephone">${phone}</a>
</div>
</article>`
);

mainInner.innerHTML = friendsCards;
}

async function getFriends() {
try{
const results = await fetch(
"https://randomuser.me/api/?results=21&inc=dob,gender,name,phone,picture"
);
return results.json();
} catch(error) {
console.log(error);
alert(error);
}
}

fetch("https://randomuser.me/api/?results=21&inc=dob,gender,name,phone,picture")
.then((results) => {
if (results.ok) return results.json();
})
.then((data) => {
async function loadMain() {
try{
const data = await getFriends();
const friends = sortCards(processData(data.results));
let friendsCopy = Object.assign([], friends);

createFriendsCards(friendsCopy);

document.querySelector(".search__input")
.addEventListener("keyup", () => {
friendsCopy = searchByFullname(filterCards(friends));
createFriendsCards(friendsCopy);
});
document.querySelector("#select__filter")
.addEventListener("change", () => {
friendsCopy = searchByFullname(filterCards(friends));
createFriendsCards(sortCards(friendsCopy));
});
document.querySelector("#select__sort")
.addEventListener("change", () => {
friendsCopy = sortCards(friendsCopy);
createFriendsCards(friendsCopy);
});
document.querySelector(".sidebar__button")
.addEventListener("click", () => {
resetForm();
friendsCopy = filterCards(friends);
friendsCopy = sortCards(friendsCopy);
createFriendsCards(friendsCopy);
});
})
.catch(() => {
showErrorStautus();
});
document.querySelector(".search__input").addEventListener("keyup", () => {
friendsCopy = searchByFullname(filterCards(friends));
createFriendsCards(friendsCopy);
});

document.querySelector("#select__filter").addEventListener("change", () => {
friendsCopy = searchByFullname(filterCards(friends));
createFriendsCards(sortCards(friendsCopy));
});

document.querySelector("#select__sort").addEventListener("change", () => {
friendsCopy = sortCards(friendsCopy);
createFriendsCards(friendsCopy);
});

document.querySelector(".sidebar__button").addEventListener("click", () => {
resetForm();
friendsCopy = sortCards(filterCards(friends));
createFriendsCards(friendsCopy);
});
} catch(error) {
console.log(error);
alert(error);
}
}

loadMain();