WeatherApp

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>WeatherApp</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="weatherApp" ng-controller="weatherCtrl" class="text-center info" ng-style="weatherBackground">
  <h1> {{channelInfo.heading}}
</h1>
  <h2>{{channelInfo.subheading1}}
    </h2>
  <a ng-href="{{channelInfo.subheading2.link}}" target="blank">
  <h3>
    {{channelInfo.subheading2.name}}</a></h3>
  <a class="btn-lg btn-primary">{{description | uppercase}} <img ng-src="{{icon}}"/>
  </a>
  <a class="btn-lg btn-primary">
  {{speed}} 
    </a>
  <a class="btn-lg btn-primary">
  {{name}}
      </a>
  <a class="btn-lg btn-primary" ng-init="tempVal=true" ng-show="tempVal" ng-click="tempVal=!tempVal">
  {{ftemp}}
        </a>
  <a class="btn-lg btn-primary" ng-show="!tempVal" ng-click="tempVal=!tempVal">
  {{ctemp}}
          </a>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/topklar/weatherapp-aBBQvM */
.info {
  font-family:'Montserrat';
}

.btn-lg{
  margin: 5px;
  border: 5px;
  padding: 5px;
}

/*Downloaded from https://www.codeseek.co/topklar/weatherapp-aBBQvM */
var classApp = angular.module('weatherApp', []);

classApp.controller('weatherCtrl', function($scope, $http) {
  var vm = $scope;
  vm.channelInfo = {
    heading: "Open Weather API Project",
    subheading1: "Free Code Camp: Front End Projects",
    subheading2: {
      name: "Check out my LinkedIn Profile",
      link: "https://www.linkedin.com/in/charles-ogun-26595171?trk=hp-identity-name",
    }
  };
  $http.get("http://ip-api.com/json").success(function(data) {
    vm.lat = data.lat;
    vm.lon = data.lon;
    var apiKey = "5674034f43a243f142c8de2f159ff911";
    var openweatherurl = "http://api.openweathermap.org/data/2.5/weather?lat=" + vm.lat + "&lon=" + vm.lon + "&appid=" + apiKey;

    $http.get(openweatherurl).success(function(data) {
      vm.description = data.weather[0].description;
      vm.speed = (2.237 * data.wind.speed).toFixed(1) + "mph";
      vm.name = data.name;
      vm.temp = data.main.temp;
      vm.ftemp = (vm.temp * (9 / 5) - 459.67).toFixed(1) + " (°F)";
      vm.ctemp = (vm.temp - 273).toFixed(1) + "(°C)";
      vm.icon = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
      switch (vm.description) {
        case 'light intensity shower rain':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1434118489318-42a0e62c6235?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=30f540c9e2b036c487d669fcb6655e60')",
              "background-size": "cover",
            };
            break;
          }
          case 'broken clouds':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1453286465977-2de00962433b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=17eae8b191954eecbea24c80c55c4c1c')",
              "background-size": "cover",
            };
            break;
          }
           case 'few cloud':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1471733091092-73a03861dea7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=ac7102f8380649b38154b1bc6be43f1b')",
              "background-size": "cover",
            };
            break;
          }
           case 'mist':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/uploads/1411419068566071cef10/7562527b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=637d93900e020a3b76988a419dd70f88')",
              "background-size": "cover",
            };
            break;
          }
           case 'rain':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/uploads/14116603688211a68546c/30f8f30b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=fca8de23bd59ff82d6231f8ec68c4d18')",
              "background-size": "cover",
            };
            break;
          }
           case 'scattered clouds':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1454649978226-6dd578c28449?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=90e7564daa4af7e600027db3a64ae024')",
              "background-size": "cover",
            };
            break;
          }
            case 'shower rain':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1446053030967-d49c7b13a02c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=7d6991de61b05d2c14013e45d80244eb')",
              "background-size": "cover",
            };
            break;
          }
            case 'snow':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1431036101494-66a36de47def?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=7bea41602458b7f44ccac42abf12be46')",
              "background-size": "cover",
            };
            break;
          }
               case 'thunderstorm':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1427507791254-e8d2fe7db7c0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=38ac6bba3be77ff055bc49becb10058c')",
              "background-size": "cover",
            };
            break;
          }
          case 'moderate rain':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1468476396571-4d6f2a427ee7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=a3f79a3f21939267acdf193694338805')",
              "background-size": "cover",
            };
            break;
          }
          case 'light rain':
          {
            vm.weatherBackground = {
              "background": "url('https://images.unsplash.com/photo-1468476396571-4d6f2a427ee7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=a3f79a3f21939267acdf193694338805')",
              "background-size": "cover",
            };
            break;

          }       default:
          vm.weatherBackground = {
            "background": "url('https://images.unsplash.com/photo-1468421870903-4df1664ac249?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=056ac1d240b8bc1b864fdf1b7546ba4f')",
            "background-size": "cover",
          };
          break;
      }
    });
  });
});

Comments