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="young-first" name="age" value="young-first">
+            <label for="young-first">Young-Old</label>
+            <input type="radio" id="old-first" name="age" value="old-first">
+            <label for="old-first">Old-Young</label>
+        </form>
+        <form class="name">
+            <input type="radio" id="az" name="name" value="name-AZ">
+            <label for="az">A-Z</label>
+            <input type="radio" id="za" name="name" value="name-ZA">
+            <label for="za">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,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 = `<div class="card-wrapper"><img class="img-card" src="${item.photo}"></img><p>${item.name}</p><p>Age: ${item.age}</p></div>`
+    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
@@ -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;
+
+}
+
+