kottans · SofiiaTrokhymchuk · Sep 22, 2022
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/css/style.css b/submissions/SofiiaTrokhymchuk/friends-app/css/style.css
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/index.html b/submissions/SofiiaTrokhymchuk/friends-app/index.html
@@ -0,0 +1,81 @@
+<!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="css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <title>FriendsApp</title>
+</head>
+<body>
+    <div class="content-wrapper">
+        <header class="header">
+            <button class="hamburger-menu">
+                <div class="hamburger-menu__line"></div>
+                <div class="hamburger-menu__line"></div>
+                <div class="hamburger-menu__line"></div>
+            </button>
+            <a href="index.html" class="header-logo header-link">
+                <i class="fa-solid fa-hashtag header-icon"></i>
+                <h1 class="header-title"><span>F</span>riends<span>A</span>pp</h1>
+            </a>
+            <a href="https://github.com/SofiiaTrokhymchuk/friends-app" target="_blank" class="header-link">
+                <i class="fa-brands fa-github header-icon"></i>
+            </a>
+        </header>
+        <main class="main">
+            <section class="input-container" id="inputContainer">
+                <form class="input-form" id="inputForm">
+                    <section class="search-container">
+                        <input type="text" autocomplete="off" name="enteredName" id="enteredName" 
+                        placeholder="Search for friends..." class="search_container__input">
+                        <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                        <i class="fa-solid fa-circle-xmark close-icon" id="closeIcon"></i>
+                    </section>
+                    <section class="filters-container">
+                        <h3 class="input-category-title">Filters</h3>
+                        <h4 class="input-method-title">Gender Filter</h3>
+                        <input type="radio" name="genderFilter" value="allGenders" id="allGenders" class="radio-button-input" checked>
+                        <label for="allGenders" class="input-label"><i class="fa-solid fa-venus-mars"></i> All </label>
+
+                        <input type="radio" name="genderFilter" value="male" id="male" class="radio-button-input">
+                        <label for="male" class="input-label"><i class="fa-solid fa-mars"></i> M </label>
+
+                        <input type="radio" name="genderFilter" value="female" id="female" class="radio-button-input">
+                        <label for="female" class="input-label"><i class="fa-solid fa-venus"></i> F </label>
+                    </section>
+                    <section class="sorters-container">
+                        <h3 class="input-category-title">Sorters</h3>
+                        <input type="radio" name="sortingMethod" value="unsortedUsers" id="unsortedUsers" class="radio-button-input" checked>
+                        <label for="unsortedUsers" class="input-label">Unsorted</label>
+
+                        <h4 class="input-method-title">Sort by Name</h3>
+                        <input type="radio" name="sortingMethod" value="nameAscending" id="nameAscending" class="radio-button-input">
+                        <label for="nameAscending" class="input-label">(A-Z)</label>
+
+                        <input type="radio" name="sortingMethod" value="nameDescending" id="nameDescending" class="radio-button-input">
+                        <label for="nameDescending" class="input-label">(Z-A)</label>
+
+                        <h4 class="input-method-title">Sort by Age</h3>
+                        <input type="radio" name="sortingMethod" value="ageAscending" id="ageAscending" class="radio-button-input">
+                        <label for="ageAscending" class="input-label">(0-&infin;)</label>
+
+                        <input type="radio" name="sortingMethod" value="ageDescending" id="ageDescending" class="radio-button-input">
+                        <label for="ageDescending" class="input-label">(&infin;-0)</label>
+                    </section>
+                </form>
+            </section>
+            <section class="users-container" id="usersContainer">
+                <div class="loader-wrapper">
+                    <div class="loader"></div>
+                </div>
+            </section>
+        </main>
+        <footer class="footer">
+            <span>&copy;2022 Sonia Trokhymchuk</span>
+        </footer>
+    </div>
+    <script type="module" src="js/main.js"></script>
+</body>
+</html>
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/js/User.js b/submissions/SofiiaTrokhymchuk/friends-app/js/User.js
@@ -0,0 +1,43 @@
+export class User{
+    constructor(firstName, lastName, gender, age, country, phone, image){
+        this.firstName = firstName;
+        this.lastName = lastName;
+        this.gender = gender;
+        this.age = age;
+        this.country = country;
+        this.phone = phone;
+        this.image = image;
+    }
+
+    getFirstName(){
+        return this.firstName;
+    }
+
+    getLastName(){
+        return this.lastName;
+    }
+
+    getFullName(){
+        return this.getFirstName() + ' ' + this.getLastName();
+    }
+
+    getGender(){
+        return this.gender;
+    }
+
+    getAge(){
+        return this.age;
+    }
+
+    getCountry(){
+        return this.country;
+    }
+
+    getPhone(){
+        return this.phone;
+    }
+
+    getImage(){
+        return this.image;
+    }
+}
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/js/UsersList.js b/submissions/SofiiaTrokhymchuk/friends-app/js/UsersList.js
@@ -0,0 +1,37 @@
+import { User } from "./User.js";
+
+const USERS_URL = 'https://randomuser.me/api/?results=50';
+
+function handleErrors(response) {
+    if (!response.ok) {
+        throw Error(response.statusText);
+    }
+    return response;
+}
+
+async function getUsers(url){
+    try{
+        const response = await handleErrors(await fetch(url));
+        const fetchedData = await response.json();
+        const users = await fetchedData.results;
+        return users;
+    }catch(error){
+        alert('Something went wrong...\n' + error);
+    }
+}
+
+function createUserObject(user){
+    return new User(user.name.first, 
+        user.name.last, 
+        user.gender, 
+        user.dob.age,
+        user.location.country,
+        user.phone,
+        user.picture.large);
+}
+
+function createAllUsersObjects(users){
+    return users.map(user => createUserObject(user));
+}
+
+export let usersList = createAllUsersObjects(await getUsers(USERS_URL));
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/js/burgerMenuHandler.js b/submissions/SofiiaTrokhymchuk/friends-app/js/burgerMenuHandler.js
@@ -0,0 +1,20 @@
+export function hamburgerMenuClickHandler(){
+    const mainContainer = document.querySelector('.main');
+    const hamburgerMenu = document.querySelector('.hamburger-menu');
+    const inputContainer =  document.getElementById('inputContainer');
+    let menuIsOpened = false;
+    hamburgerMenu.addEventListener('click', () => {
+        toggleHamburgerMenuClasses();
+    })
+    mainContainer.addEventListener('click', (event) => {
+        if(menuIsOpened && !event.target.closest('.input-container') && !event.target.closest('.hamburger-menu')){
+            toggleHamburgerMenuClasses();
+        }
+    })
+
+    function toggleHamburgerMenuClasses(){
+        menuIsOpened = !menuIsOpened;
+        inputContainer.classList.toggle('opened');
+        hamburgerMenu.classList.toggle('active');
+    }
+}
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/js/inputHandler.js b/submissions/SofiiaTrokhymchuk/friends-app/js/inputHandler.js
@@ -0,0 +1,66 @@
+import { renderAllUsers } from "./renderUsers.js";
+import { usersList} from "./UsersList.js";
+
+function searchByName(users, enteredName){
+    return users.filter(user => user.getFullName().toLowerCase().includes(enteredName.toLowerCase()));
+}
+
+function filterByGender(users, selectedGender){
+    if(selectedGender !== 'allGenders'){
+        return users.filter(user => user.getGender() === selectedGender);
+    }else{
+        return users;
+    }
+}
+
+function sortUsers(users, sortingParameter){
+    const sortingMethods = {
+        unsortedUsers: () => {
+            return users;
+        },
+        nameAscending: () => {
+            return users.sort((currUser, nextUser) => currUser.getFullName().localeCompare(nextUser.getFullName()));
+        },
+        nameDescending: () => {
+            return users.sort((currUser, nextUser) => nextUser.getFullName().localeCompare(currUser.getFullName()));
+        },
+        ageAscending: () => {
+            return users.sort((currUser, nextUser) => currUser.getAge() - nextUser.getAge());
+        },
+        ageDescending: () => {
+            return users.sort((currUser, nextUser) => nextUser.getAge() - currUser.getAge());
+        }
+    }
+    return sortingMethods[sortingParameter]();
+}
+
+export function inputHandler(){
+    const inputForm = document.getElementById('inputForm');
+    inputForm.addEventListener('input', () => {
+        let users = usersList;
+        let selectedGender = inputForm.genderFilter.value;
+        let selectedSorting = inputForm.sortingMethod.value;
+        users = searchByName(users, inputForm.enteredName.value);
+        clearInput(usersList, selectedGender, selectedSorting);
+        users = filterByGender(users, inputForm.genderFilter.value);
+        users = sortUsers(users, inputForm.sortingMethod.value);
+        renderAllUsers(users);
+    })
+    inputForm.addEventListener('submit', (event) => {
+        event.preventDefault();
+    })
+}
+
+function clearInput(users, selectedGender, selectedSorting){
+    const closeIcon = document.getElementById('closeIcon');
+    if(inputForm.enteredName.value !== ''){
+        closeIcon.classList.add('active');
+        closeIcon.addEventListener('click', () => {
+            inputForm.enteredName.value = "";
+            closeIcon.classList.remove('active');
+            users = filterByGender(users, selectedGender);
+            users = sortUsers(users, selectedSorting);
+            renderAllUsers(users);
+        })
+    }
+}
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/js/main.js b/submissions/SofiiaTrokhymchuk/friends-app/js/main.js
@@ -0,0 +1,12 @@
+import { usersList } from "./UsersList.js";
+import { renderAllUsers } from "./renderUsers.js";
+import { inputHandler } from "./inputHandler.js";
+import { hamburgerMenuClickHandler } from "./burgerMenuHandler.js"
+
+function main(){
+    renderAllUsers(usersList);
+    inputHandler();
+    hamburgerMenuClickHandler();
+}
+
+main();
diff --git a/submissions/SofiiaTrokhymchuk/friends-app/js/renderUsers.js b/submissions/SofiiaTrokhymchuk/friends-app/js/renderUsers.js
@@ -0,0 +1,29 @@
+function renderUser(user){
+    const femaleIcon = '<i class="fa-solid fa-venus user-info-icon"></i>';
+    const maleIcon = '<i class="fa-solid fa-mars user-info-icon"></i>';
+    const phoneIcon = '<i class="fa-solid fa-phone user-info-icon"></i>';
+    const locationIcon = '<i class="fa-solid fa-location-dot user-info-icon"></i>';
+    return `
+        <article class="user-container">
+            <img class="user-image" src="${user.getImage()}" alt="User image">
+            <section class="user-info">
+                <h2 class="user-info__item user-name">${user.getFullName()}</h2>
+                <span class="user-info__item user-age">${user.getAge()}</span>
+                <span class="user-info__item secondary-user-info">
+                ${user.getGender() === 'female' ? femaleIcon : maleIcon} : ${user.getGender()}</span>
+                <span class="user-info__item secondary-user-info">
+                    <a href="tel:${user.getPhone()}">${phoneIcon} : ${user.getPhone()}</a>
+                </span>
+                <span class="user-info__item secondary-user-info">
+                    ${locationIcon} : ${user.getCountry()}
+                </span>
+            </section>
+        </article>
+    `;
+}
+
+export function renderAllUsers(users){
+    const usersContainer = document.getElementById('usersContainer');
+    const usersList = users.reduce((acc, user) => acc + renderUser(user), "");
+    usersContainer.innerHTML = usersList;
+}