Skip to content

Commit b2dd118

Browse files
yashwanthvarma18yashwanthvarma18
committed
Currency Converter
1 parent 337916d commit b2dd118

File tree

5 files changed

+272
-0
lines changed

5 files changed

+272
-0
lines changed

‎Currency Converter/yashwanthvarma18/README.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Currency Converter
2+
3+
Currency Converter is a web application that allows you to convert currencies with ease. It provides a simple and user-friendly interface for converting different currencies.
4+
5+
![Currency Converter](ss.png)
6+
7+
## Features
8+
9+
- Convert from one currency to another.
10+
- Support for various popular currencies.
11+
- Real-time currency conversion rates.
12+
13+
## Usage
14+
15+
1. Open the Currency Converter website in your web browser.
16+
2. Select the currency you want to convert from in the "From Currency" dropdown.
17+
3. Enter the amount you want to convert in the input field.
18+
4. Select the currency you want to convert to in the "To Currency" dropdown.
19+
5. Click the "Convert" button to calculate the conversion.
20+
21+
The converted amount will be displayed in the "Converted Amount" section.
22+
23+
## Installation
24+
25+
There is no installation required. Currency Converter is a web-based application, and you can access it by opening the provided URL in your web browser.
26+
27+
## Development
28+
29+
If you want to contribute to the development of Currency Converter, follow these steps:
30+
31+
1. Clone this repository to your local machine.
32+
2. Make your changes or improvements.
33+
3. Test your changes locally.
34+
4. Submit a pull request.
35+
36+
Enjoy converting currencies with Currency Converter!
37+

‎Currency Converter/yashwanthvarma18/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Merriweather:wght@700&family=Montserrat:wght@200&family=Oswald:wght@200;500&family=Poppins:wght@300&family=Signika:wght@300&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="style.css">
10+
<title>Currency Converter</title>
11+
</head>
12+
<body>
13+
<div class="centered-container">
14+
<h1>Currency Converter</h1>
15+
16+
<div id="currency-list" class="flex-container">
17+
<div class="currency-dropdown">
18+
<select id="from-currency">
19+
<!-- Dynamically populated with JavaScript -->
20+
</select>
21+
</div>
22+
<input type="number" id="amount" placeholder="Amount">
23+
<div class="currency-dropdown">
24+
<select id="to-currency">
25+
<!-- Dynamically populated with JavaScript -->
26+
</select>
27+
</div>
28+
<button id="convert">Convert</button>
29+
</div>
30+
31+
<div id="result">
32+
<p>Converted Amount: <span id="converted-amount"></span></p>
33+
</div>
34+
</div>
35+
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎Currency Converter/yashwanthvarma18/script.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// Define an object with currency data
2+
const currencies = {
3+
AED: "Arabic dirham",
4+
AFN: "Afghani",
5+
ALL: "Lek",
6+
USD: "US Dollar",
7+
EUR: "Euro",
8+
GBP: "British Pound",
9+
JPY: "Japanese Yen",
10+
INR: "Indian Rupee",
11+
AUD: "Australian Dollar",
12+
CAD: "Canadian Dollar",
13+
CNY: "Chinese Yuan",
14+
CHF: "Swiss Franc",
15+
SEK: "Swedish Krona",
16+
NZD: "New Zealand Dollar",
17+
ZAR: "South African Rand",
18+
RUB: "Russian Ruble",
19+
BRL: "Brazilian Real",
20+
MXN: "Mexican Peso",
21+
SGD: "Singapore Dollar",
22+
AED: "United Arab Emirates Dirham",
23+
KRW: "South Korean Won",
24+
};
25+
26+
// Define an object with conversion rates (to USD)
27+
const conversionRates = {
28+
AED: 0.27,
29+
AFN: 0.013,
30+
ALL: 0.0092,
31+
USD: 1,
32+
EUR: 0.85,
33+
GBP: 0.73,
34+
JPY: 113.85,
35+
INR: 73.19,
36+
AUD: 1.36,
37+
CAD: 1.26,
38+
CNY: 6.38,
39+
CHF: 0.92,
40+
SEK: 8.77,
41+
NZD: 1.47,
42+
ZAR: 15.45,
43+
RUB: 75.34,
44+
BRL: 5.28,
45+
MXN: 20.07,
46+
SGD: 1.34,
47+
KRW: 1,177.74,
48+
THB: 32.52,
49+
HKD: 7.77,
50+
TRY: 13.71,
51+
ILS: 3.26,
52+
QAR: 3.64,
53+
SAR: 3.75,
54+
PLN: 4.16,
55+
NOK: 9.12,
56+
MYR: 0.24,
57+
SYP: 0.0024,
58+
NPR: 0.0085,
59+
FJD: 0.48,
60+
CLP: 0.013,
61+
PEN: 0.25,
62+
ARS: 8.88,
63+
VND: 0.000043,
64+
IRR: 0.000023,
65+
EGP: 0.063,
66+
ZMW: 0.054,
67+
};
68+
69+
70+
function populateCurrencies() {
71+
const fromCurrencySelect = document.getElementById("from-currency");
72+
const toCurrencySelect = document.getElementById("to-currency");
73+
74+
for (const currency in currencies) {
75+
const option1 = new Option(currency, currency);
76+
const option2 = new Option(currency, currency);
77+
fromCurrencySelect.add(option1);
78+
toCurrencySelect.add(option2);
79+
}
80+
}
81+
82+
function convertCurrency() {
83+
const fromCurrency = document.getElementById("from-currency").value;
84+
const toCurrency = document.getElementById("to-currency").value;
85+
const amount = parseFloat(document.getElementById("amount").value);
86+
const convertedAmountElement = document.getElementById("converted-amount");
87+
88+
if (isNaN(amount)) {
89+
alert("Please enter a valid amount.");
90+
return;
91+
}
92+
93+
const conversionRate = conversionRates[toCurrency] / conversionRates[fromCurrency];
94+
95+
const convertedAmount = (amount * conversionRate).toFixed(2);
96+
convertedAmountElement.textContent = `${convertedAmount} ${toCurrency}`;
97+
}
98+
99+
document.addEventListener("DOMContentLoaded", () => {
100+
populateCurrencies();
101+
document.getElementById("convert").addEventListener("click", convertCurrency);
102+
});

‎Currency Converter/yashwanthvarma18/ss.png‎

4.43 MB
Loading

‎Currency Converter/yashwanthvarma18/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
body {
2+
background-image: url('https://wallpaperaccess.com/full/2326823.jpg');
3+
background-size: cover;
4+
background-repeat: no-repeat;
5+
font-family: 'Bebas Neue', sans-serif;
6+
font-family: 'Fjalla One', sans-serif;
7+
font-family: 'Merriweather', serif;
8+
font-family: 'Montserrat', sans-serif;
9+
font-family: 'Oswald', sans-serif;
10+
font-family: 'Poppins', sans-serif;
11+
font-family: 'Signika', sans-serif;
12+
margin: 0;
13+
padding: 0;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
min-height: 100vh;
18+
}
19+
20+
21+
.centered-container {
22+
background-color: white;
23+
padding: 20px;
24+
border-radius: 10px;
25+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
26+
text-align: center;
27+
transition: transform 0.3s ease-in-out;
28+
transform: scale(1);
29+
}
30+
31+
.centered-container.enter {
32+
transform: scale(1.05);
33+
}
34+
35+
h1 {
36+
color: #333;
37+
}
38+
39+
.flex-container {
40+
display: flex;
41+
justify-content: space-around;
42+
align-items: center;
43+
flex-wrap: wrap;
44+
gap: 15px;
45+
}
46+
47+
.currency-dropdown {
48+
max-height: 200px;
49+
overflow-y: auto;
50+
transition: max-height 0.3s ease-in-out;
51+
}
52+
53+
input[type="number"] {
54+
width: 100px;
55+
margin: 10px 0;
56+
padding: 3px;
57+
color: #000000;
58+
border: 1px solid #000000;
59+
border-radius: 5px;
60+
transition: transform 0.3s ease-in-out; /* Added transform property for smoother scaling */
61+
}
62+
63+
button#convert {
64+
padding: 5px 20px;
65+
background-color: #007BFF;
66+
color: #fff;
67+
border: none;
68+
border-radius: 5px;
69+
cursor: pointer;
70+
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Added transform property for smoother scaling */
71+
}
72+
73+
button#convert:hover {
74+
background-color: #0056b3;
75+
transform: scale(1.05); /* Add this line for the hover effect */
76+
}
77+
input[type="number"]:hover
78+
{
79+
transform: scale(1.05); /* Add this line for the hover effect */
80+
}
81+
#result {
82+
font-family: 'Bebas Neue', sans-serif;
83+
font-family: 'Fjalla One', sans-serif;
84+
font-family: 'Merriweather', serif;
85+
font-family: 'Montserrat', sans-serif;
86+
font-family: 'Oswald', sans-serif;
87+
font-family: 'Poppins', sans-serif;
88+
font-family: 'Signika', sans-serif;
89+
margin: 20px;
90+
font-weight: bold;
91+
}
92+
93+
#converted-amount {
94+
color: #007BFF;
95+
}

0 commit comments

Comments
 (0)