Made the languageSelect flexible and added countrySelect

index.html

@@ -38,10 +38,11 @@
     <div class="form-group">
       <select id="languageSelect" class="form-control">
         <option value="">All Languages</option>
-        <option value="en">English</option>
+      </select>
-        <option value="es">Spanish</option>
+    </div>
-        <option value="fr">French</option>
+    <div class="form-group">
-        <option value="de">German</option>
+      <select id="countrySelect" class="form-control">
+        <option value="">All Countries</option>
       </select>
     </div>
     <div class="form-group">

script.js

@@ -16,31 +16,92 @@ function configureDropdowns() {
   const apiSelection = document.getElementById('apiSelect').value;
   const sourceSelectContainer = document.getElementById('sourceSelectContainer');
   const languageSelectContainer = document.getElementById('languageSelect').parentElement;
+  const countrySelectContainer = document.getElementById('countrySelect').parentElement;
 
   if (apiSelection === 'currents') {
     sourceSelectContainer.style.display = 'block';
     languageSelectContainer.style.display = 'block';
+    countrySelectContainer.style.display = 'block';
+
+    fetchLanguages(); // Fetch and populate languages
+    fetchCountries(); // Fetch and populate countries
   } else if (apiSelection === 'nyt') {
     sourceSelectContainer.style.display = 'none';
     languageSelectContainer.style.display = 'none';
+    countrySelectContainer.style.display = 'none';
   }
 }
 
+// Fetch available languages from the Currents API
+function fetchLanguages() {
+  const apiKey = 'b2uZWPY42BaUWN4Luaj_fbjJR6y7idTudew9UcpSbzr2D2VO';
+  const url = `https://api.currentsapi.services/v1/available/languages?apiKey=${apiKey}`;
+
+  fetch(url)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Network response was not ok: ${response.statusText} (${response.status})`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      const languageSelect = document.getElementById('languageSelect');
+      languageSelect.innerHTML = '<option value="">All Languages</option>'; // Reset languages dropdown
+
+      // Loop through the language object
+      for (const [language, code] of Object.entries(data.languages)) {
+        const option = document.createElement('option');
+        option.value = code; // Set the value to the language code
+        option.textContent = language; // Display the full language name
+        languageSelect.appendChild(option);
+      }
+    })
+    .catch(error => console.error('Error fetching languages:', error));
+}
+
+// Fetch available countries from the Currents API
+function fetchCountries() {
+  const apiKey = 'b2uZWPY42BaUWN4Luaj_fbjJR6y7idTudew9UcpSbzr2D2VO';
+  const url = `https://api.currentsapi.services/v1/available/regions?apiKey=${apiKey}`; // New API link for regions
+
+  fetch(url)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Network response was not ok: ${response.statusText} (${response.status})`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      const countrySelect = document.getElementById('countrySelect');
+      countrySelect.innerHTML = '<option value="">All Countries</option>'; // Reset countries dropdown
+
+      // Loop through the regions object
+      for (const [country, code] of Object.entries(data.regions)) {
+        const option = document.createElement('option');
+        option.value = code; // Set the value to the country code
+        option.textContent = country; // Display the full country name
+        countrySelect.appendChild(option);
+      }
+    })
+    .catch(error => console.error('Error fetching countries:', error));
+}
+
 function fetchNewsArticles() {
   const query = document.getElementById('searchInput').value;
   const topic = document.getElementById('topicSelect').value;
   const apiSelection = document.getElementById('apiSelect').value;
   const language = document.getElementById('languageSelect').value;
+  const region = document.getElementById('countrySelect').value; // Get selected region
 
   if (apiSelection === 'currents') {
     const source = document.getElementById('sourceSelect').value;
-    fetchFromCurrentsAPI(query, source, topic, language);
+    fetchFromCurrentsAPI(query, source, topic, language, region); // Pass region filter
   } else if (apiSelection === 'nyt') {
     fetchFromNYTAPI(query, topic);
   }
 }
 
-function fetchFromCurrentsAPI(query, source, topic, language) {
+function fetchFromCurrentsAPI(query, source, topic, language, region) {
   const apiKey = 'b2uZWPY42BaUWN4Luaj_fbjJR6y7idTudew9UcpSbzr2D2VO';
   let url = `https://api.currentsapi.services/v1/search?apiKey=${apiKey}`;
 
@@ -56,6 +117,9 @@ function fetchFromCurrentsAPI(query, source, topic, language) {
   if (language) {
     url += `&language=${language}`;
   }
+  if (region) {
+    url += `&country=${region}`; // Add region to the query if selected
+  }
 
   fetch(url)
     .then(response => {