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