JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="weather">
<p id="content">
<b><p class="location"></p></b>
</div>
</div>
    
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>
    var temp;
if(item.temp >= 70)
 temp = 'cold';
if(item.temp >= 80)
 temp = 'warm';
if(item.temp >= 90)
 temp = 'hot';
if(item.temp >= 100)
 temp = 'very hot;

document.write(temp);
    </script>

JavaScript

//Version 1.0


$(function(){

var APPID = 'Beach Day';
var DEG = 'f'

var weatherIconMap = [
'storm', 'storm', 'storm', 'lightning', 'lightning', 'snow', 'hail', 'hail',
        'drizzle', 'drizzle', 'rain', 'rain', 'rain', 'snow', 'snow', 'snow', 'snow',
        'hail', 'hail', 'fog', 'fog', 'fog', 'fog', 'wind', 'wind', 'snowflake',
        'cloud', 'cloud_moon', 'cloud_sun', 'cloud_moon', 'cloud_sun', 'moon', 'sun',
        'moon', 'sun', 'hail', 'sun', 'lightning', 'lightning', 'lightning', 'rain',
        'snowflake', 'snowflake', 'snowflake', 'cloud', 'rain', 'snow', 'lightning' ];

var weatherDiv = $('#weather'),
content = $('#content'),
location = $('p.location');

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
}
else{
showError("Your browser dose not support Geolocation!");
}


function locationSuccess(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;

var geoAPI = 'http://where.yahooapis.com/geocode?location='+lat+','+lon+'&flags=J&gflags=R&appid='+APPID;

var wsql = 'select * from weather.forecast where woeid=WID and u="'+DEG+'"',
weatherYQL = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(wsql)+'&format=json&callback=?',
code, city, results, woeid;
        
if (window.console && window.console.info){
console.info("Coordinates: %f %f", lat, lon);
}
        
$.getJSON(geoAPI, function(r){       
if(r.ResultSet.Found == 1){
                
results = r.ResultSet.Results;
city = results[0].city;
code = results[0].statecode || results[0].countrycode;
        
woeid = results[0].woeid;
$.getJSON(weatherYQL.replace('WID',woeid), function(r){
if(r.query && r.query.count == 1){
     
var item = r.query.results.channel.item.condition;

if(!item){
showError("We can't find weather information about your city!");
if(window.console && window.console.info){
console.info("%s, %s; woeid: %d", city, code, woeid);
}
return false;
}
                       ...