kottans · DaniaB24 · Aug 3, 2022 · Aug 9, 2022 · Aug 22, 2022 · Aug 24, 2022
diff --git a/submissions/DaniaB24/index.html b/submissions/DaniaB24/index.html
@@ -0,0 +1,78 @@
+<!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="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap" rel="stylesheet">
+  <link href="style/style.css" rel="stylesheet">
+  <title>Friends App</title>
+</head>
+
+<body>
+  <header class="header-app">
+    <h1 class="header">Friends App</h1>
+    <input id="search" class="search" placeholder="search" type="search">
+  </header>
+
+
+  <div class="filter_menu">
+
+    <div class="search_friends" id="search_friends">
+    </div>
+    <div class="filter_sort" id="filter-item">
+      <p class="filter_caption"><b>Sort</b></p>
+      <div class="sort_button">
+        <div class="radio_abc_sort">
+          <input type="radio" class="sort_btn" name="sort" id="a-z" data-item='abc_increase'>
+          <label for="a-z" class="radio_sort" id="radio_sort_btn" data-id="sort_button">A-Z</label>
+        </div>
+        <div class="radio_abc_sort">
+          <input type="radio" class="sort_btn" name="sort" id="z-a" data-item='abc_decrease'>
+          <label for="z-a" class="radio_sort" id="radio_sort_btn" data-id="sort_button">Z-A</label>
+        </div>
+
+        <div class="radio_age_sort">
+          <input type="radio" class="sort_btn" name="sort" id="0-9" data-item="age_increase">
+          <label for="0-9" class="radio_sort" id="radio_sort_btn" data-id="sort_button">0-9</label>
+        </div>
+        <div class="radio_age_sort">
+          <input type="radio" class="sort_btn" name="sort" id="9-0" data-item="age_decrease">
+          <label for="9-0" class="radio_sort" id="radio_sort_btn" data-id="sort_button">9-0</label>
+        </div>
+
+
+      </div>
+
+      <div class="filter_sort sort_by_gender" id="sort_by_gender">
+        <p class="filter_caption"><b>Gender</b></p>
+        <div class="sort_gender" id="filter_gender">
+          <label class="man_sort">
+            <input type="checkbox" id="male_checkbox" class="gender_checkbox" value="male" checked>
+            Man
+          </label>
+
+          <label>
+            <input type="checkbox" id="female_checkbox" class="gender_checkbox" value="female" checked>
+            Woman
+          </label>
+          <div class="confirm_radio_btn">
+            <input type="radio" class="confirm_btn" name="sort" id="set" data-item="age_decrease">
+            <label for="set" class="radio_sort_btn" id="radio_sort_btn" data-id="sort_button">set</label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <main class="main">
+    <div class="allHumans" id="allHumans">
+
+    </div>
+  </main>
+  <script src="js/app.js" type="text/javascript"></script>
+</body>
+
+</html>
diff --git a/submissions/DaniaB24/js/app.js b/submissions/DaniaB24/js/app.js
@@ -0,0 +1,120 @@
+const cardsOfFriends = document.getElementById("allHumans");
+const searchBar = document.getElementById("search");
+
+let filteredFriends;
+let allFriends;
+let sortedFriends;
+let friends;
+fetch("https://randomuser.me/api/?results=10")
+  .then((response) => response.json())
+  .then((users) => {
+    friends = users.results;
+    renderFriends(friends);
+    displayUsers(friends);
+    document.addEventListener("click", (event) =>
+      filterSetting(event, friends)
+    );
+  });
+
+function filterSetting(event, friends) {
+  renderFriends(friends);
+  filterByGender(friends);
+
+  if (event.target.closest(".filter_menu"))
+    sortFriends(event.target, filteredFriends);
+}
+function renderFriends(friends) {
+  filterByGender(friends);
+  searchFriends();
+  sortFriends(friends);
+}
+function displayUsers(friends) {
+  const createCards = friends
+    .map((item) => {
+      return `
+    <div class="card_person">
+      <div class="card_container">
+        <img src="${item.picture.large}">
+         <h3 class="card_h3">${item.name.first} ${item.name.last}</h3>
+         <p class="card_age">Age: ${item.dob.age}</p>
+         <p class="card_gender">Gender: ${item.gender}</p>
+      </div>
+    </div>`;
+    })
+    .join("");
+  cardsOfFriends.innerHTML = createCards;
+}
+
+function ascendingOfName(friends) {
+  const sortedIncrease = friends.sort(function (a, b) {
+    if (a.name.first.toLowerCase() < b.name.first.toLowerCase()) return -1;
+    if (a.name.first.toLowerCase() > b.name.first.toLowerCase()) return 1;
+    return 0;
+  });
+  displayUsers(sortedIncrease);
+}
+
+function descendingOfName(friends) {
+  const sortedDecrease = friends.sort(function (a, b) {
+    if (a.name.first.toLowerCase() > b.name.first.toLowerCase()) return -1;
+    if (a.name.first.toLowerCase() < b.name.first.toLowerCase()) return 1;
+    return 0;
+  });
+  displayUsers(sortedDecrease);
+}
+
+function sortFriends(target, friends) {
+  const button = target.id;
+  switch (button) {
+    case "a-z":
+      ascendingOfName(friends);
+      break;
+    case "z-a":
+      descendingOfName(friends);
+      break;
+    case "0-9":
+      ascendingOfAge(friends);
+      break;
+    case "9-0":
+      descendingOfAge(friends);
+      break;
+    case "set":
+      displayUsers(friends);
+      break;
+  }
+}
+
+function ascendingOfAge(friends) {
+  const sortedAgeAscending = friends.sort(function (a, b) {
+    return a.dob.age - b.dob.age;
+  });
+  displayUsers(sortedAgeAscending);
+}
+
+function descendingOfAge(friends) {
+  const sortedAgeDescending = friends.sort(function (a, b) {
+    return b.dob.age - a.dob.age;
+  });
+  displayUsers(sortedAgeDescending);
+}
+
+function filterByGender(friends) {
+  const checkboxes = Array.from(
+    document.querySelectorAll(".gender_checkbox:checked")
+  );
+  filteredFriends = friends.filter((item) =>
+    checkboxes.some((gender) => item.gender === gender.value)
+  );
+}
+
+function searchFriends() {
+  searchBar.addEventListener("input", (e) => {
+    const search = e.target.value.toLowerCase();
+    const filterFriends = filteredFriends.filter((item) => {
+      const { first: firstName, last: lastName } = item.name;
+      return `${firstName} ${lastName}`.toLowerCase().includes(search);
+    });
+
+    displayUsers(filterFriends);
+  });
+}
diff --git a/submissions/DaniaB24/style/style.css b/submissions/DaniaB24/style/style.css
@@ -0,0 +1,180 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+body {
+  padding: 0;
+  background-color: cadetblue;
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header-app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  margin-bottom: 50px;
+  text-align: center;
+  font-size: 55px;
+  font-family: "Mochiy Pop P One", sans-serif;
+  background: #f66d52;
+  background: -webkit-linear-gradient(to top right, #f66d52 0%, #c521e3 100%);
+  background: -moz-linear-gradient(to top right, #f66d52 0%, #c521e3 100%);
+  background: linear-gradient(to top right, #f66d52 0%, #c521e3 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main {
+  padding: 40px;
+}
+
+.search {
+  text-align: center;
+  width: 450px;
+  height: 50px;
+  border-radius: 11px;
+  border: 2px #d34e33 solid;
+}
+
+img {
+  min-width: 235px;
+  max-width: 100%;
+  min-height: 300px;
+  max-height: 300px;
+  border-top-left-radius: 9px;
+  border-top-right-radius: 9px;
+}
+
+.allHumans {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.card_person {
+  margin: 30px;
+}
+
+.card_container {
+  background-color: rgb(187, 82, 82);
+  font-family: monospace;
+  border-radius: 10px;
+}
+
+.card_h3 {
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+  padding: 5px;
+}
+
+.card_age {
+  font-size: 15px;
+  font-family: monospace;
+  padding: 5px;
+}
+
+.card_gender {
+  padding: 5px;
+  font-size: 15px;
+}
+
+.filter_caption {
+  display: flex;
+  justify-content: center;
+  font-size: 30px;
+  margin-bottom: 20px;
+  letter-spacing: 3px;
+}
+
+.filter_menu {
+  font-family: "DM Sans", sans-serif;
+  min-width: 150px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 35px;
+}
+
+.sort_button {
+  display: flex;
+  flex-direction: row;
+  margin: 20px;
+}
+.radio_sort,
+.radio_sort {
+  cursor: pointer;
+  background-color: #ffffff;
+  border-radius: 5px;
+  height: 30px;
+  line-height: 30px;
+  color: #464646;
+  width: 60px;
+  font-size: 15px;
+  display: inline-block;
+  text-align: center;
+  margin: 10px 20px 10px 20px;
+  border-radius: 2rem;
+  border-radius: 2rem;
+  padding: 5px;
+  outline: 2px solid black;
+}
+.radio_sort_btn {
+  cursor: pointer;
+  background-color: #8f8f8f;
+  color: #c7c7c7;
+  font-size: 18px;
+  border-radius: 5px;
+  margin-left: 15px;
+  padding: 5px;
+  outline: 1px solid black;
+}
+.confirm_btn {
+  display: none;
+}
+.radio_sort_btn:active {
+  background-color: rgb(156, 156, 156);
+  padding: 7px;
+  color: #464646;
+  outline: 1px solid black;
+  box-shadow: 0 0 3px 3px whitesmoke;
+}
+.man_sort {
+  margin-right: 16px;
+}
+.radio_sort:hover {
+  background-color: #d8d8d8;
+  box-shadow: 0px 3px 20px rgba(216, 216, 216, 0.5);
+}
+
+.sort_btn:checked ~ .radio_sort {
+  outline: 2px solid red;
+  background-color: #d8d8d8;
+}
+
+.sort_btn {
+  display: none;
+}
+
+.gender_checkbox {
+  cursor: pointer;
+}
+label {
+  cursor: pointer;
+}
+.sort_by_gender {
+  font-size: 17px;
+  letter-spacing: 3px;
+}
+
+.sort_gender {
+  display: flex;
+  justify-content: center;
+}