Scribd
Upload
4 views6 pages

MPTTTTTT

The document contains an AngularJS-based currency converter application consisting of an HTML file, a controller script, a CSS file for content security policy, and a Bower configuration file. The application allows users to input a quantity, cost, and select a currency to convert, displaying the total in various currencies. The conversion logic is handled by a service that uses predefined foreign exchange rates.

Uploaded by

Tannu Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views6 pages

MPTTTTTT

The document contains an AngularJS-based currency converter application consisting of an HTML file, a controller script, a CSS file for content security policy, and a Bower configuration file. The application allows users to input a quantity, cost, and select a currency to convert, displaying the total in various currencies. The conversion logic is handled by a service that uses predefined foreign exchange rates.

Uploaded by

Tannu Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

index.

html
<!DOCTYPE html>

<html ng-app="currencyConvert">

<head>

<title>Currency Converter Ex</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

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

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.container {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0,

0.1); max-width: 400px;

width: 100%;

h1 {

text-align: center;

color: #333;

.form-group {

margin-bottom: 15px;

.form-group label

{ display: block;

margin-bottom: 5px;
color: #666;

.form-group input, .form-group select

{ width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

.total {

margin: 20px 0;

text-align: center;

font-size: 1.2em;

color: #333;

.btn {

display: block;

width: 100%;

padding: 10px;

background-color: #28a745;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 1em;

.btn:hover {

background-color: #218838;

</style>

</head>

<body>

<div class="container" ng-controller="InvoiceController as invoice">

<h1>Currency Converter</h1>

<div class="form-group">

<label for="quantity">Quantity :</label>

<input type="number" id="quantity" min="0" ng-model="invoice.qty" required>


</div>

<div class="form-group">

<label for="cost">Cost :</label>

<input type="number" id="cost" min="0" ng-model="invoice.cost" required>

</div>

<div class="form-group">

<label for="currency">Currency :</label>

<select id="currency" ng-model="invoice.inCurr">

<option ng-repeat="c in invoice.curr">{{c}}</option>

</select>

</div>

<div class="total">

<b>Total :</b>

<span ng-repeat="c in invoice.curr">

{{invoice.total(c) | currency:c}}

</span>

</div>

<button class="btn" ng-click="invoice.pay()">Convert</button>

</div>

</body>

</html>

invoiceController.js
var app = angular.module('currencyConvert', []);

app.controller('InvoiceController', ['currencyConverterService', function InvoiceController(currencyConverterService)

{ var self = this;

self.qty = 1;

self.cost = 2;

self.inCurr =

'EUR';

self.curr = currencyConverterService.currencies;

self.total = function total(outCurr) {

return currencyConverterService.convert(self.qty * self.cost, self.inCurr, outCurr);

};
self.pay = function pay() {

window.alert("success");

};

}]);

app.factory('currencyConverterService', function()

{ var currencies = ['USD', 'EUR', 'CNY'];

var foreignRates =

{ USD: 1,

EUR: 0.86,

CNY: 0.7

};

var convert = function(amount, inCurr, outCurr) {

return amount * foreignRates[outCurr] / foreignRates[inCurr];

};

return {

currencies: currencies,

convert: convert

};

});

angular-csp.css
/* Include this file in your html if you are using the CSP mode. */

@charset "UTF-8";

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],

.ng-cloak, .x-ng-cloak,

.ng-hide:not(.ng-hide-animate) {

display: none !important;

ng\:form

{ display:

block;

}
.ng-animate-shim {

visibility:hidden;

.ng-anchor {

position:absolute;

bower.json
{

"name": "angular",

"version": "1.5.11",

"license": "MIT",

"main": "./angular.js",

"ignore": [],

"dependencies": {

OUTPUTS :

You might also like