Skip to content

Commit fdda127

Browse files
thinkswellthinkswell
authored
Merge pull request #919 from Tushar2930/master
Currency converter #877
2 parents bd95e7d + 1a1e6bc commit fdda127

File tree

4 files changed

+162
-0
lines changed

4 files changed

+162
-0
lines changed

‎CurrencyConverter/Tushar2930/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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="stylesheet" href="style.css">
7+
<title>Currency Converter</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Currency Converter</h1>
12+
<div class="input-container">
13+
<input type="number" id="amount" placeholder="Enter amount">
14+
<select id="from">
15+
<option value="USD">USD</option>
16+
<option value="JPY">JPY</option>
17+
<option value="EUR">EUR</option>
18+
<option value="GBP">GBP</option>
19+
<option value="CAD">CAD</option>
20+
<option value="AUD">AUD</option>
21+
<option value="INR">INR</option>
22+
<option value="BRL">BRL</option>
23+
<!-- Add more currency options here -->
24+
</select>
25+
<select id="to">
26+
<option value="USD">USD</option>
27+
<option value="JPY">JPY</option>
28+
<option value="EUR">EUR</option>
29+
<option value="GBP">GBP</option>
30+
<option value="CAD">CAD</option>
31+
<option value="AUD">AUD</option>
32+
<option value="INR">INR</option>
33+
<option value="BRL">BRL</option>
34+
<!-- Add more currency options here -->
35+
</select>
36+
<button id="convert">Convert</button>
37+
</div>
38+
<div class="result" id="result">Converted Amount: <span id="converted-amount">0</span></div>
39+
</div>
40+
41+
<script src="script.js"></script>
42+
</body>
43+
</html>

‎CurrencyConverter/Tushar2930/readme.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Currency Converter Web App
2+
3+
A simple currency converter web app that allows you to convert between different currencies using an external API.
4+
5+
## Features
6+
- Convert between various currencies.
7+
- Real-time exchange rate data using an API.
8+
- User-friendly interface.
9+
10+
## Usage
11+
1. Open `index.html` in your web browser.
12+
2. Enter the amount to convert.
13+
3. Select the currency you want to convert from.
14+
4. Select the currency you want to convert to.
15+
5. Click the "Convert" button to see the converted amount.
16+
17+
## API
18+
This project uses API to fetch real-time exchange rates.
19+
![Screenshot (75)](https://github.com/Tushar2930/javascript-mini-projects/assets/110845672/76bfb55d-6ef0-4d0d-ade7-0fc33217e2ec)

‎CurrencyConverter/Tushar2930/script.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const amountInput = document.getElementById("amount");
2+
const fromCurrencySelect = document.getElementById("from");
3+
const toCurrencySelect = document.getElementById("to");
4+
const convertButton = document.getElementById("convert");
5+
const result = document.getElementById("result");
6+
const convertedAmount = document.getElementById("converted-amount");
7+
8+
convertButton.addEventListener("click", () => {
9+
const amount = amountInput.value;
10+
const fromCurrency = fromCurrencySelect.value;
11+
const toCurrency = toCurrencySelect.value;
12+
13+
if (amount !== "" && fromCurrency !== toCurrency) {
14+
convertCurrency(amount, fromCurrency, toCurrency);
15+
}
16+
});
17+
18+
var myHeaders = new Headers();
19+
myHeaders.append("apikey", "6oeOtPvaT3rX63XWwcEzhPb2ap67d8qr");
20+
21+
var requestOptions = {
22+
method: 'GET',
23+
redirect: 'follow',
24+
headers: myHeaders
25+
};
26+
27+
function convertCurrency(amount, fromCurrency, toCurrency) {
28+
// const apiKey = "6oeOtPvaT3rX63XWwcEzhPb2ap67d8qr"; // Replace with your API key
29+
// const url = `https://api.apilayer.com/exchangerates_data/latest?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&apikey=${apiKey}`;
30+
31+
console.log(fromCurrency, toCurrency, amount);
32+
fetch(`https://api.apilayer.com/exchangerates_data/convert?to=${toCurrency}&from=${fromCurrency}&amount=${amount}`, requestOptions)
33+
.then(response => response.json())
34+
.then(result => {
35+
const conversionResult = result.result;
36+
console.log(conversionResult);
37+
if(conversionResult !== undefined){
38+
convertedAmount.innerHTML= conversionResult;
39+
result.style.display = "block";
40+
}
41+
42+
})
43+
.catch(error => console.log('error', error));
44+
// fetch(url)
45+
// .then((response) => response.json())
46+
// .then((data) => {
47+
// const conversionResult = data.result;
48+
// console.log(data);
49+
// convertedAmount.innerHTML= conversionResult;
50+
// result.style.display = "block";
51+
// })
52+
// .catch((error) => {
53+
// console.error("Error:", error);
54+
// });
55+
}

‎CurrencyConverter/Tushar2930/styles.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f2f2f2;
4+
text-align: center;
5+
}
6+
7+
.container {
8+
max-width: 400px;
9+
margin: 0 auto;
10+
padding: 20px;
11+
background-color: #fff;
12+
border-radius: 5px;
13+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
h1 {
17+
font-size: 24px;
18+
}
19+
20+
.input-container {
21+
display: flex;
22+
flex-direction: column;
23+
margin: 10px 0;
24+
}
25+
26+
input, select {
27+
padding: 10px;
28+
margin: 5px 0;
29+
border: 1px solid #ccc;
30+
border-radius: 5px;
31+
}
32+
33+
button {
34+
padding: 10px;
35+
background-color: #007BFF;
36+
color: #fff;
37+
border: none;
38+
border-radius: 5px;
39+
cursor: pointer;
40+
}
41+
42+
.result {
43+
margin-top: 20px;
44+
font-weight: bold;
45+
}

0 commit comments

Comments
 (0)