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