simpledash/resources/templates/cards/weather.html

{{$randID := randAlphaNum 10}}
<div class="card-header">
    <p class="card-header-title">{{.Title}}</p>
</div>
<div class="card-content">
    <p id="weatherLoadingText_{{$randID}}">Loading...</p>
    <div class="columns is-mobile">
        <div class="column is-half">
            <object type="image/svg+xml" id="weatherStateImg_{{$randID}}" style="width:45px; height: 45px"></object>
        </div>
        <div class="column is-half">
            <p id="weatherTempText_{{$randID}}" class="has-text-right subtitle"></p>
        </div>
    </div>
    <p class="subtitle is-marginless" id="weatherStateText_{{$randID}}"></p>
    <p id="weatherMinText_{{$randID}}"></p>
    <p id="weatherMaxText_{{$randID}}"></p>
    <p id="weatherWindSpeedText_{{$randID}}"></p>
    <p id="weatherHumidityText_{{$randID}}"></p>
    <p id="weatherVisibilityText_{{$randID}}"></p>
    <p id="weatherPredictabilityText_{{$randID}}"></p>
</div>
<div class="card-footer" style="margin-top: auto">
    <span class="card-footer-item">Data from&nbsp;<a href="https://www.metaweather.com" class="has-text-info">Metaweather</a></span>
</div>
<script>
    var request = new XMLHttpRequest()
    request.open('GET', "{{proxy (printf `https://www.metaweather.com/api/location/%s/` .Data.woeid)}}", true)
    const round = function (flt){return Number.parseFloat(flt).toPrecision(3)}
    request.onload = function () {
        const data = JSON.parse(this.response)
        document.getElementById('weatherLoadingText_{{$randID}}').classList.add("is-hidden")
        document.getElementById('weatherStateText_{{$randID}}').innerText = data["consolidated_weather"][0]["weather_state_name"]
        document.getElementById('weatherTempText_{{$randID}}').innerHTML = round(data["consolidated_weather"][0]["the_temp"]*1.8+32) + " &deg;F"
        document.getElementById('weatherStateImg_{{$randID}}').data = "/proxy/" + btoa("https://www.metaweather.com/static/img/weather/" + data["consolidated_weather"][0]["weather_state_abbr"] + ".svg")
        document.getElementById('weatherMinText_{{$randID}}').innerHTML = "Min: " + round(data["consolidated_weather"][0]["min_temp"]*1.8+32) + " &deg;F"
        document.getElementById('weatherMaxText_{{$randID}}').innerHTML = "Max: " + round(data["consolidated_weather"][0]["max_temp"]*1.8+32) + " &deg;F"
        document.getElementById('weatherWindSpeedText_{{$randID}}').innerText = "Wind Speed: " + round(data["consolidated_weather"][0]["wind_speed"]) + "mph"
        document.getElementById('weatherHumidityText_{{$randID}}').innerText = "Humidity: " + data["consolidated_weather"][0]["humidity"] + "%"
        document.getElementById('weatherVisibilityText_{{$randID}}').innerText = "Visibility: " + round(data["consolidated_weather"][0]["visibility"]) + "mi"
        document.getElementById('weatherPredictabilityText_{{$randID}}').innerText = "Predictability: " + data["consolidated_weather"][0]["predictability"] + "%"
    }
    request.send()
</script>