From 53573aa87f061d7c033107d5b88db8b1eed9a20c Mon Sep 17 00:00:00 2001 From: yumeangelica <74900808+yumeangelica@users.noreply.github.com> Date: Wed, 15 May 2024 16:13:30 +0300 Subject: [PATCH 1/2] move indicator options logic from HTML to JavaScript --- index.html | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 5ae2533..8807f3a 100755 --- a/index.html +++ b/index.html @@ -16,31 +16,16 @@
-
-

Global Population Charts

-
- Source Code -
+
+

Global Population Charts

+ Source Code
Enter Three-Letter Country Code (e.g., JPN). Find codes here
Select Indicator from the Drop-Down List
- +
From c3d1f52501b95b9982c64194df7d08a1d7729dac Mon Sep 17 00:00:00 2001 From: yumeangelica <74900808+yumeangelica@users.noreply.github.com> Date: Wed, 15 May 2024 16:14:03 +0300 Subject: [PATCH 2/2] added logic to dynamically generate indicator options in javascript --- app.js | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/app.js b/app.js index cca513f..ccf380d 100755 --- 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'; -} \ No newline at end of file +}