Skip to content

Commit 0290b2f

Browse files
Merge pull request #920 from yashwanthvarma18/currencyConverter-yashwanthvarma18
Currency Converter-yashwanthvarma18
2 parents fff7904 + dfc4562 commit 0290b2f

File tree

5 files changed

+292
-0
lines changed

5 files changed

+292
-0
lines changed
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+
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+
</select>
20+
</div>
21+
<input type="number" id="amount" placeholder="Amount">
22+
<div class="currency-dropdown">
23+
<select id="to-currency">
24+
25+
</select>
26+
</div>
27+
<button id="convert">Convert</button>
28+
</div>
29+
30+
<div id="result">
31+
<p>Converted Amount: <span id="converted-amount"></span></p>
32+
</div>
33+
</div>
34+
35+
<script src="script.js"></script>
36+
</body>
37+
</html>
Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
// Define an object with currency data
2+
const currencies = {
3+
AED: "Arabic dirham",
4+
AFN: "Afghani",
5+
ALL: "Albanian 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+
KRW: "South Korean Won",
23+
THB: "Thai Baht",
24+
HKD: "Hong Kong Dollar",
25+
TRY: "Turkish Lira",
26+
ILS: "Israeli New Shekel",
27+
QAR: "Qatari Rial",
28+
SAR: "Saudi Riyal",
29+
PLN: "Polish Złoty",
30+
NOK: "Norwegian Krone",
31+
MYR: "Malaysian Ringgit",
32+
SYP: "Syrian Pound",
33+
NPR: "Nepalese Rupee",
34+
FJD: "Fiji Dollar",
35+
CLP: "Chilean Peso",
36+
PEN: "Peruvian Nuevo Sol",
37+
ARS: "Argentine Peso",
38+
VND: "Vietnamese Đồng",
39+
IRR: "Iranian Rial",
40+
EGP: "Egyptian Pound",
41+
AED: "United Arab Emirates Dirham",
42+
ZMW: "Zambian Kwacha",
43+
};
44+
45+
// Define an object with conversion rates (to USD)
46+
const conversionRates = {
47+
AED: 0.27,
48+
AFN: 0.013,
49+
ALL: 0.0092,
50+
USD: 1,
51+
EUR: 0.85,
52+
GBP: 0.73,
53+
JPY: 113.85,
54+
INR: 73.19,
55+
AUD: 1.36,
56+
CAD: 1.26,
57+
CNY: 6.38,
58+
CHF: 0.92,
59+
SEK: 8.77,
60+
NZD: 1.47,
61+
ZAR: 15.45,
62+
RUB: 75.34,
63+
BRL: 5.28,
64+
MXN: 20.07,
65+
SGD: 1.34,
66+
KRW: 1177.74,
67+
THB: 32.52,
68+
HKD: 7.77,
69+
TRY: 13.71,
70+
ILS: 3.26,
71+
QAR: 3.64,
72+
SAR: 3.75,
73+
PLN: 4.16,
74+
NOK: 9.12,
75+
MYR: 0.24,
76+
SYP: 0.0024,
77+
NPR: 0.0085,
78+
FJD: 0.48,
79+
CLP: 0.013,
80+
PEN: 0.25,
81+
ARS: 8.88,
82+
VND: 0.000043,
83+
IRR: 0.000023,
84+
EGP: 0.063,
85+
ZMW: 0.054,
86+
};
87+
88+
89+
function populateCurrencies() {
90+
const fromCurrencySelect = document.getElementById("from-currency");
91+
const toCurrencySelect = document.getElementById("to-currency");
92+
93+
for (const currency in currencies) {
94+
const option1 = new Option(currency, currency);
95+
const option2 = new Option(currency, currency);
96+
fromCurrencySelect.add(option1);
97+
toCurrencySelect.add(option2);
98+
}
99+
}
100+
101+
function convertCurrency() {
102+
const fromCurrency = document.getElementById("from-currency").value;
103+
const toCurrency = document.getElementById("to-currency").value;
104+
const amount = parseFloat(document.getElementById("amount").value);
105+
const convertedAmountElement = document.getElementById("converted-amount");
106+
107+
if (isNaN(amount)) {
108+
alert("Please enter a valid amount.");
109+
return;
110+
}
111+
112+
const conversionRate = conversionRates[toCurrency] / conversionRates[fromCurrency];
113+
114+
const convertedAmount = (amount * conversionRate).toFixed(2);
115+
convertedAmountElement.textContent = `${convertedAmount} ${toCurrency}`;
116+
}
117+
118+
document.addEventListener("DOMContentLoaded", () => {
119+
populateCurrencies();
120+
document.getElementById("convert").addEventListener("click", convertCurrency);
121+
});
4.43 MB
Loading
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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: rgba(255, 255, 255, 0.9); /* Set the alpha (fourth) value to control transparency */
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+
32+
.centered-container.enter {
33+
transform: scale(1.05);
34+
}
35+
36+
h1 {
37+
color: #000000;
38+
}
39+
40+
.flex-container {
41+
display: flex;
42+
justify-content: space-around;
43+
align-items: center;
44+
flex-wrap: wrap;
45+
gap: 15px;
46+
}
47+
48+
.currency-dropdown {
49+
max-height: 200px;
50+
background-color: #007BFF;
51+
overflow-y: auto;
52+
transition: max-height 0.3s ease-in-out;
53+
}
54+
55+
input[type="number"] {
56+
width: 100px;
57+
margin: 10px 0;
58+
padding: 3px;
59+
color: #000000;
60+
border: 1px solid #000000;
61+
border-radius: 5px;
62+
transition: transform 0.3s ease-in-out; /* Added transform property for smoother scaling */
63+
}
64+
65+
button#convert {
66+
padding: 5px 20px;
67+
background-color: #007BFF;
68+
color: #fff;
69+
border: none;
70+
border-radius: 5px;
71+
cursor: pointer;
72+
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Added transform property for smoother scaling */
73+
}
74+
75+
button#convert:hover {
76+
background-color: #0056b3;
77+
transform: scale(1.05); /* Add this line for the hover effect */
78+
}
79+
input[type="number"]:hover
80+
{
81+
transform: scale(1.05); /* Add this line for the hover effect */
82+
}
83+
#result {
84+
font-family: 'Bebas Neue', sans-serif;
85+
font-family: 'Fjalla One', sans-serif;
86+
font-family: 'Merriweather', serif;
87+
font-family: 'Montserrat', sans-serif;
88+
font-family: 'Oswald', sans-serif;
89+
font-family: 'Poppins', sans-serif;
90+
font-family: 'Signika', sans-serif;
91+
margin: 20px;
92+
font-weight: bold;
93+
}
94+
95+
#converted-amount {
96+
color: #007BFF;
97+
}

0 commit comments

Comments
 (0)