kottans · natashafir · Feb 27, 2021 · Feb 27, 2021 · zonzujiro · Mar 2, 2021
diff --git a/submissions/natashafir/friends-app/index.html b/submissions/natashafir/friends-app/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Found your new friends</title>
+    <link href="style.css" rel="stylesheet">
+</head>
+<body>
+<div class="wrapper">
+    <h1 class="page-name">Find your new friends</h1>
+    <div class="buttons-wrapper">
+        <input type="text" class="search-form" placeholder="Enter name" name="search"/>
+        <form class="gender">
+            <input type="radio" id="all" name="gender" value="all" checked>
+            <label for="all">All</label>
+            <input type="radio" id="male" name="gender" value="male">
+            <label for="male">Male</label>
+            <input type="radio" id="female" name="gender" value="female">
+            <label for="female">Female</label>
+        </form>
+        <form class="age">
+            <input type="radio" id="agey" name="age" value="agey">
+            <label for="agey">Young-Old</label>
+            <input type="radio" id="ageo" name="age" value="ageo">
+            <label for="ageo">Old-Young</label>
+        </form>
+        <form class="name">
+            <input type="radio" id="namea" name="name" value="namea">
+            <label for="namea">A-Z</label>
+            <input type="radio" id="namez" name="name" value="namez">
+            <label for="namez">Z-A</label>
+        </form>
+    </div>
+    <main id="section__memory" class="section-memory">
+        <div class="cards"></div>
+    </main>
+</div>
+<script src="./index.js"></script>
+</body>
+</html>
diff --git a/submissions/natashafir/friends-app/index.js b/submissions/natashafir/friends-app/index.js
@@ -0,0 +1,107 @@
+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))
+}
+
+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 BR = document.createElement("br")
+    const cardWrapper = document.createElement('div');
+    const img = document.createElement('img');
+    const name = document.createElement('p');
+    const userName = document.createTextNode(item.name);
+    const age = document.createElement('p');
+    const userAge = document.createTextNode(item.age);
+    const gender = document.createElement('p');
+    const userGender = document.createTextNode(item.gender);
+
+    cardWrapper.classList.add('card-wrapper');
+    img.classList.add('img-card');
+
+    CARDS.appendChild(cardWrapper);
+    cardWrapper.appendChild(img);
+    cardWrapper.appendChild(name);
+    name.appendChild(userName);
+    name.appendChild(BR);
+    cardWrapper.appendChild(age);
+    name.appendChild(userAge);
+    cardWrapper.appendChild(gender);
+
+    img.src = item.photo;
+}
+
+
+document.querySelector(".gender").addEventListener("click", filterByGender);
+document.querySelector(".age").addEventListener("click", filterByGender);
+document.querySelector(".name").addEventListener("click", filterByGender);
+input.addEventListener('input', filterByGender);
+
+
+function filterByGender({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, choosedGender) {
+    if (choosedGender == 'ageo' || choosedGender == 'agey'){
+        dataToSort.sort(function(x,y){
+            return x.age - y.age;
+        });
+        if(choosedGender == 'ageo'){
+            dataToSort.reverse();
+        }
+    } else if (choosedGender == 'namea' || choosedGender == 'namez'){
+        dataToSort.sort(function(x,y){
+            let a = x.name.toUpperCase(),
+                b = y.name.toUpperCase();
+            return a == b ? 0 : a > b ? 1 : -1;
+        });
+        if (choosedGender == 'namez'){
+            dataToSort.reverse();
+        }
+    } else if (choosedGender == 'all' || choosedGender == 'female' || choosedGender == 'male'){
+        filterBy = choosedGender;
+    }
+
+    if (filterBy === 'all') {
+        return dataToSort;
+    } else {
+        return dataToSort.filter(element => element.gender === filterBy);
+    }
+}
+
+function renderUsers(item) {
+    CARDS.innerHTML = '';
+    item.forEach(elem => {
+        createCardItem(elem);
+});
+}
+
+document.addEventListener('DOMContentLoaded', initialApp);
diff --git a/submissions/natashafir/friends-app/style.css 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;
+
+}
+
+