Code Snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Currency Converter/Calculator</title>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("CurrencyApp", []);
app.controller("CurrencyController", function ($scope) {
$scope.quantity = 1;
$scope.cost = 100;
$scope.selectedCurr = 'INR';
$scope.currencies = ['INR', 'BHR', 'GBP', 'CNY'];
$scope.INRtoforeignrates = {
INR: 100,
BHR: 0.59,
GBP: 1.02,
CNY: 9.7
}
$scope.conversion = function (cCurr, sCurr) {
var convertedCurr = $scope.INRtoforeignrates[cCurr] / $scope.INRtoforeignrates[sCurr];
return convertedCurr;
}
$scope.calculate = function (cCurr, sCurr) {
var result = $scope.quantity * $scope.cost * $scope.conversion(cCurr, sCurr);
return result;
}
$scope.pay = function pay() {
window.alert("Thank you!");
}
});
</script>
</head>
<body ng-app="CurrencyApp" ng-controller="CurrencyController" style="align-content:center">
<h2>Currency Converter/Calculator</h2>
<div>
Quantity: <input type="number" min="1" ng-model="quantity" />
</div>
<div>
Costs: <input type="number" min="1" ng-model="cost" />
</div>
<select ng-model="selectedCurr">
<option ng-repeat="c in currencies">{{c}}</option>
</select>
<h3> Converted costs from </h3>
<div ng-repeat="c in currencies">
{{selectedCurr}} to {{c}}: {{calculate(c,selectedCurr)}}
</div>
<br />
<button ng-click="pay()">Pay</button>
</body>
</html>
UI: How it Looks
Total pricing for the chosen quantity is calculated and converted according to the list of currencies specified
No comments:
Post a Comment