Country-App-0.1

KMYeaserArafat · Aug 4, 2024 · e70e6ae · e70e6ae
1 parent caae869
commit e70e6ae
Show file tree

Hide file tree

Showing 13 changed files with 212 additions and 75 deletions.
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,8 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: rgb(82, 77, 77);
+}
diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,14 @@
-.App {
-  text-align: center;
-}
-
-.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;
+#header-div{
+    background-color: rgb(28, 27, 27);
+    padding: 20px;
+    margin-bottom: 20px;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+#heading-title{
+    color: aliceblue;
+    font-size: 30px;
+    margin-left: 6%;
+    display: inline-block;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,11 @@
-import logo from './logo.svg';
+import React from "react";
+import Countries from "./components/Countries";
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+       <Countries/>
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Card.css b/src/components/Card.css
@@ -0,0 +1,54 @@
+.card {
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 16px;
+    text-align: center;
+    width: 600px;
+    height: 380px; 
+    background-color: rgb(40, 38, 38);
+    margin : 10px;
+    border-color: rgba(0, 0, 0, 0);
+  }
+
+  .card:hover{
+    box-shadow: 10px 10px 50px black;
+  }
+
+  .card-img {
+    margin-top: 20px;
+    width: 450px;
+    height: 250px;
+  }
+
+  .card-title {
+    margin-top: 16px;
+    font-size: 1.5em;
+    margin-bottom: 10px;
+  }
+
+
+.cardFrame{
+  display: inline-block;
+  margin-left: 5%;
+}
+
+.card-title{
+  color: aquamarine;
+  font-size: 25px;
+  font-family:'Times New Roman', Times, serif; 
+}
+
+#btnDelete{
+  width: 450px;
+  font-size: 20px;
+  background-color: red;
+  color: yellow; 
+  padding: 10px;
+  font-weight: bold;
+  border-radius: 20px;
+}
+
+#btnDelete:hover{
+  box-shadow: 5px 5px 1000px 20px red;
+}
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import './Card.css';
+
+const Card = ({ flag, countryName,onRemoveCountry}) => {
+
+  const deleteHandler=(name)=>{
+    onRemoveCountry(name);
+  }
+
+  return (
+    <div class="cardFrame">
+       <div class="card">
+        <img src={flag} alt="Country" class="card-img" />
+        <h2 className="card-title">{countryName}</h2>
+        <button id='btnDelete' onClick={()=>{
+          deleteHandler(countryName)
+        }}>Delete</button>
+      </div>
+    </div>
+  );
+}
+
+export default Card;
diff --git a/src/components/Countries.js b/src/components/Countries.js
@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import Card from './Card';
+import Search from './Search';
+
+const Countries = () => {
+  const [isLoading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [countries, setCountries] = useState([]);
+  const [filterCountries, setFilterCountries] = useState(countries); 
+
+  const url = "https://restcountries.com/v3.1/all";
+
+  const FetchData = async (url) => {
+    setLoading(true);
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      setCountries(data);
+      setFilterCountries(data); 
+      setLoading(false);
+      setError(null);
+      console.log(data);
+    } catch (err) {
+      setError(err.message);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    FetchData(url);
+  }, []);
+
+  const loadingMessage = <h2>Data is loading...</h2>;
+  const errorMessage = <h2>{error}</h2>;
+
+  const removeHandler=(name)=>{
+    const filter = filterCountries.filter((country)=> country.name.common !== name);
+    setFilterCountries(filter); 
+  }
+
+  const searchHandler = (searchData) =>{
+    let value = searchData.toLowerCase();
+    const newCountries = countries.filter((country)=>{
+      const countryName = country.name.common.toLowerCase();
+      return countryName.startsWith(value); 
+    }); 
+    setFilterCountries(newCountries)
+  };
+
+  return (
+    <div>
+      <div id="header-div">
+        <h1 id="heading-title">Where is your Country?</h1>
+        <Search onSearch={searchHandler}/>
+        </div>
+        <div>
+      {isLoading && loadingMessage}
+      {error && errorMessage}
+      {filterCountries.map((countriesData, index) => (
+        <Card
+          key={index}
+          flag={countriesData.flags.png}
+          countryName={countriesData.name.common}
+          onRemoveCountry={removeHandler}
+        />
+      ))}
+    </div>
+    </div>
+
+  );
+};
+
+export default Countries;
diff --git a/src/components/Search.css b/src/components/Search.css
@@ -0,0 +1,21 @@
+
+
+#searchDiv{
+    display: inline-block;
+    margin-left: 40%;
+}
+
+#searchBox{
+    font-size: 20px;
+    background-color: rgba(126, 125, 125, 0.364);
+    width: 370px;
+    color: rgb(197, 195, 192);
+    border-radius: 20px;
+    border-color: antiquewhite;
+    padding: 3px;
+    margin-top: 10px;
+}
+
+#search-title{
+    color: antiquewhite;
+}
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import './Search.css';
+
+const Search = ({onSearch}) => {
+
+  const searchHandler = (e) =>{
+     onSearch(e.target.value); 
+  }
+
+  return (
+    <div id="searchDiv">
+        <h1 id='search-title'>Search Country as Name : </h1>
+       <input type='text' id="searchBox" onChange={searchHandler} />
+    </div>
+  )
+}
+
+export default Search
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
@@ -11,7 +11,4 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg