<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
          background: black;
          color: white;
        }
        
        pre code {
          font: 11pt/1.25 Monaco, monospace;
        }
        
        .debug { color: Snow; }
        .info  { color: LawnGreen; }
        .warn  { color: GoldenRod; }
        .error { color: LightCoral; }
    </style>
    <script>console.clear()</script>
    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>
    <script>
        SystemJS.config({
            paths: {
                "npm:": "//unpkg.com/",
                "app/": "src/"
            },
            browserConfig: {
                "baseURL": "."
            },
            devConfig: {
                "map": {
                    "plugin-babel": "npm:systemjs-plugin-babel@0.0.17",
                    "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js"
                }
            },
            transpiler: "plugin-babel",
            packages: {
                "app": {
                    "main": "app.js",
                    "meta": {
                        "*.js": {
                            "loader": "plugin-babel"
                        }
                    }
                }
            }
        });

        SystemJS.config({
            map: {
                "data.task": "npm:data.task@3.1.1",
                "process": "npm:jspm-nodelibs-process@0.2.0",
                "ramda": "npm:ramda"
            },
            packages: {       
                "ramda": {
                  "main": "index.js",
                  "format": "cjs",
                  "meta": {
                    "*.json": {
                      "format": "json"
                    },
                    "tmp-test-bundle.js": {
                      "cjsRequireDetection": false
                    }
                  }
                },
              
                "data.task": {
                    "main": "lib/index.js",
                    "format": "cjs",
                    "meta": {
                        "*": {
                            "globals": {
                                "process": "process"
                            }
                        },
                        "*.json": {
                            "format": "json"
                        }
                    },
                    "map": {
                        "./lib": "./lib/index.js"
                    }
                }
            }
        });
    </script>
</head>

<body>
    <script>
        System.import('app')
    </script>
  
</body>

</html>
import console from './console'

const text = `
'have no fear of this mess,'
said the cat in the hat.
'i always pick up all my playthings
and so...
i will show you another
good trick that i know!'

then we saw him pick up all the things that were down.
he picked up the cake,
and the rake, and the gown,
and the milk, and the strings,
and the books, and the dish,
and the fan, and the cup,
and the ship, and the fish.
and he put them away.
then he said, 'that is that.'
and then he was gone
with a tip of his hat.

then our mother came in
and she said to us two,
'did you have any fun?
tell me.  what did you do?'

and sally and i did not know
what to say.
should we tell her
the things that went on there that day?

should we tell her about it?
now, what SHOULD we do?
well...
what would YOU do
if your mother asked YOU?`

console.clear()

import { match, countBy, identity, compose, toLower, invert, sortBy, map } from 'ramda'

const countWords = compose(
    map(sortBy(identity)),
    invert,
    countBy(toLower),
    match(/\w+/g)
)
console.log(countWords(text))    
/**
 * This pen allows you to use all your favourite console functions right in
 * CodePen: `console.log`, `console.info`, `console.warn`, `console.error`,
 * and `console.clear` are supported.
 *
 * To scroll the console to the bottom as messages are printed use the
 * `console.follow` function.
 *
 * Made with love by @nullobject (http://joshbassett.info), 2014.
 */

export default (function() {
  var following = false,
      pre       = document.createElement('pre'),
      code      = document.createElement('code');

  pre.appendChild(code);
  document.body.appendChild(pre);
  
  return {
    clear:  clear,
    follow: follow,
    log:    print.bind(this, 'debug'),
    info:   print.bind(this, 'info'),
    warn:   print.bind(this, 'warn'),
    error:  print.bind(this, 'error')
  };
  
  function clear() {
    while (code.hasChildNodes()) {
      code.removeChild(code.lastChild);
    }
  }
  
  function follow() {
    following = true;
  }
  
  function print(className, object) {
    var s    = (typeof object === 'string') ? object : JSON.stringify(object),
        span = document.createElement('span'),
        text = document.createTextNode(s + '\n');

    span.setAttribute('class', className);
    span.appendChild(text);
    code.appendChild(span);
    
    if (following) {
      scrollToBottom();
    }
  }
  
  function scrollToBottom() {
    window.scrollTo(0, document.body.scrollHeight);
  }
}());