Bitcoin API currency converter in JavaScript

Question

I'm trying to do my own bitcoin currency converter. The link to check the currency rate is:

https://blockchain.info/tobtc?currency=USD&value=1000

So I did a HTML form, with one input, where the user will give me the value in USD he wants to check how many BTC's it's on the moment.

<form class="searchform" name="BTCValueForm" action="" method="POST">
U$<input type="text" name="usd" id="usd" maxlength="5">
 - BTC = <p id="btcvalue"> </p>
 <p> <input name="Exchange" type="submit" class="button" onclick="return BitcoinRate(BTCValueForm)" value="Check"> </p>

</form>

Ok, the button calls javascript function BitcoinRate, what is:

function BitcoinRate(BTCValueForm)
{
    load('https://blockchain.info/tobtc?currency=USD&value='+BTCValueForm.usd.value,'BitcoinRate'); 
}

Function load is:

 function load(url,reason) {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var Answer = xmlhttp.responseText;
if (reason == 'BitcoinRate') {
                document.getElementById('btcvalue').innerHTML = Answer; 
            }
    xmlhttp.open('GET', url, true);
    xmlhttp.send();
    }

It's supposed to get the answer from the API, and put in the paragraph "btcvalue" in the form. But looking on Chrome's debugger I see the GET request is cancelled before it starts. What's happening here? Any clues?

Answer 1

I'll recommend CurrencyFreaks API as you can get Bitcoin currency conversion in the world's 179 currencies compatible with various programming languages such as Shell, Node.js, Java, Python, PHP, Ruby, JS, C#, C, Go, Swift.

Here I'm giving Bitcoin converter endpoint using JavaScript:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://api.currencyfreaks.com/latest/convert
    ?apikey=YOUR_APIKEY
    &from=USD&to=BTC
    &amount=10000");

xhr.send();

The JSON response will be as follows:

{
    "date": "2020-10-06 05:44:00+00",
    "current_rates": {
        "USD": "1.0",
        "BTC": "0.00009296030223253462"
    },
    "converted_amount": "0.9296030223253462",
    "query": {
        "given_amount": "10000.0",
        "from": "USD",
        "to": "BTC"
    }
}

I hope it will be the easiest solution for the BTC converter.

Answer 2

It might be that BlockChain did not permit their CORS(Cross Origin Resource Sharing). I will recommend you use CryptoCompare API and it's free. My answer below might help you with what you are looking for.

<form class="searchform" name="BTCValueForm" action="" method="POST">
  - U$<input type="text" name="usd" id="usd" maxlength="5">
  - BTC = <p id="btcvalue"> </p>
 <p> <input name="Exchange" type="submit" class="button" onclick="return 
  BitcoinRate()" value="Check"> </p>

</form>

I will be using cryptocompare API for the Xml, to get the price of btc

function BitcoinRate(){
    var btc = document.querySelector('#btcvalue'),
    amount = document.querySelector('#usd').value

    var XHR = new XMLHttpRequest();
    XHR.onreadystatechange = function(){
        if(XHR.readyState == 4 && XHR.status == 200){
            console.log(data)
            var data = JSON.parse(XHR.responseText)
            // Divide the given amount with the current price of one BTC to USD = BTC amount
            let BTC_amount = amount / data.USD
            // You can round up the BTC_amount to your desired value
            let final_value = BTC_amount.toFixed(3);
            // Equate the final_value to the btc var, to display it
            btc.innerText = final_value;
        } else {
            alert('something went wrong')
        }
    }
    // Note: here I used BTC to USD, but you can use a different coin or fiat currency supported by CC API
    var url = 'https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD';

    XHR.open('GET', url);
    XHR.send();

}

Using JQuery with keypress(), it is more cleaner than XML request(dry)

var amount = jQuery('#usd').val(),
    btc    = jQuery('#btcvalue')
jQuery('#usd').keypress(function(event){
    if ( event.which == 13 ) {
       event.preventDefault();
    }
    $.get("https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD",function(data){
     let BTC_amount = amount / data["USD"],
         final_value = BTC_amount.toFixed(3)
     btc.text(final_value)
    });
})