JSFiddle - React, Tailwind, and code Playground

by mjhea0

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.1.1/yeti/bootstrap.min.css">
<div class="container">
    <div ng-app="myApp" ng-controller="myController">
         <h1>Enter Quantity:</h1>

        <input type="number" ng-model="quantity">
         <h2>Total Cost: {{calculate(quantity) | currency}}</h2>

    </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.controller('myController', function ($scope, calculateService) {
    $scope.quantity = 100;
    $scope.calculate = function (number) {
        return calculateService.calculate(number);
    };
});

// Service 
app.factory('calculateService', function () {
    return {
        calculate: function (number) {
            return number * 10;
        }
    };
});