Hey friends, please help me out

I’m having a code challenges, am to create a currency converter page, I was suppose to fetch an API. Am a bit lost here, I don’t know to do next. please, I need help or tips on what to do next. below are my code:

<!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;
      }
    </style>
  </head>
  <body>
    <h2>Cassyblaise DanDollar</h2>
    <div class="select-currency select">
      
      <select class="select-text">
        
        <option disabled select>Choose currency</option>
      </select>
      </div>
      <button class="btn" type="submit">Convert</button>
    <div class="conversion mdc-elevation--z3">
      <div class="messages">
        
      </div>
      
    </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>

You need to create a fetch call

This is an example from

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });
1 Like

this is what I had so far and it not working out for me.

<!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;
      }
    </style>
  </head>
  <body>
    <h2>Cassyblaise DanDollar</h2>
    <div class="select-currency select">
      
      <select class="select-text">
        
        <option disabled select>Choose currency</option>
        
      </select>
      </div>
      <button class="btn" type="submit" value="convert">Convert</button>
    <div class="conversion mdc-elevation--z3">
      <div class="messages">
        
      </div>
      
    </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 populateCurrencies = document.querySelector('select-text').addEventListener(); 
      
      const getSelectedCurrency = () => {
        return document.querySelector('.disabled');
        
        // 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);
        
        fetch('currencies')
        .then((res)=> res.json())
        .then(function(data)){
              
          let endpoint = '<h2>users</h2>';
              
          data.forEach(function(currency){
          endpoint +=`
                     <ul>
                   <li>ID:${currency.id}</li>
                  <li>Name:${currency.name}</li>
                  
            </u>   
                 `;
          
   }) 
     document.querySelector('.selected').innerHTML =          conversionSucceeded;
              })
        
        // 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
        
         fetch('https://free.currencyconverterapi.com/api/v6/')
        .then((res)=> res.json())
        .then(function(data)){
              
          let endpoint = '<h2>users</h2>';
              
          data.forEach(function(currency){
          endpoint +=`
                     <ul>
                   <li>ID:${currency.id}</li>
                  <li>Name:${currency.name}</li>
                  
            </u>   
                 `;
          
   }) 
     document.querySelector('.selected').innerHTML =          conversionSucceeded;
        // add a click listener to the button here
      };

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