diff --git a/css/main.css b/css/main.css index f51ac8b..ac38316 100644 --- a/css/main.css +++ b/css/main.css @@ -70,9 +70,12 @@ font-weight: inherit; } + + .filters .dropdown-wrapper { position: relative; width: 230px; + } @media (min-width: 64em) { @@ -92,6 +95,7 @@ z-index: 9; } + .filters .dropdown-header, .filters .dropdown-body { position: relative; diff --git a/details.html b/details.html index b584581..f555912 100644 --- a/details.html +++ b/details.html @@ -53,6 +53,7 @@

Where in the world?

-
+
-
+
Filter by Region
-
+
  • All
  • Africa
    • @@ -154,5 +156,8 @@

    Belize

+ + + diff --git a/js/common.js b/js/common.js new file mode 100644 index 0000000..d5ef1a0 --- /dev/null +++ b/js/common.js @@ -0,0 +1,18 @@ +const themeToggleButton = document.getElementById("theme-toggle"); + +const changeBackgroundColor = () => { + // Toggle the 'Dark' class on the + document.body.classList.toggle('Dark'); + + if (document.body.classList.contains('Dark')) { + themeToggleButton.querySelector('.theme-text').textContent = 'Light Mode'; + document.body.style.backgroundColor = 'hsl(207, 26%, 17%)'; + document.querySelector('header').style.backgroundColor = 'hsl(209, 23%, 22%)'; // Dark header + document.querySelector('header').style.color = 'white'; // Light text color + } else { + themeToggleButton.querySelector('.theme-text').textContent = 'Dark Mode'; + document.body.style.backgroundColor = 'white'; // Light background + document.querySelector('header').style.backgroundColor = 'white'; // Light header + document.querySelector('header').style.color = 'black'; // Dark text color + } +}; diff --git a/js/details.js b/js/details.js new file mode 100644 index 0000000..5f27e4a --- /dev/null +++ b/js/details.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", () => { + const countryDetailsSection = document.querySelector(".country-details"); + const loader = document.querySelector(".loader"); + + // Extract country name + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get("country"); + + if (!countryName) { + countryDetailsSection.innerHTML = `

Country not specified in the query.

`; + loader.style.display = "none"; + return; + } + + fetch("./CountriesData.json") + .then((response) => response.json()) + .then((data) => { + const country = data.find((c) => c.name === countryName); + + if (!country) { + countryDetailsSection.innerHTML = `

Country details not found.

`; + return; + } + + countryDetailsSection.innerHTML = ` +
+
+ ${country.name} Flag +
+
+

${country.name}

+
    +
  • Population: ${country.population.toLocaleString()}
    • +
  • Region: ${country.region}
    • +
  • Capital: ${country.capital}
    • +
+
+
`; + }) + + loader.style.display = "none"; + }); + \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..666e782 --- /dev/null +++ b/js/index.js @@ -0,0 +1,79 @@ +const countriesGrid = document.querySelector(".countries-grid"); +const searchInput = document.querySelector(".search-input"); +const dropdownHeader = document.querySelector(".dropdown-header"); +const dropdownBody = document.querySelector(".dropdown-body"); +const dropdownItems = document.querySelectorAll(".dropdown-body ul li"); + +// Fetch data from CountriesData.json +fetch("./CountriesData.json") + .then((response) => response.json()) + .then((data) => { + renderCountries(data); + setupFilters(data); + }); + +// Function to render countries +const renderCountries = (data) => { + countriesGrid.innerHTML = ""; + data.forEach((country) => { + countriesGrid.innerHTML += ` + +
+ ${country.name} Flag +
+
+

${country.name}

+
    +
  • Population: ${country.population.toLocaleString()}
    • +
  • Region: ${country.region}
    • +
  • Capital: ${country.capital}
    • +
+
+ `; + }); +}; + + +const setupCountryLinks = (event) => { + + event.preventDefault(); // Prevent default anchor behavior + const countryName = event.currentTarget.getAttribute("data-country-name"); + window.location.href = `details.html?country=${encodeURIComponent(countryName)}`; + }; + + + + const openOptions = () => { + const dropdownWrapper = document.querySelector('.dropdown-wrapper'); + dropdownWrapper.classList.toggle('open'); + }; + + + +// Set up search and region filters +const setupFilters = (data) => { + + searchInput.addEventListener("input", (e) => { + const query = e.target.value.toLowerCase(); + const filteredData = data.filter((country) => + country.name.toLowerCase().includes(query) + ); + renderCountries(filteredData); + }); + + + // Dropdown filter + dropdownItems.forEach((item) => { + item.addEventListener("click", () => { + const region = item.getAttribute("data-region"); + const filteredData = + region === "all" + ? data + : data.filter((country) => country.region.toLowerCase() === region); + renderCountries(filteredData); + + // Close dropdown after selection + dropdownBody.classList.remove("visible"); + }); + }); +}