thunderbiscuit/live-btc-price.html

## live-btc-price.html
<!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>
	<!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>