Skip to content

Commit 65e5202

Browse files
Tejas-Santosh-NalawadeTejas-Santosh-Nalawade
authored
Merge pull request #82 from Mansi13-6/CurrencyConverter
Currency Converter
2 parents 760bba4 + a54dd1d commit 65e5202

5 files changed

Lines changed: 162 additions & 0 deletions

File tree

‎Domains/Frontend/MiniProjects/Currency Converter/.hintrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": [
3+
"development"
4+
]
5+
}

‎Domains/Frontend/MiniProjects/Currency Converter/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
**Contributor:** Mansi13-6
2+
3+
## Description
4+
A simple web app that converts different currencies.
5+
## Tech Stack
6+
- HTML
7+
- CSS
8+
- JavaScript
9+
10+
## How to Run
11+
1. Open the `index.html` file in your web browser.

‎Domains/Frontend/MiniProjects/Currency Converter/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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+
<title>Currency Converter</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>💱 Currency Converter</h1>
12+
13+
<div class="converter-box">
14+
<div class="amount-box">
15+
<label>Amount:</label>
16+
<input type="number" id="amount" value="1" min="1" />
17+
</div>
18+
19+
<div class="currency-box">
20+
<div>
21+
<label>From:</label>
22+
<select id="fromCurrency">
23+
<option value="USD">USD</option>
24+
<option value="INR">INR</option>
25+
<option value="EUR">EUR</option>
26+
<option value="GBP">GBP</option>
27+
<option value="JPY">JPY</option>
28+
</select>
29+
</div>
30+
<div>
31+
<label>To:</label>
32+
<select id="toCurrency">
33+
<option value="INR">INR</option>
34+
<option value="USD">USD</option>
35+
<option value="EUR">EUR</option>
36+
<option value="GBP">GBP</option>
37+
<option value="JPY">JPY</option>
38+
</select>
39+
</div>
40+
</div>
41+
42+
<button id="convertBtn">Convert</button>
43+
44+
<div id="result" class="result">Converted amount will appear here</div>
45+
</div>
46+
</div>
47+
48+
<script src="script.js"></script>
49+
</body>
50+
</html>

‎Domains/Frontend/MiniProjects/Currency Converter/script.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const convertBtn = document.getElementById("convertBtn");
2+
const amountInput = document.getElementById("amount");
3+
const fromCurrency = document.getElementById("fromCurrency");
4+
const toCurrency = document.getElementById("toCurrency");
5+
const result = document.getElementById("result");
6+
7+
// Static exchange rates (approximate values)
8+
const rates = {
9+
USD: 1,
10+
INR: 83,
11+
EUR: 0.92,
12+
GBP: 0.79,
13+
JPY: 151
14+
};
15+
16+
convertBtn.addEventListener("click", () => {
17+
const amount = parseFloat(amountInput.value);
18+
const from = fromCurrency.value;
19+
const to = toCurrency.value;
20+
21+
if (isNaN(amount) || amount <= 0) {
22+
result.textContent = "Please enter a valid amount.";
23+
return;
24+
}
25+
26+
// Convert to USD base, then to target currency
27+
const convertedAmount = (amount / rates[from]) * rates[to];
28+
29+
result.textContent = `${amount} ${from} = ${convertedAmount.toFixed(2)} ${to}`;
30+
});

‎Domains/Frontend/MiniProjects/Currency Converter/style.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* {
2+
box-sizing: border-box;
3+
font-family: 'Poppins', sans-serif;
4+
}
5+
6+
body {
7+
background: linear-gradient(135deg, #824ab6, #e2a4f0);
8+
color: #fff;
9+
min-height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
.container {
16+
background: rgba(255, 255, 255, 0.1);
17+
padding: 30px;
18+
border-radius: 15px;
19+
text-align: center;
20+
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
21+
width: 90%;
22+
max-width: 400px;
23+
}
24+
25+
h1 {
26+
margin-bottom: 20px;
27+
font-size: 26px;
28+
}
29+
30+
.converter-box {
31+
display: flex;
32+
flex-direction: column;
33+
gap: 15px;
34+
}
35+
36+
.amount-box input,
37+
.currency-box select {
38+
padding: 10px;
39+
border-radius: 8px;
40+
border: none;
41+
width: 100%;
42+
}
43+
44+
button {
45+
background-color: #fff;
46+
color: #0077ff;
47+
font-weight: bold;
48+
border: none;
49+
border-radius: 8px;
50+
padding: 10px;
51+
cursor: pointer;
52+
transition: 0.3s;
53+
}
54+
55+
button:hover {
56+
background-color: #0077ff;
57+
color: #fff;
58+
}
59+
60+
.result {
61+
margin-top: 10px;
62+
font-size: 18px;
63+
background: rgba(255,255,255,0.15);
64+
padding: 10px;
65+
border-radius: 10px;
66+
}

0 commit comments

Comments
 (0)