JSFiddle - React, Tailwind, and code Playground
JavaScript
var url = "https://solar.lowtechmagazine.com/api/stats.json";
var weather_ignore = ["snow", "sleet", "wind", "fog"];
var weather_data = ["today", "tomorrow", "day_after_t"];
var weather_days = ["today", "tomorrow", "day after tomorrow"];
var forecast = "";
function getServerData(){
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var data = JSON.parse(request.responseText);
// var stats = [];
// Object.keys(data).map(function(key, index) {
// var value = data[key];
// stats.push( "<li id='" + key + "'>" + key + ": " + data[key] + "</li>" );
// });
// var ul = document.createElement('ul')
// ul.classList.add('ul')
// ul.innerHTML = stats.join("")
// document.querySelector('.data').appendChild(ul)
var level = data.bat_capacity;
document.querySelector('#battery').style.height = level
document.querySelector('#level').innerHTML = level
document.querySelector('#dashboard_level').innerHTML = level
var power = "";
if(data.ac_power == "0W"){
power = data.bat_power;
}else{
power = data.ac_power;
}
document.querySelector('#power').innerHTML = power;
for(i=0; i<weather_data.length; i++){
var key = weather_data[i];
var icon_name = key+"_icon";
var icon = data[icon_name];
var text = data[key];
var img;
if (weather_ignore.includes(icon)){
img = "cloudy";
}else {
img = icon;
}
forecast += '<span class="weather_day" id="' + key +'">'+ weather_days[i] +' <img class="weather" src="/extra/'+ img +'.png" alt="'+ text +'" title="'+ text +'"></span><span class="weather_text"> '+text+'</span>';
}
document.querySelector('.forecast').innerHTML =...