London8_KatarzynaRuksza_React Challenges

challenge-baby-name-picker/AddToFav.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const AddToFav = ({ favorites }) => {
+  return (
+    <div>
+      <p>
+        <h3> Favorites:</h3>
+        {favorites.map((name) => {
+          return (
+            <span className="fav col-xs-2 m-2 badge rounded-pill fa fa-heart-o">
+              {name}
+            </span>
+          );
+        })}
+      </p>
+    </div>
+  );
+};
+
+export default AddToFav;

challenge-baby-name-picker/App.css

@@ -0,0 +1,109 @@
+body {
+  width: 80%;
+  margin-left: 10%;
+}
+h3 {
+  font-size: 30px;
+  font-weight: 700;
+  font-style: oblique;
+}
+.fav {
+  font-size: 28px;
+  font-weight: 400;
+  background-color: rgb(105, 163, 218);
+}
+.filter_search-container {
+  background: linear-gradient(
+    rgba(99, 29, 190, 0.722),
+    rgba(255, 192, 203, 0.677)
+  );
+  width: 100%;
+  height: 150px;
+}
+.chosen {
+  transform: translateY(20px);
+  transition: all 1s;
+}
+.boys_btn {
+  background-color: #1c975bb4;
+  font-size: 25px;
+  margin: 15px;
+  font-weight: 600;
+}
+.girls_btn {
+  background-color: rgba(139, 25, 122, 0.558);
+  font-size: 25px;
+  margin: 15px;
+  font-weight: 600;
+}
+.all_btn {
+  background-color: rgb(81, 122, 161);
+  font-size: 25px;
+  margin: 15px;
+  width: 90px;
+  font-weight: 600;
+}
+.bg-image {
+  background-image: url("../background.jpg");
+  height: auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+.female {
+  background-color: rgba(139, 25, 122, 0.558);
+}
+.male {
+  background-color: #1c975bb4;
+}
+.search-box {
+  width: 70%;
+  height: 50px;
+  background-color: rgba(139, 25, 122, 0.558);
+  border-color: #1c975bb4;
+  font-size: 25px;
+  border-style: groove;
+  border-width: 5px;
+  margin-top: 2%;
+}
+.App-content {
+  text-align: center;
+  font-size: 30px;
+  margin-top: 5%;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

challenge-baby-name-picker/App.js

@@ -0,0 +1,13 @@
+import "../styles/App.css";
+import React from "react";
+import Names from "./Names";
+
+const App = () => {
+  return (
+    <div>
+      <Names />
+    </div>
+  );
+};
+
+export default App;

challenge-baby-name-picker/Names.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import AddToFav from "./AddToFav";
+import babyNamesData from "../data/babyNamesData.json";
+import SearchAndSort from "./SearchAndSort";
+
+const Names = () => {
+  const [names, setNames] = useState(babyNamesData);
+  const [favorites, setFavorites] = useState([]);
+
+  return (
+    <div>
+      <SearchAndSort
+        names={babyNamesData}
+        setNames={setNames}
+        allNames={names}
+      />
+      <AddToFav
+        favorites={favorites}
+        setFavorites={setFavorites}
+        names={names}
+        setNames={setNames}
+      ></AddToFav>
+
+      <div className="App-content container-fluid">
+        <div className="row">
+          {names
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((name, index) => {
+              if (name.sex === "f" && !favorites.includes(name.name)) {
+                return (
+                  <span
+                    className="female col-xs-2 m-2 badge rounded-pill 		fa fa-venus"
+                    key={index}
+                    onClick={() => {
+                      if (!favorites.includes(name.name)) {
+                        setFavorites([...favorites, name.name]);
+                        setNames(names.filter((n) => n.name !== name.name));
+                      }
+                    }}
+                  >
+                    {name.name}
+                  </span>
+                );
+              } else if (name.sex === "m" && !favorites.includes(name.name)) {
+                return (
+                  <span
+                    className="male col-xs-2 m-2 badge 	fa fa-mars"
+                    key={index}
+                    onClick={() => {
+                      if (!favorites.includes(name.name)) {
+                        setFavorites([...favorites, name.name]);
+                        setNames(names.filter((n) => n.name !== name.name));
+                      }
+                    }}
+                  >
+                    {name.name}
+                  </span>
+                );
+              } else return null;
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Names;

challenge-baby-name-picker/SearchAndSort.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import "../styles/App.css";
+
+const SearchAndSort = ({ names, setNames, allNames }) => {
+  const [search, setSearch] = useState(allNames);
+  const [sort, setSort] = useState({
+    boys: false,
+    girls: false,
+    all: true,
+  });
+
+  return (
+    <div className="filter_search-container">
+      <input
+        type="text"
+        placeholder="Insert baby name you are looking for here..."
+        onChange={(e) => {
+          setNames(
+            search.filter((item) =>
+              item.name.toLowerCase().includes(e.target.value.toLowerCase())
+            )
+          );
+        }}
+        className="search-box"
+      />
+      <span
+        className={
+          sort.boys
+            ? "btn boys_btn badge fa fa-mars chosen"
+            : "btn boys_btn badge fa fa-mars"
+        }
+        onClick={() => {
+          if (!sort.boys) {
+            setSort({ boys: true, girls: false, all: false });
+            setNames(names.filter((item) => item.sex === "m"));
+            setSearch(names.filter((item) => item.sex === "m"));
+          }
+        }}
+      >
+        {" "}
+        Boys{" "}
+      </span>
+      <span> | </span>
+      <span
+        className={
+          sort.girls
+            ? "btn girls_btn badge rounded-pill fa fa-venus chosen"
+            : "btn girls_btn badge rounded-pill fa fa-venus"
+        }
+        onClick={() => {
+          if (!sort.girls) {
+            setSort({ boys: false, girls: true, all: false });
+            setNames(names.filter((item) => item.sex === "f"));
+            setSearch(names.filter((item) => item.sex === "f"));
+          }
+        }}
+      >
+        {" "}
+        Girls{" "}
+      </span>{" "}
+      {"|"}
+      <span
+        className={
+          sort.all
+            ? "btn all_btn badge 		fa fa-mars-double chosen"
+            : "btn all_btn badge 		fa fa-mars-double "
+        }
+        onClick={() => {
+          if (!sort.all) {
+            setSort({ boys: false, girls: false, all: true });
+            setNames(names);
+            setSearch(names);
+          }
+        }}
+      >
+        {" "}
+        All{" "}
+      </span>
+    </div>
+  );
+};
+
+export default SearchAndSort;