diff --git a/challenge-baby-name-picker/AddToFav.js b/challenge-baby-name-picker/AddToFav.js
new file mode 100644
index 000000000..f0a4aeea5
--- /dev/null
+++ b/challenge-baby-name-picker/AddToFav.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const AddToFav = ({ favorites }) => {
+ return (
+
+
+
Favorites:
+ {favorites.map((name) => {
+ return (
+
+ {name}
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/challenge-baby-name-picker/Names.js b/challenge-baby-name-picker/Names.js
new file mode 100644
index 000000000..7aed0b26f
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ {names
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map((name, index) => {
+ if (name.sex === "f" && !favorites.includes(name.name)) {
+ return (
+ {
+ if (!favorites.includes(name.name)) {
+ setFavorites([...favorites, name.name]);
+ setNames(names.filter((n) => n.name !== name.name));
+ }
+ }}
+ >
+ {name.name}
+
+ );
+ } else if (name.sex === "m" && !favorites.includes(name.name)) {
+ return (
+ {
+ if (!favorites.includes(name.name)) {
+ setFavorites([...favorites, name.name]);
+ setNames(names.filter((n) => n.name !== name.name));
+ }
+ }}
+ >
+ {name.name}
+
+ );
+ } else return null;
+ })}
+
+
+
+ {
+ setNames(
+ search.filter((item) =>
+ item.name.toLowerCase().includes(e.target.value.toLowerCase())
+ )
+ );
+ }}
+ className="search-box"
+ />
+ {
+ 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{" "}
+
+ |
+ {
+ 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{" "}
+ {" "}
+ {"|"}
+ {
+ if (!sort.all) {
+ setSort({ boys: false, girls: false, all: true });
+ setNames(names);
+ setSearch(names);
+ }
+ }}
+ >
+ {" "}
+ All{" "}
+
+
+ );
+};
+
+export default SearchAndSort;
diff --git a/challenge-baby-name-picker/background.jpg b/challenge-baby-name-picker/background.jpg
new file mode 100644
index 000000000..cf5375d5f
Binary files /dev/null and b/challenge-baby-name-picker/background.jpg differ
diff --git a/challenge-countries/App.css b/challenge-countries/App.css
new file mode 100644
index 000000000..b8520b88e
--- /dev/null
+++ b/challenge-countries/App.css
@@ -0,0 +1,117 @@
+.main {
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 80%;
+ background: whitesmoke;
+ justify-content: space-around;
+}
+.countries {
+ display: flex;
+ flex-direction: column;
+ margin-top: -2rem;
+ border-style: solid;
+ background-color: whitesmoke;
+}
+.darkMode {
+ display: flex;
+ flex-direction: column;
+ margin-top: -2rem;
+ border-style: solid;
+ background: rgb(55, 55, 56);
+}
+.country-info {
+ display: flex;
+ flex-direction: column;
+ width: 22%;
+ background: rgb(255, 255, 255);
+ margin: 1%;
+ height: 24rem;
+ align-items: center;
+ border-radius: 5px;
+ border-radius: 0.5rem;
+}
+
+.country-info img {
+ width: 100%;
+ object-fit: cover;
+ height: 11rem;
+ border-top-left-radius: 0.4rem;
+ border-top-right-radius: 0.4rem;
+}
+/*.country-dark {
+ display: flex;
+ flex-direction: column;
+ width: 25%;
+ background: rgb(55, 55, 56);
+ margin: 1%;
+ height: 10%;
+ align-items: center;
+ border-radius: 5px;
+}
+*/
+ul {
+ list-style-type: none;
+ padding: 3%;
+ align-self: start;
+ font-size: 16px;
+ margin: 3px;
+}
+li {
+ padding: 3px;
+}
+.input-search {
+ margin-left: 10%;
+ height: 2.8rem;
+ width: 30%;
+ border-radius: 0.4rem;
+ font-size: 20px;
+ font-weight: 900;
+}
+.select-search {
+ display: flex;
+ align-items: center;
+ height: 150px;
+ margin-top: 4rem;
+}
+::placeholder {
+ padding-left: 1%;
+ color: black;
+}
+select {
+ margin-left: 90rem;
+ margin-top: -6.5rem;
+ margin-bottom: 8rem;
+ height: 3rem;
+ width: 15rem;
+ font-weight: 900;
+ font-size: 20px;
+ border-radius: 0.4rem;
+ padding-left: 1.5rem;
+}
+h2 {
+ margin-left: 3rem;
+}
+h5 {
+ font-size: 20px;
+ align-self: start;
+ margin-left: 15px;
+}
+header {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 2rem;
+ height: 5rem;
+ background: rgb(255, 255, 255);
+}
+button {
+ border-style: none;
+ background: rgb(255, 255, 255);
+ margin-right: 4rem;
+ font-size: 20px;
+ font-weight: 600;
+}
+.glass {
+ margin-left: -3%;
+}
diff --git a/challenge-countries/App.js b/challenge-countries/App.js
new file mode 100644
index 000000000..5d49e237a
--- /dev/null
+++ b/challenge-countries/App.js
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import "./App.css";
+import Country from "./Country";
+import Data from "./allCountries.json";
+import Options from "./Options";
+
+function App() {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [country, setCountry] = useState(Data);
+ const [clicked, setClicked] = useState(true);
+
+ const clickHandler = () => {
+ setClicked(!clicked);
+ };
+
+ const handleSearch = (event) => {
+ const value = event.target.value;
+ setSearchTerm(value);
+ setCountry(
+ country.filter((country) => {
+ return country.name.toLowerCase().includes(value.toLowerCase());
+ })
+ );
+ };
+
+ return (
+
+
+ Where In The World?
+
+
+
+
+
+
+
+
setCountry(country)} />
+
+
+ {country.map((country) => {
+ return (
+
+ );
+ })}
+
+
+
+
{props.Name}
+
+ -
+ Population: {props.Population}
+
+ -
+ Region: {props.Region}
+
+ -
+ Capital: {props.Capital}
+
+
+
+
+
HIGH SCORES PER COUNTRY
+
+ {scores
+ .sort((a, b) => a.name.localeCompare(b.name))
+ .map((country, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default App;
diff --git a/challenge-high-score-tables/CountryHighScore.js b/challenge-high-score-tables/CountryHighScore.js
new file mode 100644
index 000000000..93844bbe7
--- /dev/null
+++ b/challenge-high-score-tables/CountryHighScore.js
@@ -0,0 +1,19 @@
+import React from "react";
+import Scores from "./Scores";
+
+const CountryHighScore = (props) => {
+ return (
+
+
HIGH SCORES: {props.countryName}
+
+ {props.countryScores
+ .sort(props.order ? (a, b) => a.s - b.s : (a, b) => b.s - a.s)
+ .map((player, index) => {
+ return ;
+ })}
+
+
+
WORLD WIDE BEST SCORES
+
+ {worldHighScore
+ .sort((a, b) => b.s - a.s)
+ .map((player, index) => {
+ return ;
+ })}
+
+
+
+
+ 0 ? filteredData : data}
+ />
+
+ );
+}
+
+export default App;
diff --git a/challenge-job-listing/App.test.js b/challenge-job-listing/App.test.js
new file mode 100644
index 000000000..1f03afeec
--- /dev/null
+++ b/challenge-job-listing/App.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+ render();
+ const linkElement = screen.getByText(/learn react/i);
+ expect(linkElement).toBeInTheDocument();
+});
diff --git a/challenge-job-listing/Filters.js b/challenge-job-listing/Filters.js
new file mode 100644
index 000000000..cdfb56d9c
--- /dev/null
+++ b/challenge-job-listing/Filters.js
@@ -0,0 +1,43 @@
+import React from "react";
+
+const Filters = (props) => {
+ const onClickClear = () => {
+ props.setFilters([]);
+ };
+
+ const onClickDelete = (index) => {
+ props.setFilters((prevState) =>
+ prevState.filter((item, index1) => index !== index1)
+ );
+ };
+
+ return props.filters.length > 0 ? (
+
+
+ {props.filters.map((item, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{props.item.company}
+ {props.item.new ?
NEW!
: ""}
+ {props.item.featured ?
FEATURED
: ""}
+
+
{props.item.position}
+
+
{props.item.postedAt}
+
+
{props.item.location}
+
+
+
+
+
+
+
+ {props.item.languages.map((item) => {
+ return (
+
+ );
+ })}
+
+