Weather

index.html

<h1 id="header">Weather in Your Current Location</h1>
<div class="list">
  <ul>
    <li id="tempIcon"></li>
    <li id="temp">temp</li>
    <li id="details">tempDetails</li>
    <li id="location">Location</li>
  </ul>
</div>
<div id="bob">
  <img src="http://vignette4.wikia.nocookie.net/harrypotterfanon/images/1/10/600px-Happy_smiley_face.png/revision/latest?cb=20141126010145">
</div>

<h1>Have an awesome day!</h1>

script.js

$(document).ready(function() {
  getLocation();
});

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  var units = "imperial"
  var weather = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&units=" + units;
  $.get(weather, function(value) {
    $("#temp").html(value.main.temp + " &#8457");
    $("#header").html("Weather in " + value.name + ", " + value.sys.country);
    $('#tempIcon').html('<img src="http://openweathermap.org/img/w/' + value.weather[0].icon + '.png">');
    console.log(value.weather[0].icon);

    $("#details").html(upperCase(value.weather[0].description));

    $('#location').html("Wind: " + value.wind.speed + " mph");
  });
}

var upperCase = function(value) {
  var arr = value.split(" ");
  for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i][0].toUpperCase() + arr[i].substr(1);
  }
  return arr.join(" ");
};

scripts

<script src="http://fonts.googleapis.com/css?family=Open+Sans:300"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color: tomato;
}

h1 {
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: white;
  font-size: 40px;
}

ul {
  text-align: center;
  margin: 0 auto;
  list-style: none;
}

.list {
  margin-top: 50px;
  margin-left: -35px;
}

li {
  border: 2px solid white;
  border-radius: 10px;
  padding: 5px 5px 5px 5px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: white;
  display: inline;
}

#tempIcon img{
  position: relative;
  margin-bottom: -22px;
}

#bob img{
  display: block;
  margin: auto;
  margin-top: 50px;
  width: 400px;
  
}

Weather.markdown

Weather

Uses OpenWeatherMap's API

A Pen by Grant Park on CodePen.

License.