Populate currencies

JavaScript
1 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <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:20px}    </style>
  </head>
  <body>
    <h2>Currency Converter</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
        
      };
      
      const startApp = () => {
        // call populateCurrencies here
        
        // add a click listener to the button here
      };

      startApp();
    </script>
  </body>
</html>
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

Do you have a question?

4

How can I populate currencies please?

5

This isn’t a “do your homework for you” site. We usually like to see what you’ve tried. But I’ll try to steer you in the right direction.

You ask “How can I populate currencies please?”.

Well, you should create a function for that. The file tells you where to do it, with the line:

// declare populateCurrencies here

You should create a function called populateCurrencies. In that function you should get a selector for that selection node (do it in this function or globally). Do you know how to do that? Something similar is done with the line:

const toastr = document.querySelector('.messages');

There it gets a “pointer” that points to that element in the DOM. You need to do that for the select element.

Then you need to map through the currencies array. You can do this with the JS array prototype map method or with just a for loop. In that loop you need to take each array element and use the information to create an HTML node of type option and append that to the select node.

Then, in your startApp function, you need to call the populateCurrencies function that you just created. The startApp function is called at the bottom of the JS so that will cause it to run.

If something in that doesn’t makes sense, let us know. If you try it and get stuck, let us know. But please don’t ask us to do it for you. We’re happy to help you figure it out, but you’ll learn a lot more if you struggle with it. If you ask a question, please keep it small and specific, show us what you’ve tried, and tell us what you want it to do.

Let us know if you get stuck.

6

Thank you very much sir. Let me try it again