JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<header class="col-xs-12 text-center">
<h1>Free Code Camp </h1>
<h1>Weather App</h1>
</header>
<div class="col-xs-8 col-xs-offset-2">
<div class="text-center status">
<p><span id="city"></span> <span id="country"></span></p>
<p><span id="temp"></span><button id="#c/f">C/F</button></p>
<p id="desc"></p>
</div>
<div class="info">
<div class="develop">Developed by = Shumaila Bi Shaikh</div>
<div class="langs">Created by: HTML,CSS,ANGULARJS</div>
</div>
</div>
</div>
</div>
JavaScript
function error(err) {
console.log(`ERROR(${err.code}): ${err.message}`);
}
function showPosition(position) {
var lat = "lat= " + position.coords.latitude;
var lon = "lon= " + position.coords.longitude;
getWeather(lat,lon);
}
function getWeather(lat,lon){
var urlstring = "https://fcc-weather-api.glitch.me/api/current?" + lat + "&" + lon;
$.ajax({
url : urlstring,
dataType : "jsonP",
success : function(data){
var temp = data.main.temp;
var desc = data.weather[0].description;
var country = data.sys.country;
$("#desc").html(desc);
$("#temp").html(temp);
}
})
}
$( document ).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, error, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
$("#\\#c\\/f").click(function(){
var temp = $('#temp').text();
var cel = Math.round((temp - 32) * 5 / 9);
var faren = Math.round((temp * 9 / 5) + 32);
$("#temp").html(cel);
})
});