Merge pull request #6 from yumeangelica/feat/improve-event-handling-a…

…nd-keyboard-support Feat/improve event handling and keyboard support
yumeangelica · May 15, 2024 · e20ba13 · e20ba13
2 parents cf1eb3f + 0f7377a
commit e20ba13
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 81 deletions.
diff --git a/app.js b/app.js
@@ -1,3 +1,4 @@
+// Event listener for the DOM loaded event
 document.addEventListener('DOMContentLoaded', () => {
   // Array containing the options for the indicators
   const indicatorOptions = [
@@ -17,108 +18,116 @@ document.addEventListener('DOMContentLoaded', () => {
   // Get the select element by its ID
   const indicatorSelect = document.getElementById('indicatorCode');
 
-  // Loop through each option in the array
+  // Populate the dropdown list with indicator options
   indicatorOptions.forEach(option => {
-    // Create a new option element
     const opt = document.createElement('option');
-    // Set the value of the option
     opt.value = option.value;
-    // Set the text content of the option
     opt.textContent = option.text;
-    // Append the option to the select element
     indicatorSelect.appendChild(opt);
   });
-});
 
-// Current chart instance
-let currentChart;
+  // Current chart instance
+  let currentChart;
 
-// Fetch data when render button is clicked
-document.getElementById('renderButton').addEventListener('click', fetchData);
+  // Event listener for the render button click
+  document.getElementById('renderButton').addEventListener('click', fetchData);
 
-// Country input element
-const countryInput = document.getElementById("country");
+  // Event listener for Enter key press on the entire document
+  document.addEventListener('keyup', (event) => {
+    if (event.key === 'Enter') {
+      fetchData();
+    }
+  });
 
-// Function to fetch data from the API
-async function fetchData() {
-  // Check if the country input is valid
-  if (countryInput.value.match(/^[a-zA-Z]+$/)) {
-    // Construct the URL for the API request
-    const url = `https://api.worldbank.org/v2/country/${countryInput.value}/indicator/${document.getElementById('indicatorCode').value}?format=json`;
+  // Function to fetch data from the API
+  async function fetchData() {
+    // Country input element
+    const countryInput = document.getElementById("country");
 
-    // Fetch data from the API
-    const response = await fetch(url);
+    // Validate the country code input
+    if (countryInput.value.match(/^[a-zA-Z]+$/)) {
+      const url = `https://api.worldbank.org/v2/country/${countryInput.value}/indicator/${document.getElementById('indicatorCode').value}?format=json`;
 
-    // If the response is OK, parse the data and render the chart
-    if (response.status === 200) {
-      const fetchedData = await response.json();
-      renderChart(getValues(fetchedData), getLabels(fetchedData), getCountryName(fetchedData));
+      // Fetch data from the API
+      const response = await fetch(url);
+
+      // If the response is OK, parse the data and render the chart
+      if (response.status === 200) {
+        const fetchedData = await response.json();
+        renderChart(getValues(fetchedData), getLabels(fetchedData), getCountryName(fetchedData));
+      }
+    } else {
+      alert('Input a country code');
     }
-  } else {
-    alert('Input a country code');
   }
-}
 
-// Functions to extract necessary data from the fetched data
-const getValues = (data) => data[1].sort((a, b) => a.date - b.date).map(item => item.value);
-const getLabels = (data) => data[1].sort((a, b) => a.date - b.date).map(item => item.date);
-const getCountryName = (data) => data[1][0].country.value;
+  // Extract values from the fetched data
+  const getValues = (data) => data[1].sort((a, b) => a.date - b.date).map(item => item.value);
 
-// Function to render the chart
-const renderChart = (data, labels, countryName) => {
-  // Get the context of the canvas element
-  const ctx = document.getElementById('myChart').getContext('2d');
+  // Extract labels from the fetched data
+  const getLabels = (data) => data[1].sort((a, b) => a.date - b.date).map(item => item.date);
 
-  // Destroy the current chart if it exists
-  if (currentChart) {
-    currentChart.destroy();
-  }
+  // Extract country name from the fetched data
+  const getCountryName = (data) => data[1][0].country.value;
+
+  // Function to render the chart
+  const renderChart = (data, labels, countryName) => {
+    const ctx = document.getElementById('myChart').getContext('2d');
 
-  // Create a new chart
-  currentChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: labels,
-      datasets: [{
-        label: `Population, ${countryName}`,
-        data: data,
-        borderColor: 'rgba(178, 102, 255, 1)',
-        backgroundColor: 'rgba(178, 102, 255, 0.6)',
-        hoverBackgroundColor: 'rgba(178, 102, 255, 0.8)',
-      }]
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      scales: {
-        y: {
-          beginAtZero: true,
-          ticks: {
-            color: '#50404d'
+    // Destroy the current chart if it exists
+    if (currentChart) {
+      currentChart.destroy();
+    }
+
+    // Create a new chart
+    currentChart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [{
+          label: `Population, ${countryName}`,
+          data: data,
+          borderColor: 'rgba(178, 102, 255, 1)',
+          backgroundColor: 'rgba(178, 102, 255, 0.6)',
+          hoverBackgroundColor: 'rgba(178, 102, 255, 0.8)',
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          y: {
+            beginAtZero: true,
+            ticks: {
+              color: '#50404d'
+            },
+            grid: {
+              color: 'rgba(128, 128, 128, 0.2)'
+            }
           },
-          grid: {
-            color: 'rgba(128, 128, 128, 0.2)'
+          x: {
+            ticks: {
+              color: '#50404d'
+            },
+            grid: {
+              color: 'rgba(128, 128, 128, 0.2)'
+            }
           }
         },
-        x: {
-          ticks: {
-            color: '#50404d'
-          },
-          grid: {
-            color: 'rgba(128, 128, 128, 0.2)'
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          labels: {
-            color: '#50404d'
+        plugins: {
+          legend: {
+            labels: {
+              color: '#50404d'
+            }
           }
         }
       }
-    }
-  });
+    });
+
+    // Display the chart container
+    document.getElementById('chartContainer').style.display = 'block';
+  }
 
-  // Display the chart container
-  document.getElementById('chartContainer').style.display = 'block';
-}
+  // Call the showCopyRight function from copyright.js
+  showCopyRight();
+});
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
   <script src="./copyright.js" defer></script>
 </head>
 
-<body onload="showCopyRight()">
+<body>
   <main class="footer-fixer">
     <div class="container py-5">
       <header class="mb-4 text-center">