ColmanDevClubORG · lianhersh · Dec 24, 2024 · Dec 29, 2024 · Jan 5, 2025 · Jan 5, 2025
diff --git a/index.html b/index.html
@@ -4,7 +4,17 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet" />
+    <!-- Fontawesome Library -->
+    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css" />
+    <!-- Shared CSS Styles File -->
+    <link rel="stylesheet" href="./css/common.css" />
+    <!-- Page Custom CSS File -->
+    <link rel="stylesheet" href="./css/main.css" />
+    <title>Countries Info</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -2,7 +2,8 @@ import "../src/assets/css/common.css";
 import "../src/assets/css/details.css";
 import "../src/assets/css/main.css";
 import "../src/assets/scss/common.scss";
-import Home from "./pages/Home";
+import { Home } from "./pages/Home";
+
 
 function App() {
     return (

diff --git a/src/components/Country.jsx b/src/components/Country.jsx
@@ -1,10 +1,32 @@
 import React from 'react'
 
-const Country = () => {
+export const Country = ({ countryData ,onClick }) => {
   return (
-    // TODO: Country component
-    <div>Country</div>
-  )
-}
+  <div className='country' onClick={onClick}>
+
+    <img src={countryData.flag} className='country-flag'></img>
+
+    <div className='country-info'>
+      <h2 className='country-title'>{countryData.countryName}</h2>
+      <ul className='country-brief'>
+
+        <li>
+          <strong>Population: </strong>
+          <span className='country-population'>{countryData.population}</span>
+        </li>
 
-export default Country
+        <li>
+        <strong>region: </strong>
+        <span className='country-region'>{countryData.region}</span>
+        </li>
+
+        <li>
+        <strong>capital: </strong>
+        <span className='country-capital'>{countryData.capital}</span>
+        </li>
+
+      </ul>
+    </div>
+  </div>
+  )
+}
diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export const Filter = () => {
+    return (
+            <div className="container">
+                <div className="search-wrapper">
+                    <i className="fa-regular fa-magnifying-glass search-icon"></i>
+                    <input type="text" className="search-input" placeholder="Search for a country..." />
+                </div>
+                <div className="dropdown-wrapper">
+                    <div className="dropdown-header flex flex-jc-sb flex-ai-c">
+                        <span>Filter by Region</span>
+                        <i className="fa-regular fa-chevron-down icon"></i>
+                    </div>
+                    <div className="dropdown-body">
+                        <ul>
+                            <li data-region="all">All</li>
+                            <li data-region="africa">Africa</li>
+                            <li data-region="america">America</li>
+                            <li data-region="asia">Asia</li>
+                            <li data-region="europe">Europe</li>
+                            <li data-region="oceania">Oceania</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+    )
+
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { ThemeToggle } from "./ThemeToggle";
+
+export const Header = () => {
+    return (
+            <div className="container flex flex-jc-sb flex-ai-c">
+                <div className="logo">
+                    <a href="Home.jsx">
+                        <h1>Where in the world?</h1>
+                    </a>
+                </div>
+                <ThemeToggle></ThemeToggle>
+            </div>
+    )
+}
diff --git a/src/components/Modal.css b/src/components/Modal.css
@@ -0,0 +1,115 @@
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; 
+}
+
+.modal-content {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px 30px;
+    width: 90%;
+    height: 90vh;
+    max-width: 500px; 
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
+    animation: fadeIn 0.3s ease-out; 
+}
+
+.country-flag img {
+    max-width: 100%;
+    height: 250px;
+    border-radius: 5px;
+    margin-right: 15px;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.813); 
+
+}
+
+.country-flag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.country-info h1 {
+    font-size: 30px;
+    margin-top: -15px;
+    color: #333;
+    margin-bottom: 30px;
+    text-align: center;
+
+}
+
+.country-info ul {
+    list-style: none;
+    padding: 0;
+}
+
+.country-info li {
+    margin: 8px 0;
+    font-size: 16px;
+    color: #555;
+}
+
+.country-info li strong {
+    color: #333;
+}
+
+.close-button {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: #999;
+    transition: color 0.3s ease;
+}
+
+.close-button:hover {
+    color: #333;
+}
+
+/* אנימציות */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+
+
+
+ /* design for dark mode  */
+
+
+.dark-theme .modal-overlay {
+    background-color: #5757577d;
+}
+
+.dark-theme .modal-content {
+    background-color: #202c37;
+    color: #f5f5f5; 
+    border: 1px solid #444; 
+}
+
+.dark-theme .close-button {
+    color: #f5f5f5;
+}
+
+.dark-theme .close-button:hover {
+    color: #ddd;
+}
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import "./modal.css";
+
+
+
+export const Modal = ({ countryData, onClose }) => {
+    if (!countryData) return null;
+
+    const { countryName, flag, region, population, capital } = countryData;
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                {/* <button class="close-button" onclick="closeModal()">X</button> */}
+                <div className="country-flag">
+                    <img src={flag} alt={`${countryName} flag`} />
+                </div>
+                <div className="country-info">
+                    <h1>{countryName}</h1>
+                    <ul>
+                        <li><strong>Population: </strong>{population}</li>
+                        <li><strong>Region: </strong>{region}</li>
+                        <li><strong>Capital: </strong>{capital}</li>
+
+                    </ul>
+                </div>
+
+            </div>
+        </div>
+    )
+
+
+}
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useState } from "react";
+
+export const ThemeToggle = () => {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const toggleTheme = () => {
+        setIsDarkMode(!isDarkMode)
+        document.body.classList.toggle("dark-theme", isDarkMode);
+    }
+    return (
+        <button
+         type="button" 
+         aria-label="Theme Switcher Button" 
+         className="theme-toggle flex flex-jc-sb flex-ai-c" 
+         onClick={toggleTheme}>
+
+
+        <i className={`fa-${isDarkMode ? "solid" : "regular"} fa-moon theme-icon`}></i>
+        <span className="theme-text">{isDarkMode ? "Light Mode" : "Dark Mode"}</span>
+ </button >
+    )
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,12 +1,87 @@
 import React from "react";
+import {Header} from "../components/Header";
+import { Filter } from "../components/Filter";
+import { Country } from "../components/Country";
+import { useState } from "react";
+import { useEffect } from "react";
+import { Modal } from "../components/Modal";
+
+export const Home = () => {
+
+    const [countries,setCountries]=useState([]);
+    const [selectedCountry,setSelectedCountry]=useState(null);
+
+    useEffect(()=>{
+        const fetchCountries=async()=>{
+            try{
+                const response=await fetch("https://restcountries.com/v3.1/all");
+                const data= await response.json();
+
+                console.log("data fetched");
+
+                const filteredData=data.map((country)=>({
+                    countryName: country.name.common,
+                    population: country.population,
+                    region: country.region,
+                    capital: country.capital ? country.capital[0] :"N/A",
+                    flag: country.flags.svg,
+                }));
+
+                console.log("filtered data",filteredData);
+
+                setCountries(filteredData);
+            }catch (error){
+                console.error("Error fetching countries:", error);
+            }
+        };
+        fetchCountries();
+
+    },[]);
+
+    const openModal=(country)=>{
+        console.log('Opening modal for:', country);
+        setSelectedCountry(country);
+    }
+    const closeModal=()=>{
+        setSelectedCountry(null);
+    }
+
 
-const Home = () => {
     return (
-        // TODO: Home page
-        // Render Country component (components/Country.jsx) for each country
-        // Take data from (assets/CountriesData.json)
-        <div>Home</div>
+
+        <div>
+
+            <header className="header">
+                <Header></Header>
+            </header>
+
+            <section className="filters">
+                <Filter></Filter>
+            </section>
+
+            <div className="main">
+                <div className="container">
+                    <div className="countries-grid">
+                        {countries.map((countryData) => (
+                            <Country
+                            countryData={countryData}
+                            key={countryData.countryName}    
+                            onClick={()=>openModal(countryData)}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+            {selectedCountry&& (
+                <>
+                {console.log("Modal is rendering for:", selectedCountry)}
+                <Modal countryData={selectedCountry} onClose={closeModal}/>
+                </>
+            )}
+
+        </div>
     );
 };
 
-export default Home;
+
+