IP Address

index.html

<div class="centered" ng-app="app" ng-controller="IPController">
	<h1>Your IP address is:</h1>
	<div class="box">
		<ip-address></ip-address>
	</div>
</div>

ip-address.markdown

IP Address

IP Address

A Pen by zurfyx on CodePen.

License.

script.js

(function(){
	angular.module('app', [])
	.factory('IP', IP)
	.directive('ipAddress', IPAddressDirective)
	.controller('IPController', IPController);

	function IP($http){
		return {
			get: get
		};

		function get(callback){
			callback = callback || angular.noop;
			console.log('Gathering IP...');
			$http.get('https://get.geojs.io/v1/ip/country.json')
				.then(function(response) {
				console.log('Success: ' + response.data.ip);
				callback(response.data.ip);
			}, function(response) {
				console.log('Error: ' + response.status);
				callback('Can\'t retrieve :(');
			});
		};
	};
	
	IPAddressDirective.$inject = ['IP'];
	function IPAddressDirective(IP){
		return {
			restrict: 'E',
			link: function($scope, element, attrs) {
				IP.get(function(data){
					 element.text(data);
				});
			},
			template: 'X.X.X.X'
		};
	};
	
	function IPController(){
		
	};
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

html, body {
	background-color: #383838;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: 300;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1 {
	color: #c8c8c8;
	font-weight: 300;
}

.box {
	color: #151515;
	background-color: #f4f4f4;
	border-radius: 3px;
	font-size: 42px;
	font-weight: 400;
	padding: 25px 200px 25px 200px;
	text-align:center;
}