Observer

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>

  <body>
    <h1>Module: ES2015</h1>
    <p id="content"></p>
    
    <script src="https://cdn.rawgit.com/systemjs/systemjs/0.19.39/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./main');
    </script>
  </body>

</html>

import { Dog, Wolf } from './zoo';
import { Location } from './location';

let content = document.getElementById('content');

let sherlock = new Dog('Sherlock', 'beagle');
content.innerHTML += `${sherlock.name}: ${sherlock.bark}`;

let whisky = new Dog('Whisky', 'husky');
content.innerHTML += `<br/>${whisky.name}: ${whisky.bark}`;

let werewolf = new Wolf('Werewolf');
content.innerHTML += `<br/>${werewolf.name}: ${werewolf.bark}`;

let sf = new Location('San Francisco', 'US', false);
let paris = new Location('Paris', 'FR', true);

sf.getMyCurrentWeather(printToDOM);
paris.getMyCurrentWeather(printToDOM);

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "https://cdn.rawgit.com/tiagorg/test/master/jspm_packages/github/*",
    "npm:*": "https://cdn.rawgit.com/tiagorg/test/master/jspm_packages/npm/*"
  },

  map: {
    "babel": "npm:babel-core@5.8.38",
    "babel-runtime": "npm:babel-runtime@5.8.38",
    "core-js": "npm:core-js@1.2.7",
    "node-event-emitter": "npm:node-event-emitter@0.0.1",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.4.1"
    },
    "github:jspm/nodelibs-buffer@0.1.0": {
      "buffer": "npm:buffer@3.6.0"
    },
    "github:jspm/nodelibs-path@0.1.0": {
      "path-browserify": "npm:path-browserify@0.0.0"
    },
    "github:jspm/nodelibs-process@0.1.2": {
      "process": "npm:process@0.11.9"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "github:jspm/nodelibs-vm@0.1.0": {
      "vm-browserify": "npm:vm-browserify@0.0.4"
    },
    "npm:assert@1.4.1": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "util": "npm:util@0.10.3"
    },
    "npm:babel-runtime@5.8.38": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:buffer@3.6.0": {
      "base64-js": "npm:base64-js@0.0.8",
      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "ieee754": "npm:ieee754@1.1.8",
      "isarray": "npm:isarray@1.0.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:core-js@1.2.7": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.2"
    },
    "npm:inherits@2.0.1": {
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:path-browserify@0.0.0": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:process@0.11.9": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "vm": "github:jspm/nodelibs-vm@0.1.0"
    },
    "npm:util@0.10.3": {
      "inherits": "npm:inherits@2.0.1",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:vm-browserify@0.0.4": {
      "indexof": "npm:indexof@0.0.1"
    }
  }
});

// zoo.js
let getBarkStyle = isHowler => isHowler ? 'woooooow!' : 'woof, woof!';

export function Dog (name, breed) {
  this.name = name;
  this.bark = getBarkStyle(breed === 'husky');
}

export function Wolf(name) {
  this.name = name;
  this.bark = getBarkStyle(true);
}

import { getCurrentWeather } from './getCurrentWeather';

let printToDOM = response => {
    document.getElementById('content').innerHTML += `<br/>${response}`;
};

export function Location(city, country, useMetric) {
    this.city = city;
    this.country = country;
    this.useMetric = useMetric;
    this.getMyCurrentWeather = getCurrentWeather(this.city, this.country, this.useMetric, printToDOM);
}

let ajax = function(url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onload = function() {
        if (this.status === 200) {
            callback(JSON.parse(this.responseText));
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
};

let generateResponse = function(city, country, useMetric, printFn, data) {
    var unit = `°${useMetric? 'C': 'F'}`;
    // OpenWeather API response: http://openweathermap.org/current#current_JSON
    printFn(`${city}, ${country}: ${data.weather[0].main}. Now ${data.main.temp}${unit}.`);
};

export function getCurrentWeather(city, country, useMetric, printFn) {
    var unit = useMetric ? 'metric' : 'imperial';
    // OpenWeather API request: http://openweathermap.org/current#one
    var url = `http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&units=${unit}&APPID=c48ddbf104363ec75645b36b470559fc`;
    ajax(url, generateResponse.bind(undefined, city, country, useMetric, printFn));
}