Weather

index.html

<header>
<h1 class="text-center" style="color: white; font-family: Candal, arial"><b>Free weather app</b></h1>
</header>
<article>
  <div>
    <p id="text" class="text-center" style="color: white; margin: 30px"></p>
    <button id="switch" class="btn center-block">Switch C°/F°</button>
  </div>
</article>
<footer>
  <h6 style="color: red" class="text-center">build by <a href="github.com/orsh99" target="_blank">orsh99</a></h6>
</footer>

script.js

var key = "fbec19af73facd63b397db2d0e06a29f" //OpenWeather API key
//defined in document.ready function
var jsonUrl = "none"; 
var longitude; 
var latitude;
var unit = "C"; //default value
var currentTemp;


$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      longitude = position.coords.longitude;
      latitude = position.coords.latitude;
      jsonUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=" + key;
      show();
    });
  } else { //executed when no location data available
    $("#text").html('no geolocation data');
  }
});

function show() {  //show the weather
  $.getJSON( jsonUrl, function( data ) {
    if (unit == "C") {
    currentTemp = (data.main.temp - 273.15).toFixed(1) + "° C";
  } else {
    currentTemp = (1.8 * (data.main.temp - 273.15) + 32).toFixed(1) + "° F";
  }
    $("#text").html(currentTemp + "<br /><img src='http://openweathermap.org/img/w/" + data.weather[0].icon + ".png' alt='weather pic' style='width: 40px'>");
  });
};

function switchUnit() {
    if(unit == "C") {
      unit = "F";
    } 
    else {
      unit = "C";
    } 
    show();
};

$("#switch").click(switchUnit);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color: black;
}
header {
  margin: 30px;
}
article {
  font-size: 200%;
}
footer {
  margin: 20px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

Weather.markdown

Weather

A Pen by Or Sharabi on CodePen.

License.