Countries of the World

countries-of-the-world.markdown

Countries of the World

A Pen by Alain Armand on CodePen.

License.

index.jade

.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 }}

script.js

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;
  };
  
}]);

scripts

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

style.sass

@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