JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://code.highcharts.com/7.0.3/highcharts.js"></script>
<div id="chart"></div><div id="bogus" class="titlecase"></div>
<div id="start"></div>
<div id="today"></div>

JavaScript

function toTitleCase(str) {
  return str.replace(
    /\w\S*/g,
    function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    }
  );
}

date = new Date();

year = date.getFullYear();
yearFour = date.getFullYear()+4;
month = date.getMonth()+1;
dt = date.getDate();
startMonth = 11;
startDay = 01;

if (dt < 10) {
  dt = '0' + dt;
}
if (month < 10) {
  month = '0' + month;
}
today = (year+'-' + month + '-'+dt);
todayUf = ("" + year+month+dt);
seasonStart = (year + '-' + '11' + '-' +  '01')
console.log(today);
console.log(todayUf);

document.getElementById("today").innerHTML = today;

document.getElementById("start").innerHTML = seasonStart;

url = "https://api.synopticdata.com/v2/stations/timeseries?stid=BOGI1&start=" + year + "11010001&end=" + todayUf + "0001&vars=snow_depth&units=precip|in&type1=daily&pmode=intervals&intvl=day&timeformat=%m-%d-%Y&token=a3623c35872746b38152cf1363614bc1"

console.log(url);
var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, 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(url,
  function(err, data) {
	if (err !== null) {
	console.log('Something went wrong: ' + err);
	} else {

	// titleCase(“I’m a little tea pot”) 
let bogus = data.STATION[0].NAME;

let bogusName =  toTitleCase(bogus)
	$("#bogus").html(bogusName);
	let snowDay = data.STATION[0].OBSERVATIONS.date_time;
  console.log(snowDay)
let snowFall = data.STATION[0].OBSERVATIONS.snow_depth_set_1;
  console.log(snowFall)
	// temperature
	$("#bogus").html(bogusName);
 
const records = data.STATION[0].OBSERVATIONS;
const results = [];
const date2 = [];
for (let i = 0; i < records.snow_depth_set_1.length; i++) {
// this will remove high values. date orde off? 
// if (records.snow_depth_set_1[i] <= 50  || records.date_time[i] > date2) 
...