<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>*,
*:after,
*:before {
margin: 0;
padding: 0;
}
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
img {
width: 100%;
}
:root {
--bg: hsl(0, 0%, 98%);
--bg-offset: hsl(0, 0%, 100%);
--text: hsl(200, 15%, 8%);
--gray: hsl(0, 0%, 52%);
--border: rgba(0, 0, 0, 0.1);
}
ul,
ol {
list-style: none;
}
body {
background: var(--bg);
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
}
.wrapper {
width: 96%;
max-width: 1140px;
margin: 0 auto;
}
.wrapper-inner {
max-width: 600px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.card-grid {
margin: 2em 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 48px;
}
.card {
background-color: var(--bg-offset);
padding: 0px;
box-shadow: 0px 2px 4px var(--border);
transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card:hover {
transform: scale(1.1);
}
.card:hover .card-content h2 {
display: block;
-webkit-line-clamp: none;
-webkit-box-orient: none;
overflow: visible;
}
.card-image {
max-height: 150px;
overflow: hidden;
}
.card-image img {
margin-top: -13px;
min-height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.card-content {
padding: 32px 15px;
}
.card-content h2 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-list {
margin-top: 16px;
}
.card-list li {
color: var(--text);
margin-top: 8px;
}
.card-list li span {
color: var(--gray);
}
/* search input */
.search-wrapper {
margin: 48px 0;
display: flex;
justify-content: space-between;
}
@media (max-width: 375px) {
.search-input {
width: 100%;
}
.search-wrapper {
justify-content: start;
flex-wrap: wrap;
}
.select {
margin-top: 3.5em;
}
}
.search-input {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xNS44NTMgMTYuNTZjLTEuNjgzIDEuNTE3LTMuOTExIDIuNDQtNi4zNTMgMi40NC01LjI0MyAwLTkuNS00LjI1Ny05LjUtOS41czQuMjU3LTkuNSA5LjUtOS41IDkuNSA0LjI1NyA5LjUgOS41YzAgMi40NDItLjkyMyA0LjY3LTIuNDQgNi4zNTNsNy40NCA3LjQ0LS43MDcuNzA3LTcuNDQtNy40NHptLTYuMzUzLTE1LjU2YzQuNjkxIDAgOC41IDMuODA5IDguNSA4LjVzLTMuODA5IDguNS04LjUgOC41LTguNS0zLjgwOS04LjUtOC41IDMuODA5LTguNSA4LjUtOC41eiIvPjwvc3ZnPg==");
background-color: var(--bg-offset);
background-size: 16px 16px;
background-position: left 10px center;
background-repeat: no-repeat;
padding: 1.4em 2em;
padding-left: 2.7em;
border: 1px solid var(--border);
color: var(--gray);
box-shadow: 0px 4px 6px var(--border);
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.search-input:hover {
box-shadow: 0px 0px 0px var(--border);
}
/* select from moderncss.dev */
select {
appearance: none !important;
outline: none;
background-color: var(--bg-offset);
border-radius: 0.25em;
border-width: 1px;
border-style: solid;
border-color: var(--border);
padding: 1.4em 2em 1.4em 1em;
margin: 0;
margin-right: 1em;
width: 100%;
font-family: inherit;
font-size: inherit;
cursor: inherit;
line-height: inherit;
width: 100%;
color: var(--gray);
}
.select {
min-width: 15ch;
max-width: 30ch;
cursor: pointer;
line-height: 1.1;
background-color: transparent;
display: grid;
grid-template-areas: "select";
align-items: center;
position: relative;
box-shadow: 0px 4px 6px var(--border);
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.select:hover {
box-shadow: 0px 0px 0px var(--border);
}
.select::after {
content: "";
display: block;
width: 0.8em;
height: 0.5em;
background-color: var(--text);
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
justify-self: end;
margin-right: 1em;
}
select,
.select:after {
grid-area: select;
}
select:focus + .focus {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 2px solid var(--text);
border-radius: inherit;
}
button {
display: block;
margin-top: 2rem;
margin-bottom: 3rem;
font-size: 1.4rem;
padding: 12px 32px;
margin-left: auto;
margin-right: auto;
border-radius: 40px;
background-color: #00bb00;
border: 1px solid #00aa00;
color: #fff;
cursor: pointer;
}
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { useState, useEffect } from "https://cdn.skypack.dev/react";
// Note: the empty deps array [] means
// this useEffect will run once
function App() {
const [error, setError] = useState(null);
const [loaded, setLoaded] = useState(false);
const [items, setItems] = useState([]);
const [query, setQuery] = useState("");
useEffect(() => {
// const request_headers = new Headers();
// const api_key = null;
// request_headers.append("Authorization", `Bearer ${api_key}`);
// request_headers.append("Content-Type", "application/json");
// const request_options = {
// method: "GET",
// headers: request_headers
// };
fetch(
"https://raw.githubusercontent.com/iamspruce/search-filter-painate-reactjs/main/data/countries.json"
)
.then((res) => res.json())
.then(
(result) => {
setLoaded(true);
setItems(result);
console.log(result);
},
(error) => {
setLoaded(true);
setError(error);
}
);
}, []);
const data = Object.values(items);
const search_parameters = Object.keys(Object.assign({}, ...data));
function search(items) {
return items.filter((item) =>
search_parameters.some((parameter) =>
item[parameter].toString().toLowerCase().includes(query)
)
);
}
if (error) {
return <>{error.message}</>;
} else if (!loaded) {
return <>loading...</>;
} else {
return (
<div className="wrapper">
<div className="search-wrapper">
<label htmlFor="search-form">
<input
type="search"
name="search-form"
id="search-form"
className="search-input"
placeholder="Search for..."
onChange={(e) => setQuery(e.target.value)}
/>
<span className="sr-only">Search countries here</span>
</label>
</div>
<ul className="card-grid">
{search(data).map((item) => (
<li key={item.alpha3Code}>
<article className="card">
<div className="card-image">
<img
src={item.flag.large}
alt={item.name}
/>
</div>
<div className="card-content">
<h2 className="card-name">{item.name}</h2>
<ol className="card-list">
<li>
population:{" "}
<span>{item.population}</span>
</li>
<li>
Region: <span>{item.region}</span>
</li>
<li>
Capital: <span>{item.capital}</span>
</li>
</ol>
</div>
</article>
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.