diff --git a/Projects/Currency-Converter/README.md b/Projects/Currency-Converter/README.md new file mode 100644 index 00000000..9875ccef --- /dev/null +++ b/Projects/Currency-Converter/README.md @@ -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 diff --git a/Projects/Currency-Converter/api-key.js b/Projects/Currency-Converter/api-key.js new file mode 100644 index 00000000..61f35d78 --- /dev/null +++ b/Projects/Currency-Converter/api-key.js @@ -0,0 +1,2 @@ +//Paste your generated api Key here +let apiKey = "d0fc765bdaefc7c0edc9884a"; diff --git a/Projects/Currency-Converter/app-icon.svg b/Projects/Currency-Converter/app-icon.svg new file mode 100644 index 00000000..7342479b --- /dev/null +++ b/Projects/Currency-Converter/app-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Projects/Currency-Converter/currency-codes.js b/Projects/Currency-Converter/currency-codes.js new file mode 100644 index 00000000..a7bfafee --- /dev/null +++ b/Projects/Currency-Converter/currency-codes.js @@ -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", +]; diff --git a/Projects/Currency-Converter/index.html b/Projects/Currency-Converter/index.html new file mode 100644 index 00000000..0c6c73d4 --- /dev/null +++ b/Projects/Currency-Converter/index.html @@ -0,0 +1,37 @@ + + + + + Currency Converter + + + + + + +
+
+ +

Currency Converter

+
+ + +
+ + +
+ +

+
+ + + + + + + + + \ No newline at end of file diff --git a/Projects/Currency-Converter/script.js b/Projects/Currency-Converter/script.js new file mode 100644 index 00000000..60389331 --- /dev/null +++ b/Projects/Currency-Converter/script.js @@ -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); \ No newline at end of file diff --git a/Projects/Currency-Converter/style.css b/Projects/Currency-Converter/style.css new file mode 100644 index 00000000..ab81554d --- /dev/null +++ b/Projects/Currency-Converter/style.css @@ -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; + } \ No newline at end of file