Interest Rate Calculator Using Web Application In TypeScript

Nitin Bhardwaj
11y
12.3k
0
0

Article

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>

</head>

<body>

<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>

Enter Amount 

Interest Rate   

<p>

</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:

Output 2

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

Output 3

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

Reference By

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

Up Next

Ebook Download

View all

Test

Read by 16 people

Download Now!

Learn

View all