JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="http://brigand.github.io/knockout-semantic/lib/knockout-min.js"></script>
<script src="http://brigand.github.io/knockout-semantic/lib/knockout-es5.min.js"></script>
<script src="http://brigand.github.io/knockout-semantic/build/knockout-semantic.js"></script>
<div class="ui container">
    <div class="ui form">
    <div class="two fields">
        <div class="ui field">
            <label>Watts in Heavy Load</label>
            <input type="text" data-bind="value: vm.computerWatts">
        </div>
        <div class="ui field">
            <label>Price per KWH (USD)</label>
            <input type="text" data-bind="value: vm.kwh">
        </div>
    </div>
    <div class="two fields">
        <div class="ui field">
            <label>Minutes to Render</label>
            <input type="text" data-bind="value: vm.minutes">
        </div>
        <div class="ui field">
            <label>Render Points</label>
            <input type="text" data-bind="value: vm.renderPoints">
        </div>
    </div>
            <hr />
            
            <div class="two fields">
        <div class="ui field">
            <label>Render your Self:</label>
            <input type="text" data-bind="value: vm.selfCost()">
        </div>
        <div class="ui field">
            <label>RayPump</label>
            <input type="text" data-bind="value: vm.rayCost()">
        </div>
    </div>
</div>
</div>

CSS

html, body {
    height: 100%;
}
html, body {
    font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
}

JavaScript

var aproxEuroToUSD = 1.36;

var vm = {
    renderPoints: 6,
    minutes: 12,
    computerWatts: 400,
    kwh: 0.31,
    selfCost: function(){
        var hours = Number(vm.minutes) / 60;
        var kw = Number(vm.computerWatts / 1000);
        var dollars = Number(vm.kwh) * kw * hours;
        return (dollars * 100).toFixed(2) + " cents";
    },
    rayCost: function(){
        var cents = vm.renderPoints * aproxEuroToUSD;
        return (cents).toFixed(2) + " cents";
    }
};

ko.track(vm);

ko.applyBindings(vm);