Coindesk Custom Tile

coindesk-custom-tile.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js">
</script>
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- End Imports, Begin HTML -->

<div class="main-content center" onclick="update()">
  <div class="header">BTC in USD</div>
  <div class="footer" id="footer"></div>
    
  <div class="value">
     $<span id="usd"></span>
  </div>

</div>
<!-- End HTML, Begin Custom Script -->
<script>
   var uri = "https://api.coindesk.com/v1/bpi/currentprice.json";
   var elUSD = document.getElementById("usd");
   var elFooter = document.getElementById("footer");
   function update(){
     //update the footer to indicate that we are getting data
     footer.innerText = "Updating..."; 
     //use axios to make the HTTP GET request
     axios.get(uri).then(function(response){ 
        //then get the data from the response
        var usd = response.data.bpi.USD.rate;
        
        //and then update the element with the new value
        elUSD.innerText = usd;
        footer.innerText = ""; //clear out the footer
     }).catch(function(error){
        console.error("Error updating BTC price");
        footer.innerText = "ERROR";
     });
   }
   
   //update once immediately
   update(); //just do it once
   
   //then run our update every minute
   setInterval(update, 60 * 1000); 
</script>
<style>
  html, body { height: 100%; }
  .main-content { 
    padding: 1em; 
    height: 100%;
    cursor: pointer;
  }
  .main-content .value {
    display: flex; /* easier tool for vertical centering */
    align-items: center; /* vertically center */
    justify-content: center; /* horizontally center */
    
    /* make the value fill the whole tile since we are centering it */
    position: absolute; 
    top:0; left: 0; width: 100%; height: 100%;
    
    /* simplistic font autoscaling */
    font-size: min(15vh, 15vw); 
  }
  .footer {
    position: absolute;
    bottom: 0.25em; left: 0.5em; right: 0.5em;
    text-align: right;
  }
</style>