Help - Search - Members - Calendar
Full Version: Get BTC latest usd value
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
thehen
Mar 26 2022, 12:21 PM
Hi

I have a webpage that is working with the following
1. total coins (Working)
2. latest usd value for coins like BTC SHIB eg. ( Not working, must add it manually every time)
3 total in usd (Working)
4. total in ZAR (Working)

I need tp let number 2 get the info from somewhere , but does not know how to do it in html.

Here are my code I have for now

CODE

<td><font color="#eae0c8"><b><label for="firstNum2">BTC</label></b></FONT></td>
    <td><input style="color: #17202A; font-family: Comic Sans MS; font-weight: bold; font-size: 12px; background-color: #EBDEF0; type="number2" id="firstNum2" name="firstNum2"></td>
    <td><font color="#BCC6CC"><b><label for="secondNum2">0.00047536</label></b></font></td>
    <input style="visibility:hidden"; type="number2" id="secondNum2" name="secondNum2">
    <td><button type="button" onclick="multiply5()">Multiply</button></td>
    <td><input style="color: #17202A; font-family: Comic Sans MS; font-weight: bold; font-size: 12px; background-color: #E8F8F5; type="text" id="result5" name="result5"/></td>
    <input style="visibility:collapse" readonly="readonly" type="usdzar2" id="usd2" name="usd2">
    <font style="visibility:collapse" 1color="#BCC6CC"><b><label for="zar2"></label></b></font>
    <input style="visibility:collapse"  type="usdzar2" id="gcw_valFnAj0a2vV1" name="zar2">
    <td><button type="button" onclick="multiply6()">Multiply</button></td>
    <td><input style="color: #17202A; font-family: Comic Sans MS; font-weight: bold; font-size: 12px; background-color: #E8F8F5; type="text" id="result6" name="result6"/></td>


CODE

<script>
function multiply5(){
    var num9 = document.getElementById("firstNum2").value;
    document.getElementById("secondNum2").value = 0.00047536;
    var num10 = document.getElementById("secondNum2").value;
    var result5 = num9 * num10;
    document.getElementById("result5").value = result5.toLocaleString('en-US',{ maximumFractionDigits: 8 });
    document.getElementById("result5").style.color = "red";
    document.getElementById("result5").style.fontWeight = "900";
}
</script>
<script>
function multiply6(){
    var num11= document.getElementById("result5").value.replace(/,/g,''); //remove any commas
    var num12 = document.getElementById("gcw_valFnAj0a2vV1").value;
    var result6 = num11 * num12;
    document.getElementById("result6").value = result6.toLocaleString('en-US',{ maximumFractionDigits: 8 });
    document.getElementById("result6").style.color = "red";
    document.getElementById("result6").style.fontWeight = "900";
}
</script>


I have found this on how to, but how do I add it to my code
CODE
<script src="lib/script.js"></script>


the script
CODE

const api = 'https://apiv2.bitcoinaverage.com/indices/local/ticker/short?crypto=BTC&fiat=USD'
$.get(api, p => {
  document.querySelector('pre').textContent = JSON.stringify(p, null, 2)
});
pandy
Mar 26 2022, 12:39 PM
So you need to get the exchange rate from somewhere? I don't know what sites allow you to access that information. But probably you need to pay for it and it won't work with plain HTML. But I don't know, so FWIW.
Christian J
Mar 26 2022, 02:59 PM
QUOTE(thehen @ Mar 26 2022, 06:21 PM) *

I have found this on how to, but how do I add it to my code
CODE
<script src="lib/script.js"></script>


the script
CODE

const api = 'https://apiv2.bitcoinaverage.com/indices/local/ticker/short?crypto=BTC&fiat=USD'
$.get(api, p => {
  document.querySelector('pre').textContent = JSON.stringify(p, null, 2)
});


The script seems to add content to the first PRE element on the page, so at least you need one of those.
thehen
Mar 27 2022, 04:16 AM
QUOTE(Christian J @ Mar 26 2022, 02:59 PM) *

QUOTE(thehen @ Mar 26 2022, 06:21 PM) *

I have found this on how to, but how do I add it to my code
CODE
<script src="lib/script.js"></script>


the script
CODE

const api = 'https://apiv2.bitcoinaverage.com/indices/local/ticker/short?crypto=BTC&fiat=USD'
$.get(api, p => {
  document.querySelector('pre').textContent = JSON.stringify(p, null, 2)
});


The script seems to add content to the first PRE element on the page, so at least you need one of those.



That is correct, It gives you this info
CODE
{
  "BTCUSD": {
    "ask": 3594.5649555077953,
    "timestamp": 1550284932,
    "bid": 3591.715961836563,
    "last": 3592.745617344171,
    "averages": {
      "day": 3583.13243402
    }
  }
}


Then Need to use this p.BTCUSD.last
So want to use last": 3592.745617344171, but ow do I get it in my code above, so it can work?
Christian J
Mar 27 2022, 11:27 AM
QUOTE(thehen @ Mar 26 2022, 07:21 PM) *

Here are my code I have for now

I should add that the HTML is incorrect and a bit confusing:

QUOTE
CODE
<td><font color="#eae0c8"><b><label for="firstNum2">BTC</label></b></FONT></td>

Use CSS for styling, instead of FONT or B.

QUOTE
CODE
<td><input style="color: #17202A; font-family: Comic Sans MS; font-weight: bold; font-size: 12px; background-color: #EBDEF0; type="number2" id="firstNum2" name="firstNum2"></td>

The INPUT TYPE attribute can't have a value like "number2". See https://html.spec.whatwg.org/multipage/inpu...attr-input-type

The inline STYLE attribute is missing its ending quote. Also it's more practical to avoid using CSS as inline styles, use a stylesheet instead (embedded or external). See https://htmlhelp.com/reference/css/style-html.html

QUOTE
CODE
    <input style="visibility:hidden"; type="number2" id="secondNum2" name="secondNum2">
    <td><button type="button" onclick="multiply5()">Multiply</button></td>

You can't put an INPUT outside a table cell. Either put it inside a cell, or outside the entire table.

Christian J
Mar 27 2022, 11:29 AM
QUOTE(thehen @ Mar 27 2022, 11:16 AM) *

Then Need to use this p.BTCUSD.last
So want to use last": 3592.745617344171, but ow do I get it in my code above, so it can work?

I don't know JSON, but my guess is you could use it as a javasript value. Not sure where on the web page you want it to appear though? unsure.gif
CharlesEF
Mar 27 2022, 06:59 PM
Can you run a test for me?

Comment out this line:
CODE
  document.querySelector('pre').textContent = JSON.stringify(p, null, 2)


Add this below the commented out line:
CODE
let results = JSON.encode();
console.log(results );


Look in the 'Developer Tools' console to see the results value. Copy and pasted those results into a reply post.
thehen
Mar 28 2022, 03:55 AM
The site that I have try to use, does not work, after I have try to get into their site.

I have something new, that I want to try, need help see screenshot

This is the code I have for it
CODE
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script><div class="coinmarketcap-currency-widget" data-currencyid="1" data-base="USD" data-secondary="" data-ticker="false" data-rank="false" data-marketcap="false" data-volume="false" data-statsticker="false" data-stats="USD"></div>

This is what I get for the source
CODE

<div style="border:2px solid #e1e5ea;border-radius: 10px;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;min-width:285px;">        
    <div style="display:flex;padding:12px 0px;">          
        <div style="width:33%;display: flex;justify-content: center;align-items: center;">
            <img style="width:46px;height:46px;" src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png">
        </div>          
            <div style="width:67%;border: none;text-align:left;line-height:1.4">              
                <span style="font-size: 18px;">
                    <a href="https://coinmarketcap.com/currencies/bitcoin/?utm_medium=widget&utm_campaign=cmcwidget&utm_source=&utm_content=bitcoin" target="_blank" style="text-decoration: none; color: rgb(16, 112, 224);">Bitcoin </a>
                </span> <br>            
                <span style="font-size: 16px;">                
                    <span style="font-size: 20px; font-weight: 500;">46,853.04
                    </span>                
                    <span style="font-size: 14px; font-weight: 500;">USD
                    </span>                
                    <span style="margin-left:6px; font-weight: 500;"><span style="color:#009e73">(4.85%)
                    </span>
                </span>        
                </span>
            </div>      
    </div>  
    <div style="border-top: 1px solid #e1e5ea;text-align:center;clear:both;font-size:12px;font-style:italic;padding:8px 0;">    
        <a href="https://coinmarketcap.com?utm_medium=widget&utm_campaign=cmcwidget&utm_source=&utm_content=bitcoin" target="_blank" style="text-decoration: none; color: rgb(16, 112, 224);">Powered by CoinMarketCap</a>  
    </div>
</div>

How do I use it in this 2
CODE

<td><label for="firstNum2">BTC</label></td>
    Need it here
    <td><input type="number2" id="firstNum2" name="firstNum2"></td>
    <td><label for="secondNum2">0.00047536</label></td>
    <input style="visibility:hidden"; type="number2" id="secondNum2" name="secondNum2">
    <td><button type="button" onclick="multiply5()">Multiply</button></td>
    <td><input type="text" id="result5" name="result5"/></td>
    <input style="visibility:collapse" readonly="readonly" type="usdzar2" id="usd2" name="usd2">
    <font style="visibility:collapse" 1color="#BCC6CC"><b><label for="zar2"></label></b></font>
    <input style="visibility:collapse"  type="usdzar2" id="gcw_valFnAj0a2vV1" name="zar2">
    <td><button type="button" onclick="multiply6()">Multiply</button></td>
    <td><input type="text" id="result6" name="result6"/></td>
    

CODE

<script>
function multiply5(){
    var num9 = document.getElementById("firstNum2").value;
    document.getElementById("secondNum2").value = 0.00047536;
    var num10 = document.getElementById("secondNum2").value;
    var result5 = num9 * num10;
    document.getElementById("result5").value = result5.toLocaleString('en-US',{ maximumFractionDigits: 8 });
    document.getElementById("result5").style.color = "red";
    document.getElementById("result5").style.fontWeight = "900";
}
</script>
<script>
function multiply6(){
    var num11= document.getElementById("result5").value.replace(/,/g,''); //remove any commas
    var num12 = document.getElementById("gcw_valFnAj0a2vV1").value;
    var result6 = num11 * num12;
    document.getElementById("result6").value = result6.toLocaleString('en-US',{ maximumFractionDigits: 8 });
    document.getElementById("result6").style.color = "red";
    document.getElementById("result6").style.fontWeight = "900";
}
</script>


CharlesEF
Mar 28 2022, 01:46 PM
That screenshot shows an error '$ not defined'. I 'assume' you use jQuery, have you loaded the library? I don't do jQuery so I've stayed out.

If this code works:
CODE
const api = 'https://apiv2.bitcoinaverage.com/indices/local/ticker/short?crypto=BTC&fiat=USD'
$.get(api, p => {
  document.querySelector('pre').textContent = JSON.stringify(p, null, 2)
});


It will produce this result, in the first <pre> element:
CODE
{
  "BTCUSD": {
    "ask": 3594.5649555077953,
    "timestamp": 1550284932,
    "bid": 3591.715961836563,
    "last": 3592.745617344171,
    "averages": {
      "day": 3583.13243402
    }
  }
}

But this doesn't help you because there is no easy way to get 'last' from the <pre> element.

All I can say is that if the JSON is an object/array all you need to do is:
CODE
JSON["BTCUSD"]["last"]


You may need to encode it first to turn it into an object/array. I'm not sure if dot notation will work (JSON.BTCUSD.last).

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.