Interest Rate Calculator Using Web Application In TypeScript

Introduction

The following article calculates interest rates. In this program, we have two text boxes, one textbox for the amount and another textbox for the interest rate which is applied to 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 the 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);
}
};
};

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:

Referenced By

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