JSFiddle - React, Tailwind, and code Playground

by Charlie Melidosian

HTML

<script src="https://raw.githubusercontent.com/noazark/weather/master/dist/weather.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>weather.js</title>

    <!-- Bootstrap - for styling purposes only -->
    <link  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  </head>
  <body>
    <div class="container">
        <div class="row">
            <h1 class="text-center">Guntersville, AL</h1>
            <div class="col-sm-6">
                <h2>Current Conditions</h2>
                <h3 id="current"></h3>
            </div>
            <div class="col-sm-6">
                <h2>Forecast</h2>
                <h3 id="forecast"></h3>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../weather.js"></script>
    <script>
        Weather.getCurrent( "Guntersville", function( current ) {
            $( "#current" ).html( "Temperature: " + current.temperature() + "&deg;K or " +
                Weather.kelvinToFahrenheit( current.temperature() ) + "&deg;F or " +
                Weather.kelvinToCelsius( current.temperature() ) + "&deg;C" +
                "<br />Current Conditions: " + current.conditions() );
        });

        Weather.getForecast( "Guntersville", function ( forecast ) {
            $( "#forecast" ).html( "High: " + forecast.high() + "&deg;K or " +
                Weather.kelvinToFahrenheit( forecast.high() ) + "&deg;F or " +
                Weather.kelvinToCelsius( forecast.high() ) + "&deg;C<br />Low: " +
                forecast.low() + "&deg;K...

JavaScript

Weather.getCurrent("Kansas City", function(current) {
  console.log(
    ["currently:",current.temperature(),"and",current.conditions()].join(" ")
  );
});
 
Weather.getForecast("Kansas City", function(forecast) {
  console.log("forecast high: " + forecast.high());
  console.log("forecast low: " + forecast.low());
});