Hi, the Codezine coders! Guys, Today I will show you, how to make simple & free bitcoin currency converter in javascript or you can say cryptocurrency. Fun fact: Do you know that cryptocurrency will grow 2X in the next 5 years. So, let’s not waste time & go on to how to build a bitcoin currency converter or cryptocurrency converter. Following are the steps to build it:
Codes Used:
- Pure Javascript, Html, CSS
- JSON API from cryptocompare.com
Requirements:
- A PC with any OS installed in it.
- A good Code IDE [ Prefer using VS Code or Atom]
- Your focus
Index.html[Html File]
<!DOCTYPE html>
<html lang="en" >
<head> <meta charset="UTF-8"> <title>Simple Cryptocurrency Converter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="pic2.png" sizes="any" type="image/svg+xml">
<meta name="theme-color" content="#000"> <meta name="description" content="See the live Bitcoin price. Convert amounts to or from USD and other currencies with this simple Bitcoin calculator. "> <meta name="keywords" content="Free Bitcoin Converter,Bitcoin Currency Converter , Accurate Bitcoin Currency Converter, Best Bitcoin Currency Converter,Cryptocurrency Converter, Simple Cryptocurrency Converter, Accurate Cryptocurrency Converter"> <meta name="author" content="The Codezine"> <link rel="icon" href="./bitcoin.png" sizes="16x16 32x32" type="image/png"> <link rel="stylesheet" href="./style.css"> </head>
<body>
<!-- partial:index.partial.html -->
<div class="container"> <h1 id="from-basis"></h1> <ul id="from-menu"> <li class="from-currency">BTC</li> <li class="from-currency">BCH</li> <li class="from-currency">EOS</li> <li class="from-currency">ETH</li> <li class="from-currency">DASH</li> <li class="from-currency">LTC</li> <li class="from-currency">XRP</li> <li class="from-currency">ZEC</li> <li class="from-currency">ETC</li> </ul>
</div> <div class="line"></div> <div class="container"> <h1 id="to-currency-price"></h1> <ul id="to-menu"> <li class="to-currency">USD</li> <li class="to-currency">EUR</li> <li class="to-currency">GBP</li> <li class="to-currency">BTC</li> <li class="to-currency">ETH</li> </ul>
</div>
<!-- partial --> <script src="./script.js"></script> </body>
</html>Style.css[CSS File]
html, body { margin: 0; padding: 0;
} body { height: 100vh; padding-top: 10vh; box-sizing: border-box; display: flex; background-color: #581845; justify-content: center; font-family: "courier", cursive ; font-size: 15px; align-items: flex-start;
} .line { height: 40px; width: 2px; background-color: white; margin-right: 10px;
}
.container { width: 240px; text-align: center; cursor: pointer;
} .container:first-child { width: 150px;
} h1 { margin: 0; font-weight: 400; transition: 100ms; color: white;
} h1:hover { color: red;
}
.hr{ height: 40px; width: 2px; background-color: red; } ul { list-style: none; width: 100px; padding: 0; margin: 5px auto 0 auto; border-radius: 5px; box-shadow: 0 5px 28px -10px rgba(20,20,20,0.8); overflow: hidden; max-height: 0; color: white; transition: 220ms ease-in-out;
} .expand { max-height: 300px;
} li { padding: 5px 0; border-bottom: 1px solid rgb(222,222,222); transition: background 100ms;
} li:first-child { border-top: 4px solid #e84a4a;
} li:last-child { border: none;
} li:hover { background-color: #ff2937;
}Script.Js[Javascript File]
var outside = document.getElementById("body-container");
var toPrice = document.getElementById("to-currency-price");
var fromBasis = document.getElementById("from-basis");
var toMenu = document.getElementById("to-menu");
var fromMenu = document.getElementById("from-menu");
var toSelect = document.getElementsByClassName("to-currency");
var fromSelect = document.getElementsByClassName("from-currency"); var toCurrency = "USD";
var fromCurrency = "BTC"; var retrievePrice = function() { var XHR = new XMLHttpRequest(); XHR.onreadystatechange = function(){ if(XHR.readyState == 4 && XHR.status == 200) { var val = JSON.parse(XHR.responseText)[fromCurrency][toCurrency]; var price = val.toLocaleString('en'); toPrice.textContent = price + " " + toCurrency; fromBasis.textContent = fromCurrency; } } //Used api from cryptocompare XHR.open("GET","https://min-api.cryptocompare.com/data/pricemulti?fsyms=" + fromCurrency + "&tsyms=" + toCurrency); XHR.send();
} for(var i = 0; i < toSelect.length; i++) { toSelect[i].addEventListener("click", function() { toMenu.classList.remove("expand"); toCurrency = this.textContent; retrievePrice(); });
} for(var i = 0; i < fromSelect.length; i++) { fromSelect[i].addEventListener("click", function() { fromMenu.classList.remove("expand"); fromCurrency = this.textContent; retrievePrice(); });
} toPrice.addEventListener("click", function() { if(toMenu.classList.contains("expand")) { toMenu.classList.remove("expand"); } else { toMenu.classList.add("expand"); }
}); fromBasis.addEventListener("click", function() { if(fromMenu.classList.contains("expand")) { fromMenu.classList.remove("expand"); } else { fromMenu.classList.add("expand"); }
}); //Execute
setInterval(function() { retrievePrice();
}, 10000); retrievePrice();Modified Script
<!DOCTYPE html>
<html lang="en" >
<head> <meta charset="UTF-8"> <title>Simple Cryptocurrency Converter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="pic2.png" sizes="any" type="image/svg+xml">
<meta name="theme-color" content="#000"> <meta name="description" content="See the live Bitcoin price. Convert amounts to or from USD and other currencies with this simple Bitcoin calculator. "> <meta name="keywords" content="Free Bitcoin Converter,Bitcoin Currency Converter , Accurate Bitcoin Currency Converter, Best Bitcoin Currency Converter,Cryptocurrency Converter, Simple Cryptocurrency Converter, Accurate Cryptocurrency Converter"> <meta name="author" content="The Codezine"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <!--Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/996973c893.js" crossorigin="anonymous" ></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link rel="icon" href="./bitcoin.png" sizes="16x16 32x32" type="image/png"> <style> html, body { margin: 0; padding: 0;
} body { height: 100vh; padding-top: 10vh; box-sizing: border-box; display: flex; background-color: #581845; justify-content: center; font-family: "courier", cursive ; font-size: 15px; align-items: flex-start;
} .line { height: 40px; width: 2px; background-color: white; margin-right: 10px;
}
.container { width: 240px; text-align: center; cursor: pointer;
} .container:first-child { width: 150px;
} h1 { margin: 0; font-weight: 400; transition: 100ms; color: white;
} h1:hover { color: red;
}
.hr{ height: 40px; width: 2px; background-color: red; } ul { list-style: none; width: 100px; padding: 0; margin: 5px auto 0 auto; border-radius: 5px; box-shadow: 0 5px 28px -10px rgba(20,20,20,0.8); overflow: hidden; max-height: 0; color: white; transition: 220ms ease-in-out;
} .expand { max-height: 300px;
} li { padding: 5px 0; border-bottom: 1px solid rgb(222,222,222); transition: background 100ms;
} li:first-child { border-top: 4px solid #e84a4a;
} li:last-child { border: none;
} li:hover { background-color: #ff2937;
} </style> </head>
<body> <div class="container border border-light"> <!-- partial:index.partial.html -->
<div class="container"> <h1 id="from-basis"></h1> <ul id="from-menu"> <li class="from-currency">BTC</li> <li class="from-currency">BCH</li> <li class="from-currency">EOS</li> <li class="from-currency">ETH</li> <li class="from-currency">DASH</li> <li class="from-currency">LTC</li> <li class="from-currency">XRP</li> <li class="from-currency">ZEC</li> <li class="from-currency">ETC</li> </ul>
</div> <div class="line"> </div> <div class="container"> <h1 id="to-currency-price"></h1> <ul id="to-menu"> <li class="to-currency">USD</li> <li class="to-currency">EUR</li> <li class="to-currency">GBP</li> <li class="to-currency">BTC</li> <li class="to-currency">ETH</li> </ul> </div> <footer class="border border-light"> <span style="color:white">For Tutorial to built it i.e <a href="https://thecodezine.com/easy-way-to-built-bitcoin-currency-converter-by-json-api/" style="color:#FF0000;">cyptocurrency realtime converter with javascript visit here</a></span></footer> </div> <!-- partial --> <script> var outside = document.getElementById("body-container");
var toPrice = document.getElementById("to-currency-price");
var fromBasis = document.getElementById("from-basis");
var toMenu = document.getElementById("to-menu");
var fromMenu = document.getElementById("from-menu");
var toSelect = document.getElementsByClassName("to-currency");
var fromSelect = document.getElementsByClassName("from-currency"); var toCurrency = "USD";
var fromCurrency = "BTC"; var retrievePrice = function() { var XHR = new XMLHttpRequest(); XHR.onreadystatechange = function(){ if(XHR.readyState == 4 && XHR.status == 200) { var val = JSON.parse(XHR.responseText)[fromCurrency][toCurrency]; var price = val.toLocaleString('en'); toPrice.textContent = price + " " + toCurrency; fromBasis.textContent = fromCurrency; } } //Used api from cryptocompare XHR.open("GET","https://min-api.cryptocompare.com/data/pricemulti?fsyms=" + fromCurrency + "&tsyms=" + toCurrency); XHR.send();
} for(var i = 0; i < toSelect.length; i++) { toSelect[i].addEventListener("click", function() { toMenu.classList.remove("expand"); toCurrency = this.textContent; retrievePrice(); });
} for(var i = 0; i < fromSelect.length; i++) { fromSelect[i].addEventListener("click", function() { fromMenu.classList.remove("expand"); fromCurrency = this.textContent; retrievePrice(); });
} toPrice.addEventListener("click", function() { if(toMenu.classList.contains("expand")) { toMenu.classList.remove("expand"); } else { toMenu.classList.add("expand"); }
}); fromBasis.addEventListener("click", function() { if(fromMenu.classList.contains("expand")) { fromMenu.classList.remove("expand"); } else { fromMenu.classList.add("expand"); }
}); //Execute
setInterval(function() { retrievePrice();
}, 10000); retrievePrice(); </script> </body>
</html>Last Thing
I hope the script will be easy for any beginners as it’s written in an effortless & understandable way. Also, as like earlier tutorials, always try to take special care while copying the codes or while writing codes as it will help you to avoid errors. Don’t forget to comment & share this blog if you find it interesting. Thank you!
Source: https://thecodezine.com/easy-way-to-built-bitcoin-currency-converter-by-json-api/
