Interest Rate Calculator Using Web Application In TypeScript

Introduction

The following article calculates interest rates. In this program we have two textboxes, one textbox for the amount and another textbox for the interest rate which is applied on the original amount. Let's use the following procedure.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give your application the name "Interest_Rate_Calculator" and then click "Ok".

Step 2

After Step 1, right-click on "Interest_Rate_Calculator". A pop-up window is opened. Click on  "Add" -> "New Item" -> "Web From". Give your WebForm the name "Interest_Rate_Calculator_Demo.aspx" and then click "Ok".

Step 3

The project will have been created; a new window is opened on right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, css file and aspx files.

Coding

ShowImage.ts

class Rate_Calculator {

    RateCalculate(amount:number,rate:number)

    {

        var interest,total;

        interest = amount * (rate / 100);

        total = amount + interest;

        var div = document.getElementById("Display1");

        div.innerText = "Amount ->" + amount + "\n" + "Interest -> " + rate + "%" + "\n" + "Interest paid -> " + interest + "\n" + "Total(A+IP) -> " + total;

    }   

}

window.onload = () =>

{

    var obj = new Rate_Calculator();   

    var bttn = document.getElementById("Calculate");

    bttn.onclick = function ()

    {

        var amount = (<HTMLInputElement>document.getElementById("Amount")).value;

        var rate = (<HTMLTextAreaElement>document.getElementById("Rate")).value;

        if ( amount.length == 0 || rate.length == 0)

        {      

            var div = document.getElementById("Display");

            div.innerText = "All Fields are required";

        }

        else

        {          

            var amount1 = parseInt(amount);

            var rate1 = parseInt(rate);

            obj.RateCalculate(amount1,rate1);

        }

    }

};

 

ShowImage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Interest_Calculator_Demo.aspx.cs" Inherits="Interest_Rate_Calculater.Interest_Calculator_Demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="app.js"></script>

</head>

<body>

    <form id="form1" style="color:#0094ff" runat="server">

    <div>

        <asp:Label ID="Label1" runat="server" Text="Interest Rate Calculator In TypeScript " Font-Bold="True" Font-Italic="True" Font-Size="Large" ForeColor="Blue"></asp:Label>

    </div>

    </form>

    <p style="font-weight: bold">

        Enter Amount&nbsp;

        <input id="Amount" type="text" /></p>

    <p style="font-weight: bold">

        Interest Rate&nbsp;&nbsp;&nbsp;

        <input id="Rate" type="text" /></p>

    <p>

        <input id="Calculate" style="font-weight: bold; color: #800000;" type="button" value="Calculate" /></p>

    <div id="Display" style="font-weight: bold; font-size: large; color: #FF0000"></div>

    <div id="Display1" style="font-size: large; font-weight: bold; color:#3d6f12"></div>

</body>

</html>

 

 

app.js

var Rate_Calculator = (function () {

    function Rate_Calculator() { }

    Rate_Calculator.prototype.RateCalculate = function (amount, rate) {

        var interest, total;

        interest = amount * (rate / 100);

        total = amount + interest;

        var div = document.getElementById("Display1");

        div.innerText = "Amount ->" + amount + "\n" + "Interest -> " + rate + "%" + "\n" + "Interest paid -> " + interest + "\n" + "Total(A+IP) -> " + total;

    };

    return Rate_Calculator;

})();

window.onload = function () {

    var obj = new Rate_Calculator();

    var bttn = document.getElementById("Calculate");

    bttn.onclick = function () {

        var amount = (document.getElementById("Amount")).value;

        var rate = (document.getElementById("Rate")).value;

        if(amount.length == 0 || rate.length == 0) {

            var div = document.getElementById("Display");

            div.innerText = "All Fields are required";

        } else {

            var amount1 = parseInt(amount);

            var rate1 = parseInt(rate);

            obj.RateCalculate(amount1, rate1);

        }

    };

};

//@ sourceMappingURL=app.js.map

 

 

Output 1


Then run the page which will look as:


First-Image.gif

 

Output 2


Now enter the values and click on the Calculate button, which shows the following output after calculation:


final-output.gif

Output 3


Now run the application and click on the Calculate button without entering the values which shows the following error:


Required-Field-Image.gif

 

Reference By

http://www.c-sharpcorner.com/UploadFile/0c1bb2/interest-rate-calculator-using-Asp-Net-C-Sharp/

Recommended Free Ebook
Next Recommended Readings