From 5d6f3f48fa27b8f53b975eb72541ae97d1ce1f10 Mon Sep 17 00:00:00 2001 From: nidhiupman568 Date: Fri, 14 Jun 2024 05:55:59 +0530 Subject: [PATCH] first commit --- app.js | 67 +++++++++++++++++++++ codes.js | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 50 ++++++++++++++++ style.css | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 445 insertions(+) create mode 100644 app.js create mode 100644 codes.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..1185acb --- /dev/null +++ b/app.js @@ -0,0 +1,67 @@ +// Updated base URL +const BASE_URL = "https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies"; + +const dropdowns = document.querySelectorAll(".dropdown select"); +const btn = document.querySelector("form button"); +const fromCurr = document.querySelector(".from select"); +const toCurr = document.querySelector(".to select"); +const msg = document.querySelector(".msg"); + +for (let select of dropdowns) { + for (currCode in countryList) { + let newOption = document.createElement("option"); + newOption.innerText = currCode; + newOption.value = currCode; + if (select.name === "from" && currCode === "USD") { + newOption.selected = "selected"; + } else if (select.name === "to" && currCode === "INR") { + newOption.selected = "selected"; + } + select.append(newOption); + } + + select.addEventListener("change", (evt) => { + updateFlag(evt.target); + }); +} + +const updateFlag = (element) => { + let currCode = element.value; + let countryCode = countryList[currCode]; + let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`; + let img = element.parentElement.querySelector("img"); + img.src = newSrc; +}; + + + +const updateExchangeRate = async () => { + let amount = document.querySelector(".amount input"); + let amtVal = amount.value; + if (amtVal === "" || amtVal < 1) { + amtVal = 1; + amount.value = "1"; + } + + // Updated URL structure + const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`; + + let response = await fetch(URL); + let data = await response.json(); + let rate = data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()]; + + let finalAmount = amtVal * rate; + msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`; +}; + + +btn.addEventListener("click", (evt) => { + evt.preventDefault(); + updateExchangeRate(); +}); + +window.addEventListener("load", () => { + updateExchangeRate(); +}); + + diff --git a/codes.js b/codes.js new file mode 100644 index 0000000..db3a325 --- /dev/null +++ b/codes.js @@ -0,0 +1,161 @@ +const countryList = { + AED: "AE", + AFN: "AF", + XCD: "AG", + ALL: "AL", + AMD: "AM", + ANG: "AN", + AOA: "AO", + AQD: "AQ", + ARS: "AR", + AUD: "AU", + AZN: "AZ", + BAM: "BA", + BBD: "BB", + BDT: "BD", + XOF: "BE", + BGN: "BG", + BHD: "BH", + BIF: "BI", + BMD: "BM", + BND: "BN", + BOB: "BO", + BRL: "BR", + BSD: "BS", + NOK: "BV", + BWP: "BW", + BYR: "BY", + BZD: "BZ", + CAD: "CA", + CDF: "CD", + XAF: "CF", + CHF: "CH", + CLP: "CL", + CNY: "CN", + COP: "CO", + CRC: "CR", + CUP: "CU", + CVE: "CV", + CYP: "CY", + CZK: "CZ", + DJF: "DJ", + DKK: "DK", + DOP: "DO", + DZD: "DZ", + ECS: "EC", + EEK: "EE", + EGP: "EG", + ETB: "ET", + EUR: "FR", + FJD: "FJ", + FKP: "FK", + GBP: "GB", + GEL: "GE", + GGP: "GG", + GHS: "GH", + GIP: "GI", + GMD: "GM", + GNF: "GN", + GTQ: "GT", + GYD: "GY", + HKD: "HK", + HNL: "HN", + HRK: "HR", + HTG: "HT", + HUF: "HU", + IDR: "ID", + ILS: "IL", + INR: "IN", + IQD: "IQ", + IRR: "IR", + ISK: "IS", + JMD: "JM", + JOD: "JO", + JPY: "JP", + KES: "KE", + KGS: "KG", + KHR: "KH", + KMF: "KM", + KPW: "KP", + KRW: "KR", + KWD: "KW", + KYD: "KY", + KZT: "KZ", + LAK: "LA", + LBP: "LB", + LKR: "LK", + LRD: "LR", + LSL: "LS", + LTL: "LT", + LVL: "LV", + LYD: "LY", + MAD: "MA", + MDL: "MD", + MGA: "MG", + MKD: "MK", + MMK: "MM", + MNT: "MN", + MOP: "MO", + MRO: "MR", + MTL: "MT", + MUR: "MU", + MVR: "MV", + MWK: "MW", + MXN: "MX", + MYR: "MY", + MZN: "MZ", + NAD: "NA", + XPF: "NC", + NGN: "NG", + NIO: "NI", + NPR: "NP", + NZD: "NZ", + OMR: "OM", + PAB: "PA", + PEN: "PE", + PGK: "PG", + PHP: "PH", + PKR: "PK", + PLN: "PL", + PYG: "PY", + QAR: "QA", + RON: "RO", + RSD: "RS", + RUB: "RU", + RWF: "RW", + SAR: "SA", + SBD: "SB", + SCR: "SC", + SDG: "SD", + SEK: "SE", + SGD: "SG", + SKK: "SK", + SLL: "SL", + SOS: "SO", + SRD: "SR", + STD: "ST", + SVC: "SV", + SYP: "SY", + SZL: "SZ", + THB: "TH", + TJS: "TJ", + TMT: "TM", + TND: "TN", + TOP: "TO", + TRY: "TR", + TTD: "TT", + TWD: "TW", + TZS: "TZ", + UAH: "UA", + UGX: "UG", + USD: "US", + UYU: "UY", + UZS: "UZ", + VEF: "VE", + VND: "VN", + VUV: "VU", + YER: "YE", + ZAR: "ZA", + ZMK: "ZM", + ZWD: "ZW", + }; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..89eb9b7 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + Currency Converter- BY NIDHI UPMAN + + + + + + +
+

Currency Converter
BY NIDHI UPMAN

+
+
+

Enter Amount

+ +
+
+
+

From

+
+ + +
+
+ +
+

To

+
+ + +
+
+
+
1USD = 80INR
+ +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7a03f4e --- /dev/null +++ b/style.css @@ -0,0 +1,167 @@ +* { + margin: 0; + padding: 0; + } + + body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #feece2; + } + + .container { + background-color: #ffbe98; + padding: 5rem; + border-radius: 5rem; + border-style: groove; + min-height: 45vh; + width: 40%; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + } + + .container:hover { + transform: scale(1.05) rotateY(10deg); + } + + h2 { + font-size: 2.5rem; + font-family: 'Arial Black', sans-serif; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + margin-bottom: 1rem; + text-align: center; + background-color: #feece2; + border-radius: 0.5rem; + } + + + form select,button,input { + width: 100%; + border: none; + outline: none; + border-radius: 0.75rem; + } + .from { + font-size: 1rem; + font-family:'Arial Black', sans-serif; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + } + .to{ + font-size: 1rem; + font-family:'Arial Black', sans-serif; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + } + .amount { + margin-bottom: 1rem; + font-size: 1rem; + font-family: 'Arial Black', sans-serif; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + } + + .amount label { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 0.5rem; + } + + .amount input { + width: 100%; + border: 1px solid lightgray; + border-radius: 0.75rem; + height: 3rem; + padding-left: 0.5rem; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + } + + + .select-container { + display: flex; + justify-content: center; + align-items: center; + background-color: #feece2; + width: 80%; + border-radius: 1rem; + border: 1px solid rgb(10, 9, 9); + padding: 0.5rem 1rem; + transition: background-color 0.3s, transform 0.3s; + } + + .select-container:hover { + background-color: #f0f0f0; + transform: scale(1.05); + } + + .select-container img { + max-width: 3rem; + } + + .msg { + margin: 2rem 0 2rem 0; + text-align: center; + background: #fff; + border-radius: 2rem; + font-size: 1rem; + font-family: 'Arial Black', sans-serif; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + } + .msg:hover { + transform: scale(1.05) rotateY(10deg); + } + i.fa-solid.fa-arrow-right-arrow-left { + display: flex; + justify-content: center; + align-items: center; + height: 7vh; + background-color: white; + font-size: 1.8rem; + font-weight: bold; + color: #333; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + border-radius:10px; + transition: transform 0.3s ease-in-out; + + } + + + i.fa-solid.fa-arrow-right-arrow-left:hover { + transform: translateY(-5px); + } + + + form button { + height: 3rem; + background-color: #feece2; + color: black; + font-style: oblique; + font-size: 1.5rem; + cursor: pointer; + transition: transform 0.3s; + border-style: dashed; + } + + form button:hover { + transform: scale(1.05) rotateY(10deg); + } + + .dropdown { + display: flex; + align-items: center; + } + + .dropdown i { + font-size: 1.5rem; + margin: 0 1rem; + } + + .dropdown .from, + .dropdown .to { + flex: 1; + text-align: center; + } + + .dropdown label { + font-size: 1.25rem; + margin-bottom: 0.5rem; + } \ No newline at end of file