JSFiddle - React, Tailwind, and code Playground

Reside V.3 Admin Side - Weather Widget

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/bootstrap.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/custom.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/styles.css">
<script src="http://jennperrin.com/edge/Reside-V3/js/bootstrap.min.js"></script>
<script src="http://jennperrin.com/edge/Reside-V3/js/custom.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<div class="container page_block noTopBorder noBotBorder">
    <div class="header-cont">
        <div class="row">
            <div class="col-md-8">
                <ul class="list-inline mt-0 mb-0">
                    <li><small><a href="../index.php">Home</a></small>
                    </li>
                    <li><small><a href="../available-properties.php">Properties</a></small>
                    </li>
                    <li><small><a href="../about-us.php">About Us</a></small>
                    </li>
                    <li><small><a href="../contact-us.php">Contact Us</a></small>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="list-inline mt-0 mb-0 pull-right">
                    <li><small><a href="index.php?action=myProfile">My Profile</a></small>
                    </li>
                    <li><small><a data-toggle="modal" href="#signOut">Sign Out</a></small>
                    </li>
                </ul>
            </div>
        </div>
        <hr class="mt-10 mb-10" />
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"...

CSS

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
        url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#weather {
    width: 100%;
    margin: 5px 0 10px;
    text-align: center;
    text-transform: uppercase;
}
    #weather i {
        color: #999999;
        font-family: weather;
        font-size: 75px;
        font-weight: normal;
        font-style: normal;
        line-height: 0;
    }
    .icon-0:before { content: ":"; }
    .icon-1:before { content: "p"; }
    .icon-2:before { content: "S"; }
    .icon-3:before { content: "Q"; }
    .icon-4:before { content: "S"; }
    .icon-5:before { content: "W"; }
    .icon-6:before { content: "W"; }
    .icon-7:before { content: "W"; }
    .icon-8:before { content: "W"; }
    .icon-9:before { content: "I"; }
    .icon-10:before { content: "W"; }
    .icon-11:before { content: "I"; }
    .icon-12:before { content: "I"; }
    .icon-13:before { content: "I"; }
    .icon-14:before { content: "I"; }
    .icon-15:before { content: "W"; }
    .icon-16:before { content: "I"; }
    .icon-17:before { content: "W"; }
    .icon-18:before { content: "U"; }
    .icon-19:before { content: "Z"; }
    .icon-20:before { content: "Z"; }
    .icon-21:before { content: "Z"; }
    .icon-22:before { content: "Z"; }
    .icon-23:before { content: "Z"; }
    .icon-24:before { content: "E"; }
    .icon-25:before { content: "E"; }
    .icon-26:before { content: "3"; }
   ...

JavaScript

$(document).ready(function() {
  $.simpleWeather({
    location: 'Alexandria, VA',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '</ul>';
  
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});