Merge 8b30a29f9b into 9e8dd00f10
Riya Bhardwaj
12 months ago
committed by
GitHub
commit
4f9f70ff3e
@ -0,0 +1,9 @@
|
||||
Online Currency Converter
|
||||
|
||||
An easy-to-use web-based tool for converting currencies in real-time using up-to-date exchange rates.
|
||||
|
||||
Features-
|
||||
Real-time Conversion: Fetches live exchange rates from a reliable API.
|
||||
User-Friendly Interface: Simple and intuitive design for quick conversions.
|
||||
Multiple Currencies Supported: Convert between popular global currencies.
|
||||
Error Handling: Displays clear error messages for failed requests or invalid inputs
|
||||
@ -0,0 +1,2 @@
|
||||
//Paste your generated api Key here
|
||||
let apiKey = "d0fc765bdaefc7c0edc9884a";
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
@ -0,0 +1,172 @@
|
||||
currencies = [
|
||||
"AED",
|
||||
"AFN",
|
||||
"ALL",
|
||||
"AMD",
|
||||
"ANG",
|
||||
"AOA",
|
||||
"ARS",
|
||||
"AUD",
|
||||
"AWG",
|
||||
"AZN",
|
||||
"BAM",
|
||||
"BBD",
|
||||
"BDT",
|
||||
"BGN",
|
||||
"BHD",
|
||||
"BIF",
|
||||
"BMD",
|
||||
"BND",
|
||||
"BOB",
|
||||
"BRL",
|
||||
"BSD",
|
||||
"BTC",
|
||||
"BTN",
|
||||
"BWP",
|
||||
"BYN",
|
||||
"BZD",
|
||||
"CAD",
|
||||
"CDF",
|
||||
"CHF",
|
||||
"CLF",
|
||||
"CLP",
|
||||
"CNY",
|
||||
"COP",
|
||||
"CRC",
|
||||
"CUC",
|
||||
"CUP",
|
||||
"CVE",
|
||||
"CZK",
|
||||
"DJF",
|
||||
"DKK",
|
||||
"DOP",
|
||||
"DZD",
|
||||
"EGP",
|
||||
"ERN",
|
||||
"ETB",
|
||||
"EUR",
|
||||
"FJD",
|
||||
"FKP",
|
||||
"GBP",
|
||||
"GEL",
|
||||
"GGP",
|
||||
"GHS",
|
||||
"GIP",
|
||||
"GMD",
|
||||
"GNF",
|
||||
"GTQ",
|
||||
"GYD",
|
||||
"HKD",
|
||||
"HNL",
|
||||
"HRK",
|
||||
"HTG",
|
||||
"HUF",
|
||||
"IDR",
|
||||
"ILS",
|
||||
"IMP",
|
||||
"INR",
|
||||
"IQD",
|
||||
"IRR",
|
||||
"ISK",
|
||||
"JEP",
|
||||
"JMD",
|
||||
"JOD",
|
||||
"JPY",
|
||||
"KES",
|
||||
"KGS",
|
||||
"KHR",
|
||||
"KMF",
|
||||
"KPW",
|
||||
"KRW",
|
||||
"KWD",
|
||||
"KYD",
|
||||
"KZT",
|
||||
"LAK",
|
||||
"LBP",
|
||||
"LKR",
|
||||
"LRD",
|
||||
"LSL",
|
||||
"LYD",
|
||||
"MAD",
|
||||
"MDL",
|
||||
"MGA",
|
||||
"MKD",
|
||||
"MMK",
|
||||
"MNT",
|
||||
"MOP",
|
||||
"MRO",
|
||||
"MRU",
|
||||
"MUR",
|
||||
"MVR",
|
||||
"MWK",
|
||||
"MXN",
|
||||
"MYR",
|
||||
"MZN",
|
||||
"NAD",
|
||||
"NGN",
|
||||
"NIO",
|
||||
"NOK",
|
||||
"NPR",
|
||||
"NZD",
|
||||
"OMR",
|
||||
"PAB",
|
||||
"PEN",
|
||||
"PGK",
|
||||
"PHP",
|
||||
"PKR",
|
||||
"PLN",
|
||||
"PYG",
|
||||
"QAR",
|
||||
"RON",
|
||||
"RSD",
|
||||
"RUB",
|
||||
"RWF",
|
||||
"SAR",
|
||||
"SBD",
|
||||
"SCR",
|
||||
"SDG",
|
||||
"SEK",
|
||||
"SGD",
|
||||
"SHP",
|
||||
"SLL",
|
||||
"SOS",
|
||||
"SRD",
|
||||
"SSP",
|
||||
"STD",
|
||||
"STN",
|
||||
"SVC",
|
||||
"SYP",
|
||||
"SZL",
|
||||
"THB",
|
||||
"TJS",
|
||||
"TMT",
|
||||
"TND",
|
||||
"TOP",
|
||||
"TRY",
|
||||
"TTD",
|
||||
"TWD",
|
||||
"TZS",
|
||||
"UAH",
|
||||
"UGX",
|
||||
"USD",
|
||||
"UYU",
|
||||
"UZS",
|
||||
"VEF",
|
||||
"VES",
|
||||
"VND",
|
||||
"VUV",
|
||||
"WST",
|
||||
"XAF",
|
||||
"XAG",
|
||||
"XAU",
|
||||
"XCD",
|
||||
"XDR",
|
||||
"XOF",
|
||||
"XPD",
|
||||
"XPF",
|
||||
"XPT",
|
||||
"YER",
|
||||
"ZAR",
|
||||
"ZMW",
|
||||
"ZWL",
|
||||
];
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Currency Converter</title>
|
||||
<!-- Google Fonts -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- Stylesheet-->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="app-details">
|
||||
<img src="app-icon.svg" class="app-icon" />
|
||||
<h1 class="app-title">Currency Converter</h1>
|
||||
</div>
|
||||
<label for="amount">Amount:</label>
|
||||
<input type="number" id="amount" value="100" />
|
||||
<div class="dropdowns">
|
||||
<select id="from-currency-select"></select>
|
||||
<select id="to-currency-select"></select>
|
||||
</div>
|
||||
<button id="convert-button">Convert</button>
|
||||
<p id="result"></p>
|
||||
</div>
|
||||
|
||||
<!-- Scipt With Array Of Supported Country Codes -->
|
||||
<script src="currency-codes.js"></script>
|
||||
<!-- Script with API Key -->
|
||||
<script src="api-key.js"></script>
|
||||
<!-- Script -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
let api = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`;
|
||||
const fromDropDown = document.getElementById("from-currency-select");
|
||||
const toDropDown = document.getElementById("to-currency-select");
|
||||
|
||||
//Create dropdown from the currencies array
|
||||
currencies.forEach((currency) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = currency;
|
||||
option.text = currency;
|
||||
fromDropDown.add(option);
|
||||
});
|
||||
|
||||
//Repeat same thing for the other dropdown
|
||||
currencies.forEach((currency) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = currency;
|
||||
option.text = currency;
|
||||
toDropDown.add(option);
|
||||
});
|
||||
|
||||
//Setting default values
|
||||
fromDropDown.value = "USD";
|
||||
toDropDown.value = "INR";
|
||||
|
||||
let convertCurrency = () => {
|
||||
//Create References
|
||||
const amount = document.querySelector("#amount").value;
|
||||
const fromCurrency = fromDropDown.value;
|
||||
const toCurrency = toDropDown.value;
|
||||
|
||||
//If amount input field is not empty
|
||||
if (amount.length != 0) {
|
||||
fetch(api)
|
||||
.then((resp) => resp.json())
|
||||
.then((data) => {
|
||||
let fromExchangeRate = data.conversion_rates[fromCurrency];
|
||||
let toExchangeRate = data.conversion_rates[toCurrency];
|
||||
const convertedAmount = (amount / fromExchangeRate) * toExchangeRate;
|
||||
result.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(
|
||||
2
|
||||
)} ${toCurrency}`;
|
||||
});
|
||||
} else {
|
||||
alert("Please fill in the amount");
|
||||
}
|
||||
};
|
||||
|
||||
document
|
||||
.querySelector("#convert-button")
|
||||
.addEventListener("click", convertCurrency);
|
||||
window.addEventListener("load", convertCurrency);
|
||||
@ -0,0 +1,96 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
body {
|
||||
background-color: #9873fe;
|
||||
}
|
||||
.wrapper {
|
||||
width: 90%;
|
||||
max-width: 25em;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
padding: 2em;
|
||||
border-radius: 0.8em;
|
||||
}
|
||||
.app-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.app-icon {
|
||||
width: 9.37em;
|
||||
}
|
||||
.app-title {
|
||||
font-size: 1.6em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
input#amount {
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #02002c;
|
||||
color: #7a789d;
|
||||
margin-bottom: 2em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
input#amount:focus {
|
||||
color: #9873fe;
|
||||
border-color: #9873fe;
|
||||
}
|
||||
.dropdowns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1em;
|
||||
}
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.6em;
|
||||
font-size: 1em;
|
||||
border-radius: 0.2em;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: url("arrow-down.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px top 50%, center;
|
||||
background-size: 20px 20px;
|
||||
background-color: #9873fe;
|
||||
color: #ffffff;
|
||||
}
|
||||
select option {
|
||||
background-color: #ffffff;
|
||||
color: #02002c;
|
||||
}
|
||||
button {
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
background-color: #9873fe;
|
||||
padding: 1em 0;
|
||||
margin-top: 2em;
|
||||
border-radius: 0.3em;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
#result {
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
color: #02002c;
|
||||
background-color: #e5dbff;
|
||||
padding: 0.8em 0;
|
||||
}
|
||||
Loading…
Reference in new issue