JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<button class="btn">Toggle F/C</button>
<div id="weather"></div>

<button id="button" class="up"></button>

CSS

.btn {
    position: fixed;
    top: 20px;
    background: white;
    display: block;
    padding: 1px 1px 1px 1px;
}

#weather {
    margin-top:100px;
}

.up {
    background: #ccc;
    cursor: pointer;
    border-top: solid 2px #eaeaea;
    border-left: solid 2px #eaeaea;
    border-bottom: solid 2px #777;
    border-right: solid 2px #777;
    padding: 5px 5px;       
    }

.down {
    background: #bbb;
    border-top: solid 2px #777;
    border-left: solid 2px #777;
    border-bottom:solid 2px  #eaeaea;
    border-right: solid 2px #eaeaea;
    }

JavaScript

var temp = 'c';

function change() {
    if (temp == 'f') {
        temp = 'c';
    } else if (temp == 'c') {
        temp = 'f';
    }
    loadWeather('Akron, OH', '');
}
$('.btn').on('click', function () {
    change();
});

function loadWeather(location, woeid) {
    $.simpleWeather({
        location: location,
        woeid: woeid,
        unit: temp,
        success: function (weather) {
            html = '<h2>' + weather.temp + '&deg;' + weather.units.temp + '</h2>';
            html += '<ul><li>' + weather.city + ', ' + weather.region + ', ' + weather.country + '</li>';
            html += '<li class="currently">' + weather.currently + '</li>';
            $("#weather").html(html);
        }
    });
}
loadWeather('Akron, OH', '');

$('#button').click(function(){
        $(this).toggleClass("down");
});