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

Show file tree
Hide file tree
Changes from all commits
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
59 changes: 59 additions & 0 deletions submissions/AriadnaKravchuk/friends-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<link rel="icon" href="./assets/img/friends.png" type="image/png">
<title>Friends App</title>
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__container container">
<a class="header__logo" href="index.html">Friends App</a>
<form action="#" class="search">
<input class="search__input" type="text" placeholder="Search by name..." name="search">
</form>
</div>
</header>
<div class="content">
<div class="content__container container">
<aside class="sidebar">
<form action="#" class="sidebar__inner">
<div class="select">
<label class="select__label" for="select__filter">Choose gender</label>
<select class="select__inner" id="select__filter">
<option value="all">All</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="select">
<label class="select__label" for="select__sort">Choose a sort</label>
<select class="select__inner" id="select__sort">
<option value="age-up">Age up</option>
<option value="age-down">Age down</option>
<option value="fullname-up">Name up</option>
<option value="fullname-down">Name down</option>
</select>
</div>
<button class="sidebar__button" type="reset">Reset</button>
</form>
</aside>
<main class="main">
<div class="main__inner">
</div>
</main>
</div>
</div>
<footer class="footer">
<div class="footer__container container">
<div class="footer__text">&copy Ariadna Kravchuk 2022</div>
</div>
</footer>
</div>
<script src="./assets/js/script.js"></script>
</body>
</html>
126 changes: 126 additions & 0 deletions submissions/AriadnaKravchuk/friends-app/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
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 sortCards(friends) {
const [key, diraction] = document.querySelector("#select__sort").value.split("-");

return diraction === "up" ? sortUp(friends, key) : sortDown(friends, key);
}

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

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 }) =>
fullname.toUpperCase().indexOf(searchInput.toUpperCase()) > -1
);
}

function resetForm() {
const [[firstFilter], [firstSort]] = [
document.querySelector("#select__filter").children,
document.querySelector("#select__sort").children,
];

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

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

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;
}

function createFriendsCards(friends) {
let friendsCards = "";
const mainInner = document.querySelector(".main__inner");

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>`
);

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);
}
}

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 = sortCards(filterCards(friends));
createFriendsCards(friendsCopy);
});
} catch(error) {
console.log(error);
alert(error);
}
}

loadMain();
212 changes: 212 additions & 0 deletions submissions/AriadnaKravchuk/friends-app/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
}

*:focus {
outline: 1.5px solid rgb(88, 88, 88);
}

button {
font-family: inherit;
cursor: pointer;
}

a {
text-decoration: none;
color: inherit;
font-family: inherit;
}

html,
body,
.wrapper,
.main,
.content__container,
.card__inner {
width: 100%;
height: 100%;
}

.wrapper {
display: flex;
flex-direction: column;
font-family: Calibri, 'Trebuchet MS', sans-serif;
}

.header {
background-color: #c8c7d7;
}

.header__container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
}

.container {
margin: 0 auto;
max-width: 1140px;
}

.header__logo {
font-size: 22px;
color: white;
font-weight: 600;
}

.search__input {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
padding: 8px 13px;
border-radius: 10px;
}

.content {
background-color: #f7f7f7;
flex: 1 1 auto;
}

.content__container {
display: flex;
}

.sidebar {
width: 400px;
}

.sidebar__inner {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
padding: 10px;
border-radius: 30px 0;
margin: 20px;
background-color: #c8c7d7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}

.select {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.select__label {
color: white;
font-size: 22px;
font-weight: 600;
margin: 20px 0 10px;
}

.select__inner {
color: rgb(22, 22, 22);
position: relative;
min-width: 170px;
padding: 5px;
border: 1px solid #E8EAED;
border-radius: 5px;
background: white;
cursor: pointer;
font-family: inherit;
font-size: 16px;
transition: all 150ms ease;
}

.sidebar__button {
text-transform: uppercase;
font-weight: 800;
background-color: #fcfcfc;
box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
margin: 30px 0 20px;
padding: 10px;
min-width: 100px;
width: fit-content;
border-radius: 10px;
cursor: pointer;
color: rgb(22, 22, 22);
font-size: 16px;
}

.main__inner {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px 20px;
}

.card {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
border-radius: 5px;
width: 220px;
height: 320px;
}

.card__inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px;
border-radius: 5px;
font-weight: 400;
color: black;
font-size: 1rem;
text-align: center;
background-color: white;
}

.card__image {
max-width: 120px;
height: 120px;
border-radius: 50%;
width: 100%;
}

.card__name {
margin-top: 10px;
width: 70%;
font-size: 20px;
font-weight: 600;
border-bottom: 1.7px solid black;
padding-bottom: 5px;
}

.footer {
font-weight: 600;
color: white;
background-color: #c8c7d7;
}

.footer__container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

@media (max-width: 500px) {
.content__container {
flex-direction: column;
}
.sidebar {
margin: 0 auto;
max-width: 400px;
width: 100%;
}
}

@media (max-width: 350px) {
.header__container {
flex-direction: column;
gap: 10px;
}
}