For each item in the currencies array, your populateCurrencies function should create an OPTION element, set its value to the item's id, set its text to the item's name, and then add the OPTION to the SELECT element

JavaScript
1 
<title>Mini App</title>

<style>
  
  body {
    background-color: white;
    margin: 15px;
  }
  
  .select{
    margin-top: 50px;
  }
  
  .conversion {
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 0px;
    margin-right: 0px;
  }
  
  .btn {
    padding: 15px;
  }
  
</style>

<h2>GanDollarz</h2>

<div class= "select-currency select">
  <select class= "select-text">
    <option disabled selected>Choose currency</option>
  </select>
</div>

<button type= "button" class= "btn">Convert in Naira</button>

<div class= "conversion mdc-elevation--z3"></div>

<div class= "messages"></div>

<script>
  
  const currencies = [{
    id: 'USD', name: 'US Dollars'
  }, {
    id: 'UGX', name: 'Ugandan Shillings'
  }, {
    id: 'KES', name: 'Kenyan Shillings'
  }, {
    id: 'GHS', name: 'Ghanian Cedi'
  }, {
    id: 'ZAR', name: 'South African Rand'
  }];
  
  const apiBase = 'https://free.currencyconverterapi.com/api/v6/';
  const api = (currency) => `
    ${apiBase}convert?q=${currency}_NGN&compact=ultra
  `;
  
  const toast = (msg) => {
    const toastr = document.querySelector('.messages');
    if(!toastr) return;
    
    toastr.textContent = msg;
    if(!toastr.classList.contains('on')) {
      toastr.classList.add('on');
    }
  };
  
  const doneToasting = () => {
    const toastr = document.querySelector('.messages');
    if(!toastr) return;
    
    toastr.textContent = '';
    toastr.classList.remove('on');
  };
  
  const conversionSucceeded = (apiResponse) => {
    if(!apiResponse) {
      toast(`nothing to display ...`);
      return;
    }
    
    const [value] = Object.values(apiResponse)
    
    const btn = document.querySelector('button');
    btn.removeAttribute('disabled');
    
    const display = document.querySelector('.conversion');
    const formatter = new Intl.NumberFormat(
      'en-NG', { style: 'currency', currency: 'NGN' }
    );
    
    display.textContent = formatter.format(value);
    doneToasting();
  };
  
  // declare populateCurrencies here      
  
  const getSelectedCurrency = () => {
    // here, determine and return the selected value 
    // of the SELECT element
  };
        
  const convert = (event) => {
    toast(`preparing to convert ...`);
    
    const btn = event ? 
          event.target : document.querySelector('button');
    
    const selected = getSelectedCurrency();
    
    if(!selected || selected.trim() === '' 
       || !currencies.map(c => c.id).includes(selected)) return;
    
    btn.setAttribute('disabled', 'disabled');
    toast(`converting ...`);
    
    const endpoint = api(selected);
    
    // make a GET fetch call to the endpoint
    // variable declared above, convert the response to JSON,
    // then call conversionSucceeded and pass the JSON data to it
    
  };
 
  let const populateCurrencies = (id, name) => {};
  
  const startApp = () => {
    // call populateCurrencies here
    
    // add a click listener to the button here
  };

  startApp();
</script>
2

This is unclear. What are you asking?

3

With the above code sir.

what i want to do is to make the function populateCurrencies create an OPTION element, set its value to the item’s id, set its text to the item’s name, and then add the OPTION to the SELECT element.

In the script tag, i have declared the populateCurrencies, i’m confused on how to call it in the StartApp function.

Thank you sir

5

Thank you very much for your reply sir, i’m so much grateful.

I called the function inside the StartApp just like this:

const startApp = () => {
// call populateCurrencies here
populateCurrencies();
// add a click listener to the button here
};
But the App i was trying to build disappeared and the screen went blank.
That was the reason i reached out sir!