<h1>Source: MtnPowder via Aeris</h1><div class="rich-text">
<div class="rte-table-wrapper">
  <table id="weather-table">
    <thead>
      <tr>
        <th>Location</th>
        <th>Temp</th>
        <th>Wind</th>
        <th>Wind Gusts</th>
        <th>Wind Chill Temp</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  </div>
  
  <ul id="aeris"></ul>
  <div id="aeris"></div>
  <div id="timestamp">Last Updated: </div>
</div><div class="rich-text">

 </div>
</div>


body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

url = "https://mtnpowder.com/feed/49/weather";
urlAeris =
  "https://api.aerisapi.com/observations/park city, utah?format=json&filter=pws&limit=10&fields=id,ob.tempF&client_id=KoNIBE6bnqcQ4YTiaFTD5&client_secret=RZxzy7aOyU29xckR8rcZCcevquPia9jgk6kJjEIe";

var request = new XMLHttpRequest();
request.open("GET", "https://mtnpowder.com/feed/49/weather", true);

request.onload = function (data) {
  if (this.status >= 200 && this.status < 400) {
    // Success!
    var data = JSON.parse(this.response);
    var weatherLocation = [
      "Snow Park Lodge",
      "Bald Eagle Peak",
      "Empire Peak",
      "Gondola Base",
      "Bald Mountain Peak",
      "Flagstaff Peak",
      "Empire Canyon Lodge"
    ];
    var tableRef = document
      .getElementById("weather-table")
      .getElementsByTagName("tbody")[0];
    // Add Timestamp
    var timestampDiv = document.getElementById("timestamp");

    const dateOptions = {
      year: "2-digit",
      month: "2-digit",
      day: "2-digit",
      hour: "numeric",
      minute: "numeric"
    };

    let date = new Date(data.LastUpdate);

    timestampDiv.innerHTML += date.toLocaleDateString("en-US", dateOptions);
    timestampDiv.innerHTML += " ";

    for (var i = 0; i < data.CurrentConditions.length; i++) {
      var newRow = tableRef.insertRow();

      var newCell = newRow.insertCell(0);
      var newText = document.createTextNode(weatherLocation[i]);
      newCell.appendChild(newText);

      //Add temperature
      newCell = newRow.insertCell(1);
      var p = document.createElement("p");
      p.innerHTML = Math.round(data.CurrentConditions[i].TempF);
      var sup = document.createElement("sup");
      sup.appendChild(document.createTextNode(" °F"));
      p.appendChild(sup);
      newCell.appendChild(p);

      // Add Wind MPH
      newCell = newRow.insertCell(2);
      if (data.CurrentConditions[i].WindMph === 0) {
        newText = document.createTextNode("—");
      } else {
        newText = document.createTextNode(
          data.CurrentConditions[i].WindMph +
            " " +
            data.CurrentConditions[i].WindDirection
        );
      }
      newCell.appendChild(newText);

      // Add Wind Gusts
      newCell = newRow.insertCell(3);
      p = document.createElement("p");
      if (data.CurrentConditions[i].WindGustsMph === 0) {
        newText = document.createTextNode("—");
        newCell.appendChild(newText);
      } else {
        p.innerHTML = Math.round(data.CurrentConditions[i].WindGustsMph);
        sup = document.createElement("sup");
        sup.appendChild(document.createTextNode(" MPH"));
        p.appendChild(sup);
        newCell.appendChild(p);
      }

      // Add Wind chill
      newCell = newRow.insertCell(4);
      p = document.createElement("p");
      p.innerHTML = Math.round(data.CurrentConditions[i].WindChillF);
      sup = document.createElement("sup");
      sup.appendChild(document.createTextNode(" °F"));
      p.appendChild(sup);
      newCell.appendChild(p);
    }
  } else if (this.status >= 201 && this.status < 501) {
    console.log("We reached MtnPowder, but it returned an error");
  } else {
    console.log("Waiting for jQuery");
  }
};

request.onerror = function () {
  console.log("There was a connection error to Mtn Powder");
};

request.send();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js