kottans · drewzag · Sep 28, 2022 · Sep 28, 2022
diff --git a/submissions/drewzag/friends-app/data.js b/submissions/drewzag/friends-app/data.js
@@ -0,0 +1,9 @@
+export const getRandomUsers = async (amount) => {
+  try {
+    const response = await fetch(`https://randomuser.me/api/?results=${amount}&page=${1}&seed=drew`)
+    const data = await response.json()
+    return data.results
+  } catch (error) {
+    console.log(error)
+  }
+}
diff --git a/submissions/drewzag/friends-app/helpers.js b/submissions/drewzag/friends-app/helpers.js
@@ -0,0 +1,51 @@
+export const isQueryParams = (url, query) => {
+  if (url.searchParams.has(query)) {
+    if (url.searchParams.get(query) === '') {
+      url.searchParams.delete(query)
+      history.pushState('', '', url.href)
+      return false
+    }
+    return true
+  }
+}
+
+export const filterByName = (users, params, value) => {
+  const filtredUsers = users.filter((user) =>
+    user[params].first.toUpperCase().match(value.toUpperCase())
+  )
+  return filtredUsers
+}
+
+export const filterByGender = (users, params, value) => {
+  const filtredUsers = users.filter((user) => user[params].toUpperCase() === value.toUpperCase())
+  return filtredUsers
+}
+
+export const sortUsers = (users, order) => {
+  const sortedUsers = [...users]
+
+  switch (order) {
+    case 'age_asc':
+      sortedUsers.sort((user, nextUser) => user.dob.age - nextUser.dob.age)
+      return sortedUsers
+    case 'age_desc':
+      sortedUsers.sort((user, nextUser) => nextUser.dob.age - user.dob.age)
+      return sortedUsers
+    case 'name_acs':
+      sortedUsers.sort((user, nextUser) => {
+        if (user.name.first.toUpperCase() === nextUser.name.first.toUpperCase()) return 0
+        else if (user.name.first.toUpperCase() < nextUser.name.first.toUpperCase()) return -1
+        else return 1
+      })
+      return sortedUsers
+    case 'name_desc':
+      sortedUsers.sort((user, nextUser) => {
+        if (user.name.first.toUpperCase() === nextUser.name.first.toUpperCase()) return 0
+        else if (user.name.first.toUpperCase() < nextUser.name.first.toUpperCase()) return 1
+        else return -1
+      })
+      return sortedUsers
+    default:
+      return sortedUsers
+  }
+}
diff --git a/submissions/drewzag/friends-app/index.html b/submissions/drewzag/friends-app/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" />
+    <link rel="stylesheet" href="./styles/styles.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
+    <script src="./src/main.js" type="module" defer></script>
+    <title>Friends App</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="header__wrapper">
+        <div class="title">
+          <div class="app">Friends App</div>
+          <button class="menu">
+            <img src="./assets/menu.png" alt="" />
+          </button>
+        </div>
+        <div class="header">
+          <fieldset class="sort__name">
+            <legend>Sort by name</legend>
+            <div>
+              <input type="radio" id="name_asc" name="sort" value="name_acs" />
+              <label for="name_asc"> A-Z </label>
+            </div>
+            <div>
+              <input type="radio" id="name_desc" name="sort" value="name_desc" />
+              <label for="name_desc"> Z-A </label>
+            </div>
+          </fieldset>
+
+          <fieldset class="sort__age">
+            <legend>Sort by age</legend>
+            <div>
+              <input type="radio" id="age_asc" name="sort" value="age_asc" />
+              <label for="age_asc"> 1-9 </label>
+            </div>
+            <div>
+              <input type="radio" id="age_desc" name="sort" value="age_desc" />
+              <label for="age_desc"> 9-1 </label>
+            </div>
+          </fieldset>
+
+          <fieldset class="filter__gender">
+            <legend>Filter by gender</legend>
+            <div>
+              <input type="radio" id="all" name="gender" value="all" checked />
+              <label for="all">All</label>
+            </div>
+            <div>
+              <input type="radio" id="male" name="gender" value="male" />
+              <label for="male">Male</label>
+            </div>
+            <div>
+              <input type="radio" id="female" name="gender" value="female" />
+              <label for="female">Female</label>
+            </div>
+          </fieldset>
+
+          <div>
+            <input type="text" class="input__find" placeholder="Find user" />
+          </div>
+          <button class="reset">Reset</button>
+        </div>
+      </div>
+      <div class="cards__wrapper"></div>
+    </div>
+  </body>
+</html>
diff --git a/submissions/drewzag/friends-app/main.js b/submissions/drewzag/friends-app/main.js
@@ -0,0 +1,166 @@
+import { getRandomUsers } from './data.js'
+import { isQueryParams, filterByName, filterByGender, sortUsers } from './helpers.js'
+
+const NAME = 'name'
+const GENDER = 'gender'
+const MALE = 'male'
+const FEMALE = 'female'
+
+const menuButton = document.querySelector('.menu')
+const header = document.querySelector('.header')
+menuButton.addEventListener('click', () => {
+  header.classList.toggle('open')
+})
+
+const genderAll = document.querySelector('#all')
+const genderMale = document.querySelector('#male')
+const genderFemale = document.querySelector('#female')
+
+const wrapper = document.querySelector('.cards__wrapper')
+const url = new URL(window.location)
+
+const inputFind = document.querySelector('.input__find')
+
+const sortAgeAsc = document.querySelector('#age_asc')
+const sortAgeDesc = document.querySelector('#age_desc')
+
+const sortNameAsc = document.querySelector('#name_asc')
+const sortNameDesc = document.querySelector('#name_desc')
+
+const showUsers = async (amount) => {
+  !amount && (amount = 25)
+  url.searchParams.set('results', amount)
+  history.pushState('', '', url.href)
+  const users = await getRandomUsers(amount)
+
+  displayUsers(users)
+
+  sortNameAsc.addEventListener('click', () => {
+    url.searchParams.set('sort', 'name_acs')
+    history.pushState('', '', url.href)
+    displayUsers(sortUsers(users, 'name_acs'))
+  })
+
+  sortNameDesc.addEventListener('click', () => {
+    url.searchParams.set('sort', 'name_desc')
+    history.pushState('', '', url.href)
+    displayUsers(sortUsers(users, 'name_desc'))
+  })
+
+  sortAgeAsc.addEventListener('click', () => {
+    url.searchParams.set('sort', 'age_asc')
+    history.pushState('', '', url.href)
+    displayUsers(sortUsers(users, 'age_asc'))
+  })
+
+  sortAgeDesc.addEventListener('click', () => {
+    url.searchParams.set('sort', 'age_desc')
+    history.pushState('', '', url.href)
+    displayUsers(sortUsers(users, 'age_desc'))
+  })
+
+  inputFind.addEventListener('keyup', () => {
+    url.searchParams.set(NAME, inputFind.value)
+    displayUsers(filterByName(users, NAME, inputFind.value))
+    setTimeout(() => {
+      history.pushState('', '', url.href)
+      isQueryParams(url, NAME)
+    }, 2000)
+  })
+
+  genderAll.addEventListener('click', () => {
+    url.searchParams.set(GENDER, 'all')
+    history.pushState('', '', url.href)
+    displayUsers(users)
+  })
+  genderMale.addEventListener('click', () => {
+    url.searchParams.set(GENDER, MALE)
+    history.pushState('', '', url.href)
+    displayUsers(filterByGender(users, GENDER, MALE))
+  })
+  genderFemale.addEventListener('click', () => {
+    url.searchParams.set(GENDER, FEMALE)
+    history.pushState('', '', url.href)
+    displayUsers(filterByGender(users, GENDER, FEMALE))
+  })
+
+  const resetButton = document.querySelector('.reset')
+  resetButton.addEventListener('click', () => {
+    url.searchParams.set('gender', '')
+    url.searchParams.set('sort', '')
+    url.searchParams.set('name', '')
+    const sortNodes = document.querySelectorAll('input[type="radio"]')
+    sortNodes.forEach((node) => {
+      if (node.defaultValue === 'all') {
+        node.checked = true
+      } else node.checked = false
+    })
+    inputFind.value = ''
+    history.pushState('', '', url.href)
+    header.classList.remove('open')
+    displayUsers(users)
+  })
+}
+
+const displayUsers = (users) => {
+  let filtredUsers = [...users]
+
+  if (isQueryParams(url, NAME)) {
+    filtredUsers = filterByName(filtredUsers, NAME, url.searchParams.get(NAME))
+    inputFind.value = url.searchParams.get(NAME)
+  }
+  if (
+    (isQueryParams(url, 'gender') && url.searchParams.get('gender') === 'male') ||
+    url.searchParams.get('gender') === 'female'
+  ) {
+    const query = url.searchParams.get('gender')
+    filtredUsers = filterByGender(filtredUsers, 'gender', query)
+    const sortNodes = document.querySelectorAll('input[name="gender"]')
+    sortNodes.forEach((node) => {
+      if (node.defaultValue === query) {
+        node.checked = true
+      } else {
+        node.checked = false
+      }
+    })
+  }
+  if (isQueryParams(url, 'sort')) {
+    const query = url.searchParams.get('sort')
+    const sortNodes = document.querySelectorAll('input[name="sort"]')
+    filtredUsers = sortUsers(filtredUsers, query)
+    sortNodes.forEach((node) => {
+      if (node.defaultValue === query) {
+        node.checked = true
+      } else {
+        node.checked = false
+      }
+    })
+  }
+
+  const container = document.createDocumentFragment()
+  filtredUsers.forEach((user) => {
+    const card = document.createElement('div')
+    const info = document.createElement('div')
+    const fullName = document.createElement('div')
+    const age = document.createElement('div')
+    const phone = document.createElement('div')
+    const img = document.createElement('img')
+    card.classList.add('card')
+    info.classList.add('info')
+    fullName.classList.add('full_name')
+    age.classList.add('age')
+    phone.classList.add('phone')
+    img.classList.add('photo')
+    fullName.textContent = user.name.first + ' ' + user.name.last
+    age.textContent = user.dob.age + ' years'
+    phone.textContent = 'phone: ' + user.phone
+    info.append(fullName, age, phone)
+    img.src = user.picture.large
+    img.alt = ''
+    card.append(img, info)
+    container.append(card)
+  })
+  wrapper.replaceChildren(container)
+}
+
+showUsers(url.searchParams.get('results'))