A Pen by Alain Armand on CodePen.
Created
November 4, 2016 07:55
-
-
Save idkjs/b2ea9f57c10297d47856a3d76d22256c to your computer and use it in GitHub Desktop.
Countries of the World
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.app(ng-app='app', ng-controller='ctrl') | |
h1 Countries of the World | |
input(ng-model='search', placeholder="Find country by name, capital city, currency etc.", type="text", required="") | |
.countries | |
.country(ng-repeat='country in countries | filter : search', ng-show='display( country.name )') | |
img.country__flag(ng-src='http://www.geognos.com/api/en/countries/flag/{{country.alpha2Code}}.png') | |
.inner | |
.country__name {{ country.name }} | |
.flex | |
.country__region | |
i.ion.ion-earth | |
span {{ country.region }} | |
.country__alpha-code | |
i.ion.ion-android-arrow-dropright | |
span {{ country.alpha2Code }}, | |
span {{ country.alpha3Code }} | |
.flex | |
.country__capital | |
i.ion.ion-flag | |
span {{ country.capital }} | |
.country__latlng | |
i.ion.ion-ios-location | |
span {{ country.latlng[0] >= 0 ? country.latlng[0] + "N" : -country.latlng[0] + "S"}}, | |
span {{ country.latlng[1] >= 0 ? country.latlng[1] + "E" : -country.latlng[1] + "W" }} | |
.flex | |
.country__population | |
i.ion.ion-ios-people | |
span {{ country.population / 1000000 | number : 2 }} mln | |
.country__area | |
i.ion.ion-stop | |
span {{ country.area }} km² | |
.flex | |
.country__numeric-codes | |
i.ion.ion-ios-telephone | |
span(ng-repeat='callingCode in country.callingCodes') {{ callingCode }} | |
.country__domain | |
i.ion.ion-wifi | |
span(ng-repeat='domain in country.topLevelDomain') {{ domain }} | |
.flex | |
.country__currency | |
i.ion.ion-cash | |
span(ng-repeat='currency in country.currencies') {{ currency }} | |
.country__domain | |
i.ion.ion-arrow-graph-up-right | |
span {{ country.gini }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var app = angular.module('app', []); | |
app.controller('ctrl', ['$scope', '$http', function($scope, $http) { | |
$http({ | |
method: 'GET', | |
url: 'https://restcountries.eu/rest/v1/all' | |
}).then(function successCallback(response) { | |
$scope.countries = response.data; | |
}, function errorCallback(response) { | |
console.error( response ); | |
}); | |
var ommit = ['Åland Islands', 'Bonaire', 'United States Minor Outlying Islands', 'Curaçao', 'French Guiana', 'Guadeloupe', 'Moldova', 'Martinique','Réunion', 'Republic of Kosovo', 'Sint Maarten', 'South Georgia','South Sudan'] | |
$scope.display = function( name ) { | |
for (var i = 0; i < ommit.length; i++) { | |
if ( name == ommit[i] ) return false; | |
} | |
return true; | |
}; | |
}]); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' | |
@import 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500' | |
$color: #1abc9c | |
input::-webkit-input-placeholder | |
font-family: 'Roboto', sans-serif | |
transition: all 0.3s ease-in-out | |
input | |
font-size: 0.66rem | |
margin: 2em auto | |
width: 300px | |
display: block | |
border: none | |
padding: 10px 0 | |
border-bottom: solid 1px $color | |
transition: all 0.3s cubic-bezier(.64,.09,.08,1) | |
background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%) | |
background-position: -300px 0 | |
background-size: 300px 100% | |
background-repeat: no-repeat | |
color: darken($color, 20%) | |
&:focus, &:valid | |
box-shadow: none | |
outline: none | |
background-position: 0 0 | |
&::-webkit-input-placeholder | |
color: $color | |
font-size: 11px | |
transform: translateY(-20px) | |
visibility: visible !important | |
* | |
box-sizing: border-box | |
margin: 0 | |
padding: 0 | |
font: | |
weight: 300 | |
family: 'Roboto', sans-serif | |
body | |
line-height: 1.35 | |
color: #424242 | |
background: #e2e1e0 | |
h1, h2, h3, h4, h5, h6 | |
color: #212121 | |
text-align: center | |
.ion | |
margin-right: 3px | |
span + span | |
margin-left: 4px | |
.countries | |
display: flex | |
flex-wrap: wrap | |
justify-content: center | |
.country | |
position: relative | |
border-radius: 2px | |
margin: 0.5em auto | |
overflow: hidden | |
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) | |
background: #FFF | |
.inner | |
padding: 0 1em 0.5em 1em | |
.flex | |
display: flex | |
justify-content: space-between | |
align-items: center | |
&__flag | |
width: 100% | |
&__name | |
font-size: 2em | |
text-align: center | |
&__region | |
text-align: center | |
body | |
/* ===== == = === Base Styles === = == ===== */ | |
font-size: 11px | |
.country | |
width: calc(100% - 1rem) | |
/* ===== == = === 20em (320px) === = == ===== */ | |
@media (min-width : 20rem) | |
font-size: 12px | |
.country | |
width: calc(50% - 1em) | |
/* ===== == = === 30em (480px) === = == ===== */ | |
@media (min-width : 30rem) | |
font-size: 13px | |
.country | |
width: calc(50% - 1em) | |
/* ===== == = === 37.5em (600px) === = == ===== */ | |
@media (min-width: 37.5rem) | |
font-size: 13.75px | |
/* ===== == = === 48em (768px) === = == ===== */ | |
@media (min-width : 48rem) | |
font-size: 14.8px | |
.country | |
width: calc(25% - 1em) | |
/* ===== == = === 62.25em (992px) === = == ===== */ | |
@media (min-width : 62em) | |
font-size: 16.2px | |
/* ===== == = === 68.75em (1100px) === = == ===== */ | |
@media (min-width : 68.75rem) | |
font-size: 16.875px | |
.country | |
width: calc(20% - 1em) | |
/* ===== == = === 81.25em (1300px) === = == ===== */ | |
@media (min-width : 81.25rem) | |
font-size: 18.125px | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment