Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The single page, simplified version of the minimalist website https://live-bitcoin-price.com/. Grab and modify!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bitcoin Price</title>
<meta name="description" content="The price of bitcoin right now" />
<!-- <link rel="stylesheet" href="static/css/styles.css" /> -->
<style>
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap");
body {
margin: 0;
}
.main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.btc-ticker {
font-family: "Share Tech Mono";
font-size: 100px;
align-self: center;
}
</style>
</head>
<body>
<div class="main">
<p id="current-price" class="btc-ticker"></p>
</div>
<!-- <script src="static/js/utils.js"></script> -->
<script>
// fetch the current Kraken price (latest trade)
// example: https://api.kraken.com/0/public/Ticker?pair=XXBTZUSD
// first call
fetch("https://api.kraken.com/0/public/Ticker?pair=XXBTZUSD")
.then((response) => response.json())
.then((data) => {
console.log(data);
const price = data.result.XXBTZUSD.c[0];
const pricerounded = Math.floor(price);
console.log("price rounded down: ", pricerounded);
document.getElementById("current-price").innerText =
"$ " + pricerounded;
});
// query back the API every 5 seconds
setInterval(function () {
fetch("https://api.kraken.com/0/public/Ticker?pair=XXBTZUSD")
.then((response) => response.json())
.then((data) => {
console.log(data);
const price = data.result.XXBTZUSD.c[0];
const pricerounded = Math.floor(price);
console.log("price rounded down: ", pricerounded);
document.getElementById("current-price").innerText =
"$ " + pricerounded;
});
}, 5000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.