connect to API

src/App.jsx

@@ -4,6 +4,7 @@ import "../src/assets/css/main.css";
 import "../src/assets/scss/common.scss";
 import Home from "./pages/Home";
 
+
 function App() {
     return (
         <>

src/components/Country.jsx

@@ -1,10 +1,23 @@
-import React from 'react'
+import React from 'react';
 
-const Country = () => {
+export const Country = ({ name, flag, population, region, capital,onClick }) => {
   return (
-    // TODO: Country component
-    <div>Country</div>
-  )
-}
-
-export default Country
+    <a
+      className="country scale-effect"
+      data-country-name={name}
+      onClick={onClick}
+    >
+      <div className="country-flag">
+        <img src={flag} alt={`Flag of ${name}`} />
+      </div>
+      <div className="country-info">
+        <h2>{name}</h2>
+        <ul className="country-brief">
+          <li><strong>Population: </strong>{population}</li>
+          <li><strong>Region: </strong>{region}</li>
+          <li><strong>Capital: </strong>{capital}</li>
+        </ul>
+      </div>
+    </a>
+  );
+};

src/pages/App.css

@@ -0,0 +1,37 @@
+/* Modal styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; /* Ensures modal is on top of other content */
+  }
+
+  .modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 600px;
+    text-align: center;
+  }
+
+  button {
+    padding: 10px 15px;
+    font-size: 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+
+  button:hover {
+    background-color: #0056b3; /* Darker blue when hovering */
+  }
+

src/pages/Home.jsx

@@ -1,12 +1,87 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { Country } from "../components/Country";
+import '../pages/App.css'
 
 const Home = () => {
-    return (
-        // TODO: Home page
-        // Render Country component (components/Country.jsx) for each country
-        // Take data from (assets/CountriesData.json)
-        <div>Home</div>
+  const [countries, setCountries] = useState([]);
+  const [allCountries, setAllCountries] = useState([]);
+  const [selectedCountry, setSelectedCountry] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    const fetchCountries = async () => {
+      try {
+        const response = await fetch("https://restcountries.com/v3.1/all");
+        const data = await response.json();
+        const formattedData = data.map((country) => ({
+          name: country.name.common,
+          population: country.population,
+          region: country.region,
+          capital: country.capital ? country.capital[0] : "N/A",
+          flag: country.flags.png,
+        }));
+        setCountries(formattedData);
+        setAllCountries(formattedData);
+      } catch (error) {
+        console.error("Error fetching countries data:", error);
+      }
+    };
+    fetchCountries();
+  }, []);
+
+  const onSearch = (e) => {
+    const searchValue = e.target.value.toLowerCase();
+    const filteredData = allCountries.filter((country) =>
+      country.name.toLowerCase().includes(searchValue)
     );
+    setCountries(filteredData);
+  };
+
+  const openModal = (country) => {
+    setSelectedCountry(country);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedCountry(null);  
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search by country name..."
+        onChange={onSearch}
+      />
+      <div className="countries-grid">
+        {countries.map((country) => (
+          <Country
+            key={country.name}
+            population={country.population}
+            region={country.region}
+            name={country.name}
+            flag={country.flag}
+            capital={country.capital}
+            onClick={() => openModal(country)}
+          />
+        ))}
+      </div>
+
+      {isModalOpen && selectedCountry && (
+        <div className="modal">
+          <div className="modal-content">
+            <button onClick={closeModal}>Close</button>
+            <h2>{selectedCountry.name}</h2>
+            <p>Population: {selectedCountry.population}</p>
+            <p>Region: {selectedCountry.region}</p>
+            <p>Capital: {selectedCountry.capital}</p>
+            <img src={selectedCountry.flag} alt={selectedCountry.name} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default Home;