From e0499280f9cb562d5f4e24ade4e6c20e792a880f Mon Sep 17 00:00:00 2001 From: kunalarya873 Date: Thu, 25 Jan 2024 17:05:29 +0530 Subject: [PATCH] Adding Currency Converter --- .DS_Store | Bin 8196 -> 8196 bytes JS by Shradha Mam/.DS_Store | Bin 0 -> 6148 bytes JS by Shradha Mam/Currency Converter/codes.js | 161 ++++++++++++++++++ .../currency_converter.html | 43 +++++ .../Currency Converter/script.js | 65 +++++++ .../Currency Converter/style.css | 85 +++++++++ 6 files changed, 354 insertions(+) create mode 100644 JS by Shradha Mam/.DS_Store create mode 100644 JS by Shradha Mam/Currency Converter/codes.js create mode 100644 JS by Shradha Mam/Currency Converter/currency_converter.html create mode 100644 JS by Shradha Mam/Currency Converter/script.js create mode 100644 JS by Shradha Mam/Currency Converter/style.css diff --git a/.DS_Store b/.DS_Store index d15f3cbb19aec27515fb572b1298b73d50cf982c..6e6ebb2a96e9fc87af2d0b49a0bb86d70cad9cf0 100644 GIT binary patch delta 90 zcmZp1XmOa}&nUSuU^hRbyizrV{5ZMc&dCG!|@^bR?(is>S7&j(f UVBE|u@r`BjRY7e$s?IV307oz#tpET3 delta 40 wcmZp1XmOa}&nUhzU^hRb_+}n~5SGc_qI)-{zGB+UF7b_J@(WRgjj7L>02=fTw*UYD diff --git a/JS by Shradha Mam/.DS_Store b/JS by Shradha Mam/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..96aafd02a3a5b51a48b63a48cfd31e181b2f4ff5 GIT binary patch literal 6148 zcmeHKQA+|r5S~>_MFNR}dRypK=(Gr=mqYCjbWsl#=B3opbt~uT5hC1s{h|Iyzo(hq zH4+PYhzOaH*>84sW|#R^c5eYdw8s59KotN=sD!yPHeU#hlP*cldI*J{V*nA{!V^en zFGaKCKQcgjw~4zoh8TaJ_fO$oPS6uWLam>UhJL7gjDPiqVK7P@=S}4Dg|+n}N~L)1 z-K*3~ddYay>cyATJ5wt3=XTFO4+d$sy46-u(hH(NtP_I%07I@Wf~c?3mKsO>kk>J2Ih#bpLR lQqa&>F~-tWyo0I*{gMns*J5T6Jt+JkplRTS8TeBM-T~{kQ;Prq literal 0 HcmV?d00001 diff --git a/JS by Shradha Mam/Currency Converter/codes.js b/JS by Shradha Mam/Currency Converter/codes.js new file mode 100644 index 0000000..3e2fb14 --- /dev/null +++ b/JS by Shradha Mam/Currency Converter/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", +}; diff --git a/JS by Shradha Mam/Currency Converter/currency_converter.html b/JS by Shradha Mam/Currency Converter/currency_converter.html new file mode 100644 index 0000000..e728342 --- /dev/null +++ b/JS by Shradha Mam/Currency Converter/currency_converter.html @@ -0,0 +1,43 @@ + + + + + + Currency Converter + + + + +
+

Currency Converter

+
+
+ +
+
+

From

+
+ + +
+
+ +
+

to

+
+ + + +
+
+
+
1 USD = 80INR
+ +
+
+
+ + + + \ No newline at end of file diff --git a/JS by Shradha Mam/Currency Converter/script.js b/JS by Shradha Mam/Currency Converter/script.js new file mode 100644 index 0000000..26abd17 --- /dev/null +++ b/JS by Shradha Mam/Currency Converter/script.js @@ -0,0 +1,65 @@ +const BASE_URL = "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/"; + +const dropdown = document.querySelectorAll(".dropdown select"); +const btn = document.querySelector("form button"); +const fromCurr = document.querySelector(".from select"); +const toCurr = document.querySelector(".to select"); +const Updatemsg = document.querySelector(".msg"); + + +for (let select of dropdown){ + 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]; + console.log(element); + let newSRC = `https://flagsapi.com/${countryCode}/flat/64.png`; + let img = element.parentElement.querySelector("img"); + img.src=newSRC; +}; + +btn.addEventListener("click",async (evt) =>{ + evt.preventDefault(); + let amount = document.querySelector(".amount input"); + let amtVal = amount.value; + if(amtVal === "" || amtVal < 1){ + amtVal = 1; + amount.value = "1"; + } + const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`; + let response = await fetch(URL); + let data = await response.json(); + let rate = data[toCurr.value.toLowerCase()]; + let finalAmount = amtVal * rate; + Updatemsg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`; + +}); + + + + + + + + + + + + + + diff --git a/JS by Shradha Mam/Currency Converter/style.css b/JS by Shradha Mam/Currency Converter/style.css new file mode 100644 index 0000000..92ebda6 --- /dev/null +++ b/JS by Shradha Mam/Currency Converter/style.css @@ -0,0 +1,85 @@ +*{ + margin: 0; + padding: 0; +} +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f4e4ba; +} +.container{ + background-color: #fff; + padding: 2rem; + border-radius: 1rem; + min-height: 45vh; + width: 40vh; +} +form{ + margin: 2rem 0 1rem 0; + +} + +form select, +button, +input{ + width: 100%; + border: none; + outline: none; + border-radius: 0.75rem; + +} + +form input{ + border: 1px solid lightgrey; + font-size: 1rem; + height: 3rem; + padding-left: 0.5rem; + +} +.dropdown{ + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; +} + +.dropdown i{ + font-size: 1.5rem; + margin-top: 1rem; +} + +.select-container img{ + max-width: 2rem; +} +.select-container{ + display: flex; + justify-content: center; + align-items: center; + width: 6rem; + border-radius: 0.5rem; + border: 1px solid lightgrey; +} + +.select-container select{ + font-size: 1rem; + width: auto; +} +/* .dropdown select{ + font-size: 1rem; + width:auto ; +} */ + +.msg{ + margin: 2rem 0 2rem 0; +} + +form button{ + height: 3rem; + background-color: #af4d98; + color: #fff; + font-size: 1.15rem; + cursor: pointer; + +} \ No newline at end of file