api_currency.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Name from API json</title>
</head>
<body>
    <h1>Currency Names and Values</h1>
	 
	 <select id="currency" onchange="change()">
         <option value="select">Select please</option>
	 </select>
	 
  <div id="currency-namess"></div>

	    <script>
		var baseCurrencyz = 'USD';
		function change() 
		{
		
              const select = document.getElementById('currency');
			    baseCurrencyz = select.options[select.selectedIndex].value;
               fetchCurrencyRates();
			   alert(`Selecting currency is : ${baseCurrencyz}`);
        };
		
        async function fetchCurrencyRates() {
            //const apiKey = 'YOUR_API_KEY'; 			
             const apiUrl = `https://v6.exchangerate-api.com/v6/8198d32f78ad10428b9e8395/latest/${baseCurrencyz}`;
             const selectElement = document.getElementById('currency');
            
			   
            try {
                const response = await fetch(apiUrl);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                console.log(data); // Log the entire response for debugging

                const rates = data.conversion_rates;
                let htmlContent = '';
                for (const [currency, rate] of Object.entries(rates)) {
                    htmlContent += `<p>Currency: ${currency}, Rate: ${rate}</p>`;
					
                }
				 
		    for (const currency in rates) {
                    const option = document.createElement('option');
                    option.value = currency;
                    option.textContent = `${currency}}`;
                    selectElement.appendChild(option);
                }
				
                document.getElementById('currency-namess').innerHTML = htmlContent;
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }
		
		function Currencyt()
		{
		  fetchCurrencyRates();
		}
		

       window.addEventListener('load', Currencyt);
    </script>
	
	
	
</body>
</html>