Simple JQuery and JSON with OpenWeatherMap API

index.html

<div id="city-name-wrapper">
  <h2 class="text-center">Weather for:</h2>
  <h2 class="text-center" id="cityname"></h2>

  <div id="city-forecast">
    <p class="weather-descr col-xs-12"></p>
    <p class="temp col-xs-12"></p>
    <p class="pressure col-xs-12"></p>
    <p class="wind-spd col-xs-12"></p>
    <div id="altit"></div>
    <div id="latitude-val"></div>

    <!-- forecast  -->
  </div>
</div>

script.js

$(document).ready(function() {
  // geolocation enabled

  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(showcityname);

    function showcityname(position) {
      var lat = position.coords.latitude;
      var longit = position.coords.longitude;
      var altitude = position.coords.altitude;
      var latitude_text = document.getElementById("latitude-val");
      var altitude_text = document.getElementById("altit");
      var city_name;
      var temp;
      var pressure;
      var wind_speed;
      var country_name;
      var weather_description;
      var apiKey = "5dd765a29b95b2e058dfd9f33a1dbd0d";

      altitude_text.innerHTML = "Altitude is " + altitude;
      latitude_text.innerHTML = "Latitude is " + lat;

      $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + longit + "&appid=" + apiKey, function(data) {

        city_name = data["name"];
        country_name = data["sys"]["country"];
        weather_description = data["weather"][0]["description"];
        temp = data["main"]["temp"];
        pressure = data["main"]["pressure"];
        wind_speed = data["wind"]["speed"];

        $("#cityname").html(city_name + " (" + country_name + ") " + "has " + weather_description);
        $(".temp").html(temp);
        $(".pressure").html(pressure + " mBar");
        $(".wind-spd").html(wind_speed + " m/s");

      })

    }

  }

})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Simple JQuery and JSON with OpenWeatherMap API.markdown

Simple JQuery and JSON with OpenWeatherMap API

A Pen by Marco Cubadda on CodePen.

License.

style.css

h2,
.temp, .pressure, .wind-spd, .weather-descr, #altit, #latitude-val {
  font-size: 40px;
}


#cityname,
.temp {
  margin-top: 15px;
}

#city-name-wrapper {
  text-align: center;
  
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

cant get it to work

regards

Working perfect.