JSFiddle - React, Tailwind, and code Playground

by MrTest

HTML

<form action="#">
    <div>
        <label>Monthly Payment</label>
        <input name="val1" type="number" />
    </div>
    <input type="submit" value="GO" />
</form>

<table border="0" width="100%">
    <thead>
        <tr>
            <th>NumberOfMonths</th>
            <th>Deposit</th>
            <th>InterestPerYear</th>
            <th>InterestInTotal</th>
            <th>AmountOfPayments</th>
            <th>AmountInTotal</th>
            <th>AmountOfCredit</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

CSS

@charset "utf-8";

/*! Reset
---------------------------------------------*/
* { margin: 0; padding: 0; border: none;}
body { font-family: Tahoma, Geneva, sans-serif; font-size: 12px;}
ul, ol { list-style: none ;}
img, a  { border: none; outline: none;}
a { text-decoration: none;}
.clr { display: block; width: 100%; height: 1px; clear: both;}

form { position: relative; left: -25px; width: 100%; background: #f3f3f3; display: block; padding: 10px 0px 10px 25px; margin: 10px 0px; }
form div { display: block; width: 100%; line-height: 30px; height: 30px; clear: both;}
form div label { display: inline-block; float: left; width: 150px; text-align: right; padding-right: 10px;}
form div input { display: inline-block; float: left; width: 250px; height: 20px; padding: 3px; border-radius: 4px;}
form input[type="submit"] { outline: none; display: block; width: 150px; margin-left: 266px; background: #44c8f1; border: 1px solid #fff; border-radius: 4px; color: #fff; padding: 3px 5px; text-align: center; width: 150px; cursor: pointer; }

/* Layout*/
.leftPane { display: inline-block; float: left; width: 18%; min-height: 100%; overflow: auto; padding: 25px 0px; } 
.rightPane { position: fixed; right: 0px; height: 94%; overflow-y: scroll;  width: 78%; padding: 2% 25px; border-left: 2px solid #44c8f1;} 

.leftPane li { padding: 10px 25px 10px 25px; position: relative;}

/* Tooltip */
.tooltip-icon { position: absolute; top: 4px; cursor:help; left: 5px;}
.tooltip-body { background: #44c8f1; color:#fff; padding:7px 12px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; margin:0; position:absolute; left:0; top:0; z-index:200; }
.tooltip-body .tip{position:absolute;left:-9px;top:0;bottom:0;width:9px;background:url('images/tip.png') right center no-repeat;}

/* Tabs */
ul.navi { display: block; height: 21px; width: 100%;}
ul.navi li { display: inline-block; float: left; margin-right: 5px;}
ul.navi li.ui-state-default { padding: 3px 5px; border-radius:4px;...

JavaScript

$('form').submit(function() {

    // Clear the table
    $('table tbody').html(' ');

    //Get the value
    var InputedValue = $('form input[name="val1"]').val();

    // 12 ,18, 24, 30, 36 - NumberOfMonths
    for (var i = 12; i <= 36; i += 6) {

        // j = 20 - Deposit in %
        for (var j = 10; j <= 30; j += 10) {

            // g = 20, 30 - InterestPerYear in %
            for (var g = 10; g <= 40; g += 10) {

                var InScaleOfYear = i / 12;

                // Suma rat
                var sumaRat = (InputedValue * (i - 1)); // rat bedzie o jedna mniej niz ilosc miesiecy, bo wplata poczatkowa
                // Suma calosci
                var sumaCalosci = (sumaRat * 100) / (100 - j);

                // Pierwsza wplata (depozyt) 
                var pierwszaWplata = sumaCalosci - sumaRat;


                // Kwota z odsetek za rok = (suma odsetek za rok * procent za rok) / 100
                var SumaRatWRok = (sumaRat / skalaRoku)
                var odsetkiZaRok = (SumaRatWRok * g) / 100;

                // Kwota z odsetek za caly okres = odestki za rok * ilosc lat
                var odsetkiSuma = odsetkiZaRok * skalaRoku;

                // Wartosc projektu = (sumaRat + kwota poczatkowa) - odsetkiSuma
                var wartoscPracy = (sumaRat + pierwszaWplata) - odsetkiSuma;



                $('table tbody').append('<tr><td>' + i + '</td><td>' + "przy " + j + "% = " + pierwszaWplata.toFixed(2) + '</td><td>' + "przy " + g + "% = " + odsetkiZaRok.toFixed(2) + '</td><td>' + "przy " + g + "% = " + odsetkiSuma.toFixed(2) + '</td><td>' + sumaRat.toFixed(2) + '</td><td>' + sumaCalosci.toFixed(2) + '</td><td>' + wartoscPracy.toFixed(2) + '</td></tr>');



            }
        }


    }
    return false;

});