diff --git a/index.html b/index.html index 0c589ec..039ec17 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,32 @@ - - - - - Vite + React - - -
- - - + + + + + + + + + + + + + + + + + + + + + + Countries Info + + + +
+ + + + \ No newline at end of file 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 177580c..e1b2ffd 100644 --- 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 -
Country
+
+ + + +
+

{countryData.countryName}

+ +
+
) } - -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..1332879 --- /dev/null +++ b/src/components/Filters.jsx @@ -0,0 +1,29 @@ +import React from "react"; + +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 new file mode 100644 index 0000000..c67a35c --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import { ThemeToggle } from "./ThemeToggle"; + +export const Header = () => { + return ( +
+
+ +

Where in the world?

+ +
+ +
+ ) +} + + + + 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/ThemeToggle.jsx b/src/components/ThemeToggle.jsx new file mode 100644 index 0000000..00e3a9b --- /dev/null +++ b/src/components/ThemeToggle.jsx @@ -0,0 +1,26 @@ +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/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 507e0c5..c26937c 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,12 +1,89 @@ import React from "react"; +import {Header} from "../components/Header"; +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()=>{ + 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); + } + + return ( - // TODO: Home page - // Render Country component (components/Country.jsx) for each country - // Take data from (assets/CountriesData.json) -
Home
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+ {countries.map((countryData) => ( + openModal(countryData)} + /> + ))} +
+
+
+ {selectedCountry&& ( + <> + {console.log("Modal is rendering for:", selectedCountry)} + + + )} + +
); }; export default Home; +