JSFiddle - React, Tailwind, and code Playground

Parts of this weather api to a Bootstrap card. https://api.weather.gov/gridpoints/TBW/70,97/forecast/

by grant

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
  <div class='card mt-3 mx-3 border-primary'>
    <div class='card-body text-center'>
      <div class="card-title">
        <h6 id="station">station location</h6>
      </div>
      <h6 id="cfs" class="card-subtitle mb-2 ">Cfs</h6>
      <div id="myWeatherTemp"></div>
      <div id="myWeatherWords"></div>
      <div id="myRiverIcon"></div>
      <div class="mt-2" id="lastPull"></div>
    </div>
  </div>
</div>

CSS

/* using bootstrap 4.3 */

       #lastPull {
         font-size: 0.8rem;
       }
       footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

JavaScript

// boise
//let weatherJson = "https://api.weather.gov/gridpoints/BOI/121,93/forecast/";

//usgs boise 13206000

let usgs = "https://waterservices.usgs.gov/nwis/iv/?format=json&sites=13266000&parameterCd=00060";

// different url to get station name
var getCfs = function(usgs, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', usgs, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
      
    } else {
      callback(status, xhr.response);
      $("#station").html('Something went wrong: ' + status);
    }
  };
  xhr.send();
};

getCfs(usgs,
  function(err, station) {
    if (err !== null) {
      console.log('Something went wrong: ' + err);
    } else {
       

//['generatedAt']
//$.value.timeSeries[0].values[0].value[1].value;
  let stano = station.value.timeSeries[0].sourceInfo.siteName.trim();
// console.log(stano)

     var short = stano.split(" ").splice(0,2).join(" ");
//console.log(short)
      let stano2 = toTitleCase(short)
  console.log(stano2)
   let cfs = station.value.timeSeries[0].values[0].value[0].value;

// var cfs = 180;
    if (cfs == -999999) {
  cfs = 'Ice';
} else {
  cfs = cfs;
}

    let updated = station.value.timeSeries[0].values[0].value[0].dateTime;
// console.log(updated)
        const editedTime = updated.slice(0, -13) //'abcde'
       // var res = editedTime.split("T");
       // console.log(res[1])
        var res = editedTime.replace("T", "&nbsp;&nbsp;");
   $("#lastPull").html(res);
   // $("#station").html(myFunction(stano));
    document.getElementById("station").innerHTML = stano2;
    if (cfs == 'Ice') {
    document.getElementById("cfs").innerHTML = cfs;}
    else 
    if (cfs >= 0) {
    document.getElementById("cfs").innerHTML = cfs + ' cfs';}
  // now do this to get an icon
      $("#myRiverIcon").html(getRiverIcon(cfs));
    


}
      
  });
  
  // get the update time 
 //  let lastPull =...