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