Friends app (#95)

* js core code * added friends-app * remove unnecessary file from friends app directory * fixed func, fixed css, fixed variable names, func names * fixed search func, fixed findByAge func * fix func findByAge * rewrite functions, fetch, fixex css styles, fixed html * rewrite render logic, add filterState, rewrite filterBy and sortBy and filterBySearch, add init * rewrite function names, rewrite switch case in filterByGender func Co-authored-by: asa <pandemix331@gmail.com>
kottans · Sep 8, 2022 · f743436 · f743436
1 parent 6082335
commit f743436
Show file tree

Hide file tree

Showing 3 changed files with 411 additions and 0 deletions.
diff --git a/submissions/asaMitaka/FriendsApp/index.html b/submissions/asaMitaka/FriendsApp/index.html
@@ -0,0 +1,71 @@
+<!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">
+    <title>Friends App</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <a class='header__a' href="https://kottans.org/" target="_blank">Kottans</a>
+        </header>
+
+        <main class="mainBlock">
+            <div class="asideBlock">
+                <form name="age" id="ageForm">
+                    <div class="asideBlock__items">
+                        <p>By Age</p>
+                        <input type="radio" name="sort" id="ageMore">
+                        <label for="ageMore">Age < </label>
+                        <input type="radio" name="sort" id="ageLess">
+                        <label for="ageLess">Age > </label>
+                    </div>
+                    <div class="asideBlock__items">
+                        <p>By Last Name</p>
+                        <input type="radio" name="sort" id="lastAToZ">
+                        <label for="lastAToZ">A-Z</label>
+                        <input type="radio" name="sort" id="lastZToA">
+                        <label for="lastZToA">Z-A</label>
+                    </div>
+                </form>
+
+                <form name="gender" id="genderForm">
+                    <div class="asideBlock__items">
+                        <input type="radio" id="male"
+                        name="gender">
+                        <label for="male" class="gender">Male</label>
+
+                        <input type="radio" id="female"
+                        name="gender">
+                        <label for="female">Female</label>
+
+                        <input type="radio" id="all"
+                        name="gender" checked>
+                        <label for="all">All</label>
+                    </div>
+                </form>
+
+                <div class="asideBlock__items">
+                    <p>Search: </p>
+                    <input type="text" name="search" id="search">
+                </div>
+
+                <div class="asideBlock__items">
+                    <button id="reset">Reset</button>
+                </div>
+            </div>
+            <article class="articleBlock"></article>
+        </main>
+        <footer class="footer">
+            <a class="footer__a" href="https://kottans.org/" target="_blank">Kottans</a>
+        </footer>        
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/submissions/asaMitaka/FriendsApp/script.js b/submissions/asaMitaka/FriendsApp/script.js
@@ -0,0 +1,155 @@
+const url = 'https://randomuser.me/api/?results=12';
+const content = document.querySelector('.articleBlock');
+const ageForm = document.querySelector('#ageForm');
+const genderForm = document.querySelector('#genderForm');
+const search = document.querySelector('#search');
+let friends = [];
+let friendsCopy = [];
+
+const filterState = {
+    search: null, 
+    gender: null,
+    sort: null,
+    reset() {
+        this.search = null;
+        this.gender = null;
+        this.sort = null;
+    }
+}
+
+const getData = (url) => fetch(url)
+    .then(handleErrors)
+    .then(res => res.json())
+    .then(res =>  {
+        friends = [...res.results];
+        init();
+    });
+
+function handleErrors(res) {
+    if (!res.ok) {
+      throw Error(res.statusText);
+    }
+    return res;
+}
+
+function filterByGender(id, usersToFilter) {
+    let filteredUsers = [...usersToFilter];
+    switch(id) {
+        case 'male':
+        case 'female':
+            filteredUsers = usersToFilter.filter(item => item.gender === id);
+            break;
+        case 'all':   
+            filteredUsers = [...friends];
+            break;
+    }
+    return filteredUsers;
+}
+
+function sortByAge(a, b) {
+    return a.dob.age - b.dob.age;
+}
+
+function sortByLastName(a, b) {
+    return a.name.last !== b.name.last ? a.name.last < b.name.last ? -1 : 1 : 0;
+}
+
+function sortBy(id, usersToSort) {
+    switch(id) {
+        case 'ageMore':
+            usersToSort = usersToSort.sort((a, b) => sortByAge(a, b));
+            break;
+        case 'ageLess':
+            usersToSort = usersToSort.sort((a, b) => sortByAge(b, a));
+            break;
+        case 'lastAToZ':
+            usersToSort = usersToSort.sort((a, b) => sortByLastName(a, b));
+            break;
+        case 'lastZToA':
+            usersToSort = usersToSort.sort((a, b) => sortByLastName(b, a));
+            break;
+    }
+    return usersToSort;
+}
+
+function filterBySearch(searchValue, usersToSearch) {
+	return usersToSearch.filter((elem) =>
+		`${elem.name.first}${elem.name.last}`.toLowerCase().includes(searchValue.toLowerCase())
+	);
+};
+
+function creatingProfileCard({picture, name, email, dob, phone, location, gender}) {
+    return `
+        <div class='content__item'>
+            <img class='content__item-img' src='${picture.medium}'>
+            <div class='content__item-name'>${name.title} ${name.first} ${name.last}</div>
+            <p class='content__item-p content__item-email'>
+                <a class='content__item-a' href="mailto:  ${email}"   target="_blank"> ${email}</a>
+            </p>
+            <p class='content__item-p'>Age: ${dob.age}</p>
+            <a class='content__item-a' href='${phone}'>${phone}</a>
+            <p class='content__item-p content__item-country'>${location.country}, ${location.city}</p>
+            <div class='content__item-gender'>${gender}</div>
+        </div>
+    `;
+}
+
+function init() {
+    renderAllItemsToPage(friends);
+
+    document.querySelector('.asideBlock').addEventListener('input', ({target}) => {
+        if (target.name === 'gender') {
+            filterState.gender = target.id;
+        }
+
+        if (target.name === 'search') {
+            filterState.search = target.value;
+        }
+
+        if (target.name === 'sort') {
+            filterState.sort = target.id;
+        }
+
+        render();
+    });
+
+    document.querySelector('#reset').addEventListener('click', function() {
+        ageForm.reset();
+        genderForm.reset();    
+        filterState.reset();
+        search.value = '';
+        friendsCopy = [...friends];
+        render();
+    })
+}
+
+function render() {
+    friendsCopy = [...friends];
+
+    if (filterState.gender) {
+        friendsCopy = filterByGender(filterState.gender, friendsCopy);
+    }
+
+    if (filterState.sort) {
+        friendsCopy = sortBy(filterState.sort, friendsCopy);
+    }
+
+    if (filterState.search) {
+        friendsCopy = filterBySearch(filterState.search, friendsCopy);
+    }
+
+    renderAllItemsToPage(friendsCopy);
+}
+
+function renderAllItemsToPage(arr) {
+    content.innerHTML = '';
+
+    let acc = '';
+    arr.forEach(item => {
+        acc += creatingProfileCard(item);
+    });
+
+    content.innerHTML = acc;
+}
+
+getData(url);