functional completed

css/main.css

@@ -135,6 +135,10 @@
   background-color: #f2f2f2;
 }
 
+.filters .dropdown-body.show {
+  display: block ;
+}
+
 .filters .dropdown-body li:last-child {
   margin-bottom: 0;
 }

details.html

@@ -69,6 +69,7 @@ <h1>Where in the world?</h1>
         </a>
       </div>
     </div>
+
     <main class="main">
       <div class="container">
         <section class="country-details"></section>

index.html

@@ -88,7 +88,21 @@ <h1>Where in the world?</h1>
     <main class="main">
       <div class="container">
         <section class="countries-grid">
-          <a
+
+        </section>
+      </div>
+    </main>
+    <script src="./js/script.js"></script>
+    <script src="./js/common.js"></script>
+  </body>
+</html>
+
+
+
+
+
+<!-- 
+<a
             href="#"
             class="country scale-effect"
             data-country-name="Afghanistan"
@@ -150,9 +164,4 @@ <h2 class="country-title">Belize</h2>
                 <li><strong>capital: </strong>Belmopan</li>
               </ul>
             </div>
-          </a>
-        </section>
-      </div>
-    </main>
-  </body>
-</html>
+          </a>  -->

js/common.js

@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const themeToggleButton = document.querySelector('.theme-toggle');
+    themeToggleButton.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+    });
+
+    const scrollTopButton = document.querySelector('.scroll-top');
+    scrollTopButton.addEventListener('click', () => {
+        window.scrollTo({top: 0, behavior: 'smooth'});
+    });
+});

js/details.js

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const params = new URLSearchParams(window.location.search);
+    const countryName = decodeURIComponent(params.get('country'));
+    const loader = document.querySelector('.loader'); 
+
+    fetch('CountriesData.json')
+        .then(response => response.json())
+        .then(countries => {
+            const country = countries.find(c => c.name === countryName);
+            if (!country) {
+                document.querySelector('.country-details').innerHTML = `<p>Country not found.</p>`;
+                loader.classList.add('close');  
+                return;
+            }
+
+            document.querySelector('.country-details').innerHTML = `
+                <div class="country-flag">
+                    <img src="${country.flag}" alt="Flag of ${country.name}" />
+                </div>
+                <div class="country-info">
+                    <h1>${country.name}</h1>
+                    <ul>
+                        <li><strong>Population: </strong>${country.population.toLocaleString()}</li>
+                        <li><strong>Region: </strong>${country.region}</li>
+                        <li><strong>Capital: </strong>${country.capital || 'N/A'}</li>
+                    </ul>
+                </div>
+            `;
+            loader.classList.add('close');  
+        })
+        .catch(error => {
+            console.error('Error loading the country details:', error);
+            loader.classList.add('close');  
+        });
+});

js/script.js

@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const url = 'CountriesData.json';
+    let countriesData = [];
+
+    fetch(url)
+        .then(response => response.json())
+        .then(countries => {
+            countriesData = countries; 
+            displayCountries(countriesData);
+        })
+        .catch(error => console.error('Error loading the countries data:', error));
+
+    function displayCountries(data) {
+        const countriesGrid = document.querySelector('.countries-grid');
+        countriesGrid.innerHTML = ''; 
+
+        data.forEach(country => {
+            const countryElement = document.createElement('a');
+            countryElement.href = `details.html?country=${encodeURIComponent(country.name)}`; 
+            countryElement.className = 'country scale-effect';
+            countryElement.innerHTML = `
+                <div class="country-flag">
+                    <img src="${country.flag}" alt="Flag of ${country.name}" />
+                </div>
+                <div class="country-info">
+                    <h2 class="country-title">${country.name}</h2>
+                    <ul class="country-brief">
+                        <li><strong>Population: </strong>${country.population.toLocaleString()}</li>
+                        <li><strong>Region: </strong>${country.region}</li>
+                        <li><strong>Capital: </strong>${country.capital || 'N/A'}</li>
+                    </ul>
+                </div>
+            `;
+            countriesGrid.appendChild(countryElement);
+        });
+    }
+
+    const searchInput = document.querySelector('.search-input');
+    searchInput.addEventListener('input', function() {
+        const searchText = this.value.toLowerCase();
+        const filteredCountries = countriesData.filter(country => country.name.toLowerCase().includes(searchText));
+        displayCountries(filteredCountries);
+    });
+
+    const dropdownHeader = document.querySelector('.dropdown-header');
+    dropdownHeader.addEventListener('click', function() {
+        const wrapper = document.querySelector('.dropdown-wrapper');
+        wrapper.classList.toggle('open');
+    });
+
+    document.querySelector('.dropdown-body').addEventListener('click', function(event) {
+        if (event.target.tagName.toLowerCase() === 'li') {
+            const region = event.target.getAttribute('data-region');
+            const regionText = event.target.textContent;
+            dropdownHeader.querySelector('span').textContent = regionText; 
+            document.querySelector('.dropdown-wrapper').classList.remove('open'); 
+
+            if (region === 'all') {
+                displayCountries(countriesData);
+            } else {
+                const filteredCountries = countriesData.filter(country => country.region.toLowerCase() === region);
+                displayCountries(filteredCountries);
+            }
+        }
+    });
+});