JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<table class="table">
    <tr>
        <td class="r">
            <label class="label">Sayı 1:
                <input class="c" type="text" data-bind="value: sayi1" />
            </label>
            <label class="label">Sayı 2:
                <input class="c" type="text" data-bind="value: sayi2" />
            </label>
            <label class="badge badge-inverse">Sonuç: <span data-bind="text: hesaplanan" />
            </label>
        </td>
        <td class="y">
            <label>
                <input type="radio" value="Toplama" data-bind="checked: secili"> Toplama</label>
            <label>
                <input type="radio" value="Çıkarma" data-bind="checked: secili"> Çıkarma</label>
            <label>
                <input type="radio" value="Çarpma" data-bind="checked: secili"> Çarpma</label>
            <label>
                <input type="radio" value="Bölme" data-bind="checked: secili"> Bölme</label>
        </td>
    </tr>
</table>

CSS

table {
    margin-top:10px;
    width:300px !important;
}
label {
    float:left;
}
td {
    vertical-align: top;
    padding:10px;
}
.c {
    width: 100px;
}
.y {
    background-color: rgb(157, 219, 157);
}
.r {
    background-color: rgb(214, 159, 174);
}

JavaScript

var myView = function () {
    this.sayi1 = ko.observable(15);
    this.sayi2 = ko.observable(20);
    this.secili = ko.observable("Toplama");
    this.hesaplanan = ko.computed(function () {
        var sonuc, s1, s2;
        s1 = parseInt(this.sayi1());
        s2 = parseInt(this.sayi2());

        if ("Çıkarma" === this.secili()) sonuc = s1 - s2;
        else if ("Çarpma" === this.secili()) sonuc = s1 * s2;
        else if ("Bölme" === this.secili()) sonuc = s1 / s2;
        else sonuc = s1 + s2;
        return sonuc;
    }, this);
};
ko.applyBindings(new myView);