JSFiddle - React, Tailwind, and code Playground

by yclian

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://github.com/rlayte/mvc.js/raw/master/lib/mvc.min.js"></script>
<body>
    <div>

        <h1>Yes! $ Calculator</h1>
        <sub id="latest_rate">Latest rate <a href="https://www.yes.my/portal/public/ytlc/sayyes" target="__new">here</a>.</sub>

        <div id="result"></div>

        <input name="usage" type="number" required="required" value="1024" min="0.0" autofocus="true" /><span>GB</span>
        <br/>
        <input name="calculate" type="submit" value="Calculate" />

        <script type="text/javascript">

            var yescalc = {

                values: {
                    tiers: {
                        0:      0.0300,
                        2560:   0.0264,
                        3072:   0.0225,
                        4096:   0.0210
                    }
                },

                models: {
                    calculator: {
                        requires: ['tiers'],
                        facade: (function(){
                            return {
                                init: function(){
                                },
                                calculate: function(megabytes){
                                    tiers = _.keys(yescalc.values.tiers).reverse();
                                    tier = _.select(tiers, function(v){ return megabytes >= v; }).shift();
                                    price = yescalc.values.tiers[tier] * megabytes;
                                    price_orig = yescalc.values.tiers[0] * megabytes;

                                    return {
                                        'rate': yescalc.values.tiers[tier],
                                        'price': price,
                                        'price_orig': price_orig
                                    };
                                },
                                reset: function(){
                     ...