From a82c0cf1e9da4acd4d5d9ed8fff8138a1d1c6fff Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Tue, 24 Dec 2024 12:32:30 +0200 Subject: [PATCH 1/6] finished header component and theme toggle component --- index.html | 36 +++++++++++++++++++++++----------- src/components/Country.jsx | 3 +-- src/components/Filters.jsx | 7 +++++++ src/components/Header.jsx | 17 ++++++++++++++++ src/components/ThemeToggle.jsx | 25 +++++++++++++++++++++++ src/pages/Home.jsx | 8 +++++++- 6 files changed, 82 insertions(+), 14 deletions(-) create mode 100644 src/components/Filters.jsx create mode 100644 src/components/Header.jsx create mode 100644 src/components/ThemeToggle.jsx diff --git a/index.html b/index.html index 0c589ec..60d248a 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,27 @@ - - - - - Vite + React - - -
- - - + + + + + + + + + + + + + + + + + Countries Info + + + +
+ + + + \ No newline at end of file diff --git a/src/components/Country.jsx b/src/components/Country.jsx index 177580c..a17f993 100644 --- a/src/components/Country.jsx +++ b/src/components/Country.jsx @@ -1,10 +1,9 @@ import React from 'react' -const Country = () => { +export const Country = () => { return ( // TODO: Country component
Country
) } -export default Country \ No newline at end of file diff --git a/src/components/Filters.jsx b/src/components/Filters.jsx new file mode 100644 index 0000000..32eb787 --- /dev/null +++ b/src/components/Filters.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +export const Filters=()=>{ + return( +
+ ) +} \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..f9fbe34 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import { ThemeToggle } from "./ThemeToggle"; + +export const Header = () => { + return ( +
+
+
+ +

Where in the world?

+ +
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx new file mode 100644 index 0000000..50fd5f0 --- /dev/null +++ b/src/components/ThemeToggle.jsx @@ -0,0 +1,25 @@ +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 ( + + ) +} \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 507e0c5..d72a3fa 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,11 +1,17 @@ import React from "react"; +import {Header} from "../components/Header"; + const Home = () => { return ( // TODO: Home page // Render Country component (components/Country.jsx) for each country // Take data from (assets/CountriesData.json) -
Home
+
+ +
+ +
); }; From 1781babd7a8e635f7e4c63c82a6491b96b92a5e4 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Wed, 25 Dec 2024 15:23:30 +0200 Subject: [PATCH 2/6] finished home page --- src/components/Country.jsx | 31 +++++++++++++++++++++++++++---- src/components/Filters.jsx | 28 +++++++++++++++++++++++++--- src/components/Header.jsx | 2 -- src/pages/Home.jsx | 30 ++++++++++++++++++++++++------ 4 files changed, 76 insertions(+), 15 deletions(-) diff --git a/src/components/Country.jsx b/src/components/Country.jsx index a17f993..5c969bb 100644 --- a/src/components/Country.jsx +++ b/src/components/Country.jsx @@ -1,9 +1,32 @@ import React from 'react' -export const Country = () => { +export const Country = ({ countryData }) => { return ( - // TODO: Country component -
Country
+
+ + + +
+

{countryData.name}

+ +
+
) } - diff --git a/src/components/Filters.jsx b/src/components/Filters.jsx index 32eb787..1332879 100644 --- a/src/components/Filters.jsx +++ b/src/components/Filters.jsx @@ -1,7 +1,29 @@ import React from "react"; -export const Filters=()=>{ - return( -
+export const Filters = () => { + return ( + +
+
+ + +
+
+
+ Filter by Region + +
+
+
    +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
    • +
+
+
+
) } \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index f9fbe34..d1e94be 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -3,7 +3,6 @@ import { ThemeToggle } from "./ThemeToggle"; export const Header = () => { return ( -
@@ -12,6 +11,5 @@ export const Header = () => {
-
) } \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index d72a3fa..6c6e6fb 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,18 +1,36 @@ import React from "react"; import {Header} from "../components/Header"; +import { Filters } from "../components/Filters"; +import { Country } from "../components/Country"; +import datajson from "../assets/CountriesData.json"; const Home = () => { return ( - // TODO: Home page - // Render Country component (components/Country.jsx) for each country - // Take data from (assets/CountriesData.json) +
- -
- + +
+
+
+ +
+ +
+ +
+
+
+ {datajson.map((cardD, index) => ( + + ))} +
+
+
+
); }; export default Home; + From 66a48db7faf5700d63630a597a302091e62166ae Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Sun, 29 Dec 2024 16:48:26 +0200 Subject: [PATCH 3/6] finished home page --- src/components/Header.jsx | 6 +++++- src/components/ThemeToggle.jsx | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index d1e94be..c67a35c 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -12,4 +12,8 @@ export const Header = () => { ) -} \ No newline at end of file +} + + + + diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx index 50fd5f0..00e3a9b 100644 --- a/src/components/ThemeToggle.jsx +++ b/src/components/ThemeToggle.jsx @@ -21,5 +21,6 @@ export const ThemeToggle = () => { {isDarkMode ? "Light Mode" : "Dark Mode"} + ) } \ No newline at end of file From e0811c3e34ca021cfba697ea98284b3c7e21230e Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Wed, 1 Jan 2025 12:35:40 +0200 Subject: [PATCH 4/6] starting api --- src/pages/Home.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 6c6e6fb..6006183 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -5,6 +5,7 @@ import { Country } from "../components/Country"; import datajson from "../assets/CountriesData.json"; + const Home = () => { return ( From 5cbcd00b2a6c59d095197c8ff73d0e697ff2ede6 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Wed, 1 Jan 2025 12:57:38 +0200 Subject: [PATCH 5/6] fetched data from api successfully --- src/pages/Home.jsx | 42 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 6006183..0d6d639 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -2,11 +2,43 @@ import React from "react"; import {Header} from "../components/Header"; import { Filters } from "../components/Filters"; import { Country } from "../components/Country"; -import datajson from "../assets/CountriesData.json"; +import { useState } from "react"; +import { useEffect } from "react"; const Home = () => { + + const [countries,setCountries]=useState([]); + + 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)=>({ + name: 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(); + + },[]); + + return (
@@ -22,8 +54,12 @@ const Home = () => {
- {datajson.map((cardD, index) => ( - + {countries.map((countryData) => ( + openModal(countryData)} + /> ))}
From c527b2fe18605f969f90a81b479fee1d84b99756 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Wed, 1 Jan 2025 19:40:49 +0200 Subject: [PATCH 6/6] finished modal with css and its dark mode theme --- index.html | 5 ++ src/App.jsx | 1 + src/components/Country.jsx | 6 +- src/components/Modal.jsx | 33 +++++++++++ src/components/modal.css | 115 +++++++++++++++++++++++++++++++++++++ src/pages/Home.jsx | 20 ++++++- 6 files changed, 175 insertions(+), 5 deletions(-) create mode 100644 src/components/Modal.jsx create mode 100644 src/components/modal.css diff --git a/index.html b/index.html index 60d248a..039ec17 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,17 @@ + + + + + Countries Info diff --git a/src/App.jsx b/src/App.jsx index 2a88e41..d27cb48 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ 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"; function App() { diff --git a/src/components/Country.jsx b/src/components/Country.jsx index 5c969bb..e1b2ffd 100644 --- a/src/components/Country.jsx +++ b/src/components/Country.jsx @@ -1,13 +1,13 @@ import React from 'react' -export const Country = ({ countryData }) => { +export const Country = ({ countryData ,onClick }) => { return ( -
+
-

{countryData.name}

+

{countryData.countryName}

  • diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx new file mode 100644 index 0000000..5963138 --- /dev/null +++ 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 ( +
    +
    e.stopPropagation()}> + {/* */} +
    + {`${countryName} +
    +
    +

    {countryName}

    +
      +
    • Population: {population}
      • +
    • Region: {region}
      • +
    • Capital: {capital}
      • + +
    +
    + +
    +
    + ) + + +} \ No newline at end of file diff --git a/src/components/modal.css b/src/components/modal.css new file mode 100644 index 0000000..fa125c5 --- /dev/null +++ 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/pages/Home.jsx b/src/pages/Home.jsx index 0d6d639..c26937c 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -4,12 +4,14 @@ import { Filters } from "../components/Filters"; import { Country } from "../components/Country"; import { useState } from "react"; import { useEffect } from "react"; +import { Modal } from "../components/Modal"; const Home = () => { const [countries,setCountries]=useState([]); + const [selectedCountry,setSelectedCountry]=useState(null); useEffect(()=>{ const fetchCountries=async()=>{ @@ -20,7 +22,7 @@ const Home = () => { console.log("data fetched"); const filteredData=data.map((country)=>({ - name: country.name.common, + countryName: country.name.common, population: country.population, region: country.region, capital: country.capital ? country.capital[0] :"N/A", @@ -38,6 +40,14 @@ const Home = () => { },[]); + const openModal=(country)=>{ + console.log('Opening modal for:', country); + setSelectedCountry(country); + } + const closeModal=()=>{ + setSelectedCountry(null); + } + return ( @@ -57,13 +67,19 @@ const Home = () => { {countries.map((countryData) => ( openModal(countryData)} /> ))}
+ {selectedCountry&& ( + <> + {console.log("Modal is rendering for:", selectedCountry)} + + + )}
);