JSFiddle - React, Tailwind, and code Playground

by lamarant

HTML

<h3>Should I water the garden?</h3>
<ul>
  <li>Is soil below current moisture threshold? <span class="data" id="data-soil-moisture">Yes</span> (will come from sensor)</li>
   <li>Current temperature: <span class="data" id="data-temp"></span>&deg;F</li>
  <li>Is it between 6-9am or 5-8pm? <span class="data" id="data-hour-ok"></span></li>
  <li>Precip. in the next 24 hours: <span class="data" id="data-precip"></span>mm</li>
</ul>
<hr />
<h1></h1>

CSS

.data { font-weight: bold; }

JavaScript

// Data should be fed from api call at http://openweathermap.org/
// eg: http://api.openweathermap.org/data/2.5/forecast?q=02842s&units=imperial&appid=xxxAPIKEYxxx
var data = {"city":{"id":5223593,"name":"Newport","coord":{"lon":-71.312828,"lat":41.490101},"country":"US","population":0,"sys":{"population":0}},"cod":"200","message":0.0168,"cnt":40,"list":[{"dt":1454371200,"main":{"temp":49.12,"temp_min":49.11,"temp_max":49.12,"pressure":1023.58,"sea_level":1025.8,"grnd_level":1023.58,"humidity":71,"temp_kf":0},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"clouds":{"all":80},"wind":{"speed":8.38,"deg":294},"rain":{"3h":0.02},"sys":{"pod":"n"},"dt_txt":"2016-02-02 00:00:00"},{"dt":1454382000,"main":{"temp":46.44,"temp_min":46.44,"temp_max":46.44,"pressure":1026.44,"sea_level":1028.63,"grnd_level":1026.44,"humidity":75,"temp_kf":0},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10n"}],"clouds":{"all":88},"wind":{"speed":8.32,"deg":328.507},"rain":{"3h":0.005},"sys":{"pod":"n"},"dt_txt":"2016-02-02 03:00:00"},{"dt":1454392800,"main":{"temp":43.3,"temp_min":43.3,"temp_max":43.31,"pressure":1028.57,"sea_level":1030.78,"grnd_level":1028.57,"humidity":84,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":9.74,"deg":335.501},"rain":{},"sys":{"pod":"n"},"dt_txt":"2016-02-02 06:00:00"},{"dt":1454403600,"main":{"temp":40.26,"temp_min":40.26,"temp_max":40.26,"pressure":1031.43,"sea_level":1033.67,"grnd_level":1031.43,"humidity":93,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"sky is clear","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":11.06,"deg":342.001},"rain":{},"sys":{"pod":"n"},"dt_txt":"2016-02-02 09:00:00"},{"dt":1454414400,"main":{"temp":38.12,"temp_min":38.12,"temp_max":38.13,"pressure":1034.13,"sea_level":1036.33,"grnd_level":1034.13,"humidity":100,"temp_kf":0},"weather":[{"id":800,"main":"Clear","description":"sky...