cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html ng-app="localWeather">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">
	<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
</head>
<body id="myPage" data-spy="scroll" data-offset="60" ng-controller="LocalWeatherController as localWeatherController">
	<div class="spinner" ng-show="!isLoaded">
		<div class="double-bounce1"></div>
		<div class="double-bounce2"></div>
	</div>

	<div class="jumbotron text-center" ng-cloack ng-show="isLoaded">
		<h3>Local Weather</h3>
		<div class="form">
			<p>{{location}}</p>
			<p>{{temperature}} 
				°<a id="unitChanger" ng-click="localWeatherController.changeUnit()">{{unit}}</a>
			</p>
			<span ng-class="iconClass">
			</span>
		</div>

		<footer>
			<p>By nickrfer.</p>
			<p>
				<a href="https://github.com/nickrfer" target='_blank'>
					<i class="fa fa-github fa-fw"></i>
				</a>
				<a href="https://www.linkedin.com/in/nickrfer" target='_blank'>
					<i class="fa fa-linkedin fa-fw"></i>
				</a>
				<a href="https://www.freecodecamp.com/nickrfer" target='_blank'>
					(<i class="fa fa-fire fa-fw"></i>)
				</a>
				<a href="https://codepen.io/nickrfer" target='_blank'>
					<i class="fa fa-codepen fa-fw"></i>
				</a>
			</p>
			<br />
			<p><i>Special thanks to <a href="http://openweathermap.org/" target="_blank">open weather map</a> for their free API, <a href="http://weathericons.io/" target="_blank">weather-icons</a> and <a href="http://tobiasahlin.com/spinkit/" target="_blank">spinkit</a>!</i></p>	
		</footer>

		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
	</body>
	</html>
            
          
!
            
              span.wi {
	font-size: 50px;
	color: #2196f3;
}
#unitChanger {
	cursor: pointer; 
	cursor: hand; 
	text-decoration:none;
}
footer {
	padding-top: 50px;
	text-align: center;
}
footer p i {
	font-size: 12px;
}
a:hover {
	text-decoration: none;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
  margin-top: 15em;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
            
          
!
            
              var app = angular.module('localWeather', []);

var unitChangeMap = {
  'C': 'F',
  'F': 'C'
};

app.controller('LocalWeatherController', [ '$scope', '$http', '$timeout',
  function($scope, $http, $timeout) {

    var getCity = function() {
      return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
    };

    var getLocalWeather = function(location) {
      return $http.get('http://api.openweathermap.org/data/2.5/weather', {
        params: {
          dataType: 'jsonp',
          jsonCallback: 'jsonp',
          appid: '8b7dbdc13967c69776c954193033f2bb',
          units: 'metric',
          q: location.data.city
        }
      });
    }

    var showWeather = function(data) {
      var prefix = 'wi wi-';
      var code = data.weather[0].id;
      var icon = weatherIcons[code].icon;

      // code bellow is from https://gist.github.com/tbranyen/62d974681dea8ee0caa1

      // If we are not in the ranges mentioned above, add a day/night prefix.
      if (!(code > 699 && code < 800) && !(code > 899 && code < 1000)) {
        icon = 'day-' + icon;
      }
      // Finally tack on the prefix.
      $scope.iconClass = prefix + icon;
      $scope.temperature = Math.round(data.main.temp);
      $scope.unit = 'C';
      $scope.location = data.name + ', ' + data.sys.country;
      

      $timeout(function() {$scope.isLoaded = true;
      }, 1000);
    };

    this.changeUnit = function() {
      $scope.unit = unitChangeMap[$scope.unit]; 
      $scope.temperature = convertUnit($scope.unit, $scope.temperature);
    };

    getCity().then(function(location) {
      getLocalWeather(location).then(function(response) {
        showWeather(response.data);
      });
    });
  }]);

function convertUnit(unit, temperature) {
  if (unit == 'C') {
    var celsius = (temperature -32) * 5 / 9;
    temperature = Math.round(celsius);
  } else {
    fahrenheit = temperature * 9 / 5 + 32;
    temperature = Math.round(fahrenheit);
  }
  return temperature;
}

var weatherIcons =
{
  "200": {
    "label": "thunderstorm with light rain",
    "icon": "storm-showers"
  },

  "201": {
    "label": "thunderstorm with rain",
    "icon": "storm-showers"
  },

  "202": {
    "label": "thunderstorm with heavy rain",
    "icon": "storm-showers"
  },

  "210": {
    "label": "light thunderstorm",
    "icon": "storm-showers"
  },

  "211": {
    "label": "thunderstorm",
    "icon": "thunderstorm"
  },

  "212": {
    "label": "heavy thunderstorm",
    "icon": "thunderstorm"
  },

  "221": {
    "label": "ragged thunderstorm",
    "icon": "thunderstorm"
  },

  "230": {
    "label": "thunderstorm with light drizzle",
    "icon": "storm-showers"
  },

  "231": {
    "label": "thunderstorm with drizzle",
    "icon": "storm-showers"
  },

  "232": {
    "label": "thunderstorm with heavy drizzle",
    "icon": "storm-showers"
  },

  "300": {
    "label": "light intensity drizzle",
    "icon": "sprinkle"
  },

  "301": {
    "label": "drizzle",
    "icon": "sprinkle"
  },

  "302": {
    "label": "heavy intensity drizzle",
    "icon": "sprinkle"
  },

  "310": {
    "label": "light intensity drizzle rain",
    "icon": "sprinkle"
  },

  "311": {
    "label": "drizzle rain",
    "icon": "sprinkle"
  },

  "312": {
    "label": "heavy intensity drizzle rain",
    "icon": "sprinkle"
  },

  "313": {
    "label": "shower rain and drizzle",
    "icon": "sprinkle"
  },

  "314": {
    "label": "heavy shower rain and drizzle",
    "icon": "sprinkle"
  },

  "321": {
    "label": "shower drizzle",
    "icon": "sprinkle"
  },

  "500": {
    "label": "light rain",
    "icon": "rain"
  },

  "501": {
    "label": "moderate rain",
    "icon": "rain"
  },

  "502": {
    "label": "heavy intensity rain",
    "icon": "rain"
  },

  "503": {
    "label": "very heavy rain",
    "icon": "rain"
  },

  "504": {
    "label": "extreme rain",
    "icon": "rain"
  },

  "511": {
    "label": "freezing rain",
    "icon": "rain-mix"
  },

  "520": {
    "label": "light intensity shower rain",
    "icon": "showers"
  },

  "521": {
    "label": "shower rain",
    "icon": "showers"
  },

  "522": {
    "label": "heavy intensity shower rain",
    "icon": "showers"
  },

  "531": {
    "label": "ragged shower rain",
    "icon": "showers"
  },

  "600": {
    "label": "light snow",
    "icon": "snow"
  },

  "601": {
    "label": "snow",
    "icon": "snow"
  },

  "602": {
    "label": "heavy snow",
    "icon": "snow"
  },

  "611": {
    "label": "sleet",
    "icon": "sleet"
  },

  "612": {
    "label": "shower sleet",
    "icon": "sleet"
  },

  "615": {
    "label": "light rain and snow",
    "icon": "rain-mix"
  },

  "616": {
    "label": "rain and snow",
    "icon": "rain-mix"
  },

  "620": {
    "label": "light shower snow",
    "icon": "rain-mix"
  },

  "621": {
    "label": "shower snow",
    "icon": "rain-mix"
  },

  "622": {
    "label": "heavy shower snow",
    "icon": "rain-mix"
  },

  "701": {
    "label": "mist",
    "icon": "sprinkle"
  },

  "711": {
    "label": "smoke",
    "icon": "smoke"
  },

  "721": {
    "label": "haze",
    "icon": "day-haze"
  },

  "731": {
    "label": "sand, dust whirls",
    "icon": "cloudy-gusts"
  },

  "741": {
    "label": "fog",
    "icon": "fog"
  },

  "751": {
    "label": "sand",
    "icon": "cloudy-gusts"
  },

  "761": {
    "label": "dust",
    "icon": "dust"
  },

  "762": {
    "label": "volcanic ash",
    "icon": "smog"
  },

  "771": {
    "label": "squalls",
    "icon": "day-windy"
  },

  "781": {
    "label": "tornado",
    "icon": "tornado"
  },

  "800": {
    "label": "clear sky",
    "icon": "sunny"
  },

  "801": {
    "label": "few clouds",
    "icon": "cloudy"
  },

  "802": {
    "label": "scattered clouds",
    "icon": "cloudy"
  },

  "803": {
    "label": "broken clouds",
    "icon": "cloudy"
  },

  "804": {
    "label": "overcast clouds",
    "icon": "cloudy"
  },


  "900": {
    "label": "tornado",
    "icon": "tornado"
  },

  "901": {
    "label": "tropical storm",
    "icon": "hurricane"
  },

  "902": {
    "label": "hurricane",
    "icon": "hurricane"
  },

  "903": {
    "label": "cold",
    "icon": "snowflake-cold"
  },

  "904": {
    "label": "hot",
    "icon": "hot"
  },

  "905": {
    "label": "windy",
    "icon": "windy"
  },

  "906": {
    "label": "hail",
    "icon": "hail"
  },

  "951": {
    "label": "calm",
    "icon": "sunny"
  },

  "952": {
    "label": "light breeze",
    "icon": "cloudy-gusts"
  },

  "953": {
    "label": "gentle breeze",
    "icon": "cloudy-gusts"
  },

  "954": {
    "label": "moderate breeze",
    "icon": "cloudy-gusts"
  },

  "955": {
    "label": "fresh breeze",
    "icon": "cloudy-gusts"
  },

  "956": {
    "label": "strong breeze",
    "icon": "cloudy-gusts"
  },

  "957": {
    "label": "high wind, near gale",
    "icon": "cloudy-gusts"
  },

  "958": {
    "label": "gale",
    "icon": "cloudy-gusts"
  },

  "959": {
    "label": "severe gale",
    "icon": "cloudy-gusts"
  },

  "960": {
    "label": "storm",
    "icon": "thunderstorm"
  },

  "961": {
    "label": "violent storm",
    "icon": "thunderstorm"
  },

  "962": {
    "label": "hurricane",
    "icon": "cloudy-gusts"
  }
}
            
          
!
999px
Loading ..................

Console