Weather App

In this example below you will see how to do a Weather App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nikhil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nikhil ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

  
  
</head>

<body>

  <div class="container">
  <h1 class="h1 text-center">Free Code Camp Zipline
Local Weather App</h1>
  
  <div class="icon"></div>
  <div class="temp"></div>
  <div class="place"></div>
  <div class="condition"></div>
  <div class="wind"></div>
  <div id="postal"></div>
  
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nikhil/weather-app-gaPWYX */
getLocation();
function getLocation() {
    $.get('http://ipinfo.io', function (location) {
        console.log(location);
        $('.place').append(location.city + ', ').append(location.region);
        var units = getUnits(location.country);
        getWeather(location.loc, units);
    }, 'jsonp');
}

function getWeather(loc, units){
  lat = loc.split(',')[0];
  lon = loc.split(',')[1];
  console.log(lat,lon);
  var weatherApiUrl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=' + units;
  console.log(weatherApiUrl);
        $.get(weatherApiUrl, function (weather) {
            var windDir = convertWindDirection(weather.wind.deg);
            var temperature = weather.main.temp;
            var unitLabel;
            if (units === 'imperial') {
                unitLabel = 'F';
            } else {
                unitLabel = 'C';
            }
            temperature = parseFloat(temperature.toFixed(1));
            console.log(weather);
            $('.icon').append('<img src=\'http://openweathermap.org/img/w/' + weather.weather[0].icon + '.png\'>');
            $('.temp').append(temperature + ' ' + unitLabel);
            $('.condition').append(weather.weather[0].description);
            $('.wind').append(windDir + ' ' + weather.wind.speed + ' knots');
        }, 'jsonp');
}

function convertWindDirection(dir) {
        var rose = [
            'N',
            'NE',
            'E',
            'SE',
            'S',
            'SW',
            'W',
            'NW'
        ];
        var eightPoint = Math.floor(dir / 45);
        return rose[eightPoint];
    }

function getUnits(country) {
        var imperialCountries = [
            'US',
            'BS',
            'BZ',
            'KY',
            'PW'
        ];
        if (imperialCountries.indexOf(country) === -1) {
            var units = 'metric';
        } else {
            units = 'imperial';
        }
        console.log(country, units);
        return units;
    }

Comments