<div class="container">
    <div class="top">
      <div class="row">
          <h1 class="cooltext" id="name"> Cambridge </h1>
      </div>
      <div class="row">
       <p class="cooltext" id="weather"> few clouds </p>
      </div>
      <div class="row">
        <img class="cooltext"  id="weather-image" src="https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F02n.png?1499366020844">
      </div>
      <div class="row bottom">
        <p class="cooltext" id="temperature">19.01 C</p>
      </div>
    </div>
  </div>
</div>

body {
  background: silver;
}

.container{
  width:30%;
}

.top {
  margin: 100px 0px 0px 0px;
    background-color:lightblue;
  border-style:solid;
  border-radius: 25px;
}

p {
  align-text: center;
}

.cooltext {
  margin: auto;
}

function get_coordinates() {
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      get_weather(longitude, latitude);
    })
  }
};

function get_weather(longitude, latitude) {
    $.ajax(
      {
        type: "GET",
        url: "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude,
        success: function(request){
          $("#name").html(request.name);
          $("#weather").html(request.weather[0].description);
          $("#weather-image").attr("src",request.weather[0].icon);
          $("#temperature").html(request.main.temp + " C");
        }
      }
    )
}

function convert_temp(temp, temp_type){
  if (temp_type == "C") {
    var new_temp = (temp * 9/5 + 32).toFixed(2);
    var result = new_temp + " F";
  } else {
    var new_temp = ((temp - 32) * 5/9).toFixed(2);
    var result = new_temp + " C";
  }
  return result
}

$(document).ready(function() {
  get_coordinates();
  $("#temperature").on("click", function(){ 
    var temp = $("#temperature").text();
    var temp_type = temp.split(' ')[1];
    var actual_temp = temp.split(' ')[0];
    var new_temp = convert_temp(actual_temp,temp_type);
    $("#temperature").html(new_temp);
  });
});