JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<label for="mesken"><input type="radio" name="tip" value="mesken" id="mesken" checked /> Mesken</label>
<label for="sanayi"><input type="radio" name="tip" value="sanayi" id="sanayi" /> Sanayi</label>
<br />
<label for="tuketim_miktari">Tüketim miktarı (kWh)</label> 
<input type="number" id="tuketim_miktari" /><br />
<button id="hesapla">Hesapla</button>

<div id="fatura">
    <p>Kayıp Bedeli: <span id="kayip_bedeli"></span></p>
    <p>İletim Bedeli: <span id="iletim_bedeli"></span></p>
    <p>Dağıtım Bedeli: <span id="dagitim_bedeli"></span></p>
    <p>Perakende Satış Hizmeti: <span id="perakende_satis_hizmeti"></span></p>
    <p>Sayaç Okuma: <span id="sayac_okuma"></span></p>
    <p>Elektrik Tüketim Vergisi: <span id="elektrik_tuketim_vergisi"></span></p>
    <p>TRT Payı: <span id="trt_payi"></span></p>
    <p>Enerji Fonu: <span id="enerji_fonu"></span></p>
    <p>Toplam: <span id="toplam"></span></p>
    <p>KDV (%18): <span id="kdv"></span></p>
    <p><strong>Fatura Toplamı: <span id="fatura_toplami"></span></strong></p>
</div>

CSS

body { font: 12px tahoma; }
#fatura { display: none; width: 250px; border: 1px solid #eee; margin-top: 20px; }
label { margin: 5px 0; }
p { margin: 0; padding: 5px 10px; clear: both; }
p span { float: right; }
#fatura p:nth-child(odd){ background-color:#eeeeee; }
#fatura p:nth-child(even)    { background-color:#ffffff; }

JavaScript

var consts = {
    birim: .18,
    katsayilar: {
        kayip: .037,
        iletim: .008668,
        dagitim: .027303,
        satis: .00569
    },
    sayac: {
        mesken: .54,
        sanayi: 5.5
    }
};
$(document).on('click', '#hesapla', function(e) {
    e.preventDefault();
    var tm = parseInt($('#tuketim_miktari').val(), 10),
        tip = $(':radio:checked').val(),
        tt = Math.round(tm * consts.birim, 2),
        kb = tm * consts.katsayilar.kayip,
        ib = tm * consts.katsayilar.iletim,
        db = tm * consts.katsayilar.dagitim,
        psh = tm * consts.katsayilar.satis,
        so = consts.sayac[tip],
        etv = ('mesken' == tip ? .05 : .01) * (tm + kb),
        trt = .02 * (tm + kb),
        ef = .01 * (tm + kb),
        toplam = tt + kb + ib + db + psh + so + etv + trt + ef,
        kdv = toplam * .18,
        fatura = toplam * 1.18;
    $('#kayip_bedeli').html(kb.toFixed(2) + ' TL');
    $('#iletim_bedeli').html(ib.toFixed(2) + ' TL');
    $('#dagitim_bedeli').html(db.toFixed(2) + ' TL');
    $('#perakende_satis_hizmeti').html(psh.toFixed(2) + ' TL');
    $('#sayac_okuma').html(so.toFixed(2) + ' TL');
    $('#elektrik_tuketim_vergisi').html(etv.toFixed(2) + ' TL');
    $('#trt_payi').html(trt.toFixed(2) + ' TL');
    $('#enerji_fonu').html(ef.toFixed(2) + ' TL');
    $('#toplam').html(toplam.toFixed(2) + ' TL');
    $('#kdv').html(kdv.toFixed(2) + ' TL');
    $('#fatura_toplami').html(fatura.toFixed(2) + ' TL');
    $('#fatura').show();
});