Data provided by @CoinGecko
Recently, there's been a lot of talk and concern about the price of HIVE. It's not doing very well and has been steadily falling over the past year. Given this situation, I decided to check HIVE's price regularly.
You can get HIVE's current price and history by going to CoinGecko and searching for HIVE.
A more direct method is to go to your PeakD (
I always read Steve Clark's (
Steve retrieves data from CoinGecko's API (Application Programming Interface) and then processes it with his Python scripts.
I wanted to understand APIs, so I researched how they work.
Instead of using Python, I decided to use JavaScript to make HIVE's current price available on my website and provide a USD-to-HIVE converter.
Another reason for using JavaScript is that I want to develop a web app.
The HTML code I use to convert USD to HIVE is shown at the end of this post. It is best viewed on PeakD. Click the 'Expand' tab at the bottom of the window to view the entire code.
You are welcome to copy and use this code. Please give attribution to Learning Pages and [CoinGecko](https://coingecko. com).
If you save this code to an HTML file, you can run it on your computer without having access to a server.
A demonstration version of this program is available on my website.
Enter the amount of USD you want to convert to HIVE in the text box and click the 'Convert' button.
The amount of HIVE is displayed, with the current HIVE price below.
Clicking the 'Convert' button again refreshes the values.
The most important part of the code is:
url = "https://api.coingecko.com/api/v3/simple/price?ids=hive&vs_currencies=usd";
This connects the code to CoinGecko's API. Note that it includes references to HIVE and USD.
The code then waits for a response from the URL and gets the necessary data in .json format.
The following line gets the HIVE price in USD...
hivePrice = data.hive.usd;
...and the HIVE amount for a given USD amount is calculated using:
hiveAmount = amountUSD / hivePrice;
The script gets the input from the text box and displays the results with HTML <span> tags using the following JavaScript:
document.getElementById("result").textContent
You can refresh the data automatically by adding a timer to the script.
<!DOCTYPE html>
<html>
<head>
<title>Convert USD to HIVE</title>
<meta charset="utf-8">
<style>
body {
background-color: white;
color: #222;
font-family: Verdana, sans-serif;
font-size: 13pt;
margin: 200;
padding: 0;
}
article {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
margin-top: 0px;
margin: 0 auto;
background-color: #98FAFD;
font-size: 13pt;
width: 25%;
}
.notes {
font-family: Verdana, sans-serif;
font-size: 10pt;
}
</style>
</head>
<body>
<article>
<h3>Convert USD to HIVE</h3>
<input type="number" id="usd" value="100">
<button onclick="convert()">Convert</button>
<p><span id="result"></span><br>
<span id="hiveprice"></span>
</p>
<p class="notes" id="attribution"></p>
</article>
</body>
<script>
async function convert() {
const amountUSD = document.getElementById("usd").value;
const url = "https://api.coingecko.com/api/v3/simple/price?ids=hive&vs_currencies=usd";
const response = await fetch(url);
const data = await response.json();
const hivePrice = data.hive.usd;
const hiveAmount = amountUSD / hivePrice;
document.getElementById("result").textContent =
`${amountUSD} USD = ${hiveAmount.toFixed(8)} HIVE`;
document.getElementById("hiveprice").textContent =
`1 HIVE = ${hivePrice} USD`;
document.getElementById("attribution").textContent =
`Data provided by CoinGecko`;
}
</script>
</html>