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="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.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='card mt-3 mx-3 border-primary'>
  <div class='card-body text-center'>
    <div class="card-title">
      <h3 id="station">Default Weatherr</h3>
    </div>
    <div id="myWeatherTemp"></div>
    <div id="myWeatherWords"></div>
    <div id="myWeatherIcon"></div>
    <div class="text-muted mt-2" id="lastPull"></div>
  </div>
</div>

<div class="row">
			<div class="tmin col-4">
			<div class="min"></div>
		</div>
    
    <div class="main col-4">
			<div class="snowfall"></div>
		</div>

		<div class="tmax col-4">
			<div class="max"></div>
		</div>
	</div>

CSS

/* using bootstrap 4.3 */

       #lastPull {
         font-size: 0.7rem;
       }

JavaScript

// titleCase function
String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};
//let weatherJson = "https://api.weather.gov/gridpoints/TBW/70,97/forecast/";
let weatherJson = "https://api.weather.gov/gridpoints/BOI/137,91";
let bogi1Json = "https://api.weather.gov/stations/BOGI1";
let snowJson = "https://api.weather.gov/stations/BOGI1";

// the station name
var getBogi1 = function(bogi1Json, callback) { 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', bogi1Json, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
};
getBogi1(bogi1Json,
  function(err, bogi) {
    if (err !== null) {
      console.log('Something went wrong: ' + err);
    } else {

      // get the most current weather data (periods[0])

      let sname = (bogi.properties.name.toProperCase());
      //let titleCase =(sname.toProperCase());
      
 short = sname.substr(0,sname.indexOf(' ')); // "72"
//console.log({short})
let weather = 'Weather';
//  both = short + " " + weather;    
//console.log({both})
document.getElementById("station").innerHTML = sname;
//$("station").html(myFunction(sname));
     
    }

  
  });
 
// the orignal jsfiddle

var getJSON = function(weatherJson, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', weatherJson, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
};

getJSON(weatherJson,
  function(err, data) {
    if (err !== null) {
      //console.log('Something went wrong: ' + err);
    } else {


   $.each(data.properties.temperature.values, function(index, element) {
   //...