Merge pull request #5 from yumeangelica/refactor/move-indicator-optio…

…ns-to-js Refactor/move indicator options to js
yumeangelica · May 15, 2024 · cf1eb3f · cf1eb3f
2 parents e8d31df + c3d1f52
commit cf1eb3f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 20 deletions.
diff --git a/app.js b/app.js
@@ -1,3 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Array containing the options for the indicators
+  const indicatorOptions = [
+    { value: 'SP.POP.TOTL', text: 'Population total' },
+    { value: 'SP.POP.TOTL.MA.IN', text: 'Pop. total male' },
+    { value: 'SP.POP.TOTL.FE.IN', text: 'Pop. total female' },
+    { value: 'SP.POP.65UP.FE.IN', text: 'Pop. yr.65 and above, (f)' },
+    { value: 'SP.POP.65UP.MA.IN', text: 'Pop. yr.65 and above, (m)' },
+    { value: 'SP.POP.1564.FE.IN', text: 'Pop. yr.15-64, female' },
+    { value: 'SP.POP.1564.MA.IN', text: 'Pop. yr.15-64, male' },
+    { value: 'SP.POP.0014.FE.IN', text: 'Pop. yr.0-14, female' },
+    { value: 'SP.POP.0014.MA.IN', text: 'Pop. yr.0-14, male' },
+    { value: 'SP.DYN.LE00.FE.IN', text: 'Life exp. at birth, (f)' },
+    { value: 'SP.DYN.LE00.MA.IN', text: 'Life exp. at birth, (m)' }
+  ];
+
+  // Get the select element by its ID
+  const indicatorSelect = document.getElementById('indicatorCode');
+
+  // Loop through each option in the array
+  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;
 
@@ -89,4 +121,4 @@ const renderChart = (data, labels, countryName) => {
 
   // Display the chart container
   document.getElementById('chartContainer').style.display = 'block';
-}
+}
diff --git a/index.html b/index.html
@@ -16,31 +16,16 @@
 <body onload="showCopyRight()">
   <main class="footer-fixer">
     <div class="container py-5">
-      <header class="mb-4">
-        <h1 class="text-center">Global Population Charts</h1>
-        <div class="text-center">
-          <a href="https://github.com/yumeangelica/global-population-charts" class="source-code-link">Source Code</a>
-        </div>
+      <header class="mb-4 text-center">
+        <h1>Global Population Charts</h1>
+        <a href="https://github.com/yumeangelica/global-population-charts" class="source-code-link">Source Code</a>
       </header>
       <section class="text-center">
         <h5>Enter Three-Letter Country Code <small>(e.g., JPN)</small>. Find codes <a href="https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes"
             target="_blank">here</a></h5>
         <input type="text" id="country" placeholder="Country code" maxlength="3" class="form-control mx-auto">
         <h5 class="mt-3">Select Indicator from the Drop-Down List</h5>
-        <select id="indicatorCode" class="form-select mx-auto custom-dropdown">
-          <option disabled selected value>Select chart to render</option>
-          <option value="SP.POP.TOTL">Population total</option>
-          <option value="SP.POP.TOTL.MA.IN">Pop. total male</option>
-          <option value="SP.POP.TOTL.FE.IN">Pop. total female</option>
-          <option value="SP.POP.65UP.FE.IN">Pop. yr.65 and above, (f)</option>
-          <option value="SP.POP.65UP.MA.IN">Pop. yr.65 and above, (m)</option>
-          <option value="SP.POP.1564.FE.IN">Pop. yr.15-64, female</option>
-          <option value="SP.POP.1564.MA.IN">Pop. yr.15-64, male</option>
-          <option value="SP.POP.0014.FE.IN">Pop. yr.0-14, female</option>
-          <option value="SP.POP.0014.MA.IN">Pop. yr.0-14, male</option>
-          <option value="SP.DYN.LE00.FE.IN">Life exp. at birth, (f)</option>
-          <option value="SP.DYN.LE00.MA.IN">Life exp. at birth, (m)</option>
-        </select>
+        <select id="indicatorCode" class="form-select mx-auto custom-dropdown"></select>
         <button class="btn mt-3" id="renderButton">Render Graph</button>
         <div class="chart-container mt-4" id="chartContainer">
           <canvas id="myChart"></canvas>