JSFiddle - React, Tailwind, and code Playground

Bootstrap simpleWeather

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="calender-object">
        <div class="date">
            <span id="date" class="pull-right"></span>
            <span id="day"></span>
            <span id="time"></span>
        </div>
        <div class="weather">
            <span class="icons">&#xf053;</span><span id="temp" class="weatherDetails"></span><br />
            <span class="icons" id="weather-icon"></span><span id="desc" class="weatherDetails"></span><br />
            <span class="icons">&#xf04e;</span><span id="humidity" class="weatherDetails"></span>
        </div>
        <div id="details">
            <div id="year"></div>
            <div id="country"></div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

@font-face {
  font-family: 'WeatherIcons';
  src: url('fonts/weathericons-regular-webfont.eot');
  src: url('fonts/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/weathericons-regular-webfont.woff') format('woff'), url('fonts/weathericons-regular-webfont.ttf') format('truetype'), url('fonts/weathericons-regular-webfont.svg#weathericons') format('svg');
  font-weight: normal;
  font-style: normal;
}

.calender-object {
  background: transparent;
  color: #f0f0f0;
  padding: 0;
}
.calender-object .date #date {
  font-weight: 400;
  font-size: 90px;
  color: #46b8da;
  margin-top: 15px;
}
.calender-object .date #day {
  font-weight: 400;
  text-transform:uppercase;
  font-size:19px;
  color:#f2f1e6;
  display: block;
}
.calender-object .date #time {
  font-weight: 300;
  font-size: 22px;
  width: 100%;
  display: block;
  margin-top: 10px;
}
.calender-object .weather {
  width: 100%;
  display: block;
  margin-top: 20px;
}
.calender-object .weather .icons {
  font-family: 'WeatherIcons';
  font-size: 18px;
  margin-top: 5px;
  margin-right: 10px;
  width: 26px;
  display: inline-block;
  text-align: center;
  line-height: 25px;
  color: #999999;
}
.calender-object .weather span.weatherDetails {
	font-size: 16px;
	line-height: 25px;
	color: #999999;
}
.calender-object #details {
  border-top: #444444 1px solid;
  padding: 6px 5px 0 5px;
  font-size: 12px;
  line-height: 12px;
  color: #999999;
  margin-top: 20px;
}
.calender-object #details #year {
  float: right;
}
.calender-object #details #country {
  float: left;
}

JavaScript

/**
 * simpleWeather
 * http://simpleweatherjs.com
 *
 * A simple jQuery plugin to display the current weather
 * information for any location using Yahoo! Weather.
 *
 * Developed by James Fleeting <@twofivethreetwo> <http://iwasasuperhero.com>
 * Another project from monkeeCreate <http://monkeecreate.com>
 **/
/*! simpleWeather v3.0.2 - http://simpleweatherjs.com */
! function (e) {
    "use strict";
    
    function t(e, t) {
        return Math.round("f" === e ? 5 / 9 * (t - 32) : 1.8 * t + 32)
    }
    e.extend({
        simpleWeather: function (i) {
            i = e.extend({
                location: "",
                woeid: "",
                unit: "f",
                success: function () {},
                error: function () {}
            }, i);
            var o = new Date,
                n = "https://query.yahooapis.com/v1/public/yql?format=json&rnd=" + o.getFullYear() + o.getMonth() + o.getDay() + o.getHours() + "&diagnostics=true&callback=?&q=";
            if ("" !== i.location) n += 'select * from weather.forecast where woeid in (select woeid from geo.placefinder where text="' + i.location + '" and gflags="R" limit 1) and u="' + i.unit + '"';
            else {
                if ("" === i.woeid) return i.error({
                    message: "Could not retrieve weather due to an invalid location."
                }), !1;
                n += "select * from weather.forecast where woeid=" + i.woeid + ' and u="' + i.unit + '"'
            }
            return e.getJSON(encodeURI(n), function (e) {
                if (null !== e && null !== e.query && null !== e.query.results && "Yahoo! Weather Error" !== e.query.results.channel.description) {
                    var o, n = e.query.results.channel,
                        r = {}, s = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW", "N"],
                        a = "https://s.yimg.com/os/mit/media/m/weather/images/icons/l/44d-100567.png";
   ...