diff --git a/Currency Converter/codes.js b/Currency Converter/codes.js new file mode 100644 index 0000000..3e2fb14 --- /dev/null +++ b/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/Currency Converter/index.html b/Currency Converter/index.html new file mode 100644 index 0000000..abcf78c --- /dev/null +++ b/Currency Converter/index.html @@ -0,0 +1,50 @@ + + + + + + Currency Converter + + + + +
+
+
+

Currency Converter

+
+
+
+
+ Enter the Amount + +
+
+
+

+ From +

+ + +
+ +
+

+ To +

+ + +
+
+

+ +
+
+ + + + \ No newline at end of file diff --git a/Currency Converter/script.js b/Currency Converter/script.js new file mode 100644 index 0000000..8278f96 --- /dev/null +++ b/Currency Converter/script.js @@ -0,0 +1,53 @@ +const baseURL="https://latest.currency-api.pages.dev/v1/currencies"; +const dropDown=document.querySelectorAll(".selector"); +const btn=document.querySelector("form button"); +const fromCurr=document.querySelector("#fc"); +const toCurr=document.querySelector("#tc"); +const msg=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==="fromCurrency"&&currCode==="USD"){ + newOption.selected="selected" + } + else if(select.name==="toCurrency"&&currCode==="INR"){ + newOption.selected="selected" + } + select.append(newOption); + } + select.addEventListener("change", (evt)=>{ + updateFlag(evt.target); + }) +} + +const updateFlag=(elem)=>{ + let currCode=elem.value; + let countryCode=countryList[currCode]; + let newSrc=`https://flagsapi.com/${countryCode}/flat/64.png`; + let img=elem.parentElement.querySelector("img"); + img.src=newSrc; +} + +btn.addEventListener("click",async (evt)=>{ + evt.preventDefault(); + let amount=document.querySelector("#amount"); + if(amount.value===""||amount.value<0){ + amount.value="1"; + } + const URL=`${baseURL}/${fromCurr.value.toLowerCase()}.json`; + let response=await fetch(URL); + let data=await response.json(); + let fromData=data[fromCurr.value.toLowerCase()]; + let toData=fromData[toCurr.value.toLowerCase()]; + let rate=toData; + let finalAmount=rate*(amount.value); + if(isNaN(finalAmount)){ + msg.innerText=`Invalid Input`; + }else{ + msg.innerText=`${amount.value} ${fromCurr.value}=${finalAmount} ${toCurr.value}`; + } +}); + diff --git a/Currency Converter/style.css b/Currency Converter/style.css new file mode 100644 index 0000000..f8229c8 --- /dev/null +++ b/Currency Converter/style.css @@ -0,0 +1,71 @@ +*{ + margin: 0; + padding: 0; +} +body{ + display:flex; + justify-content: center; + flex-direction: column; + align-items: center; + min-height: 100vh; + background-color: #f4e4ba; + font-size: 25px; +} +.container{ + background-color: aliceblue; + padding: 2rem 1rem 2rem 1rem; + border-radius: 2rem; + min-height: 45vh; + min-width: 40vw; + display:flex; + justify-content: center; + flex-direction: column; + align-items: center; +} +form{ + margin: 2rem 0 2rem 0; +} +#amount{ + border-radius: 1rem; + border: 1px solid lightgray; + font-size: 20px; + min-height: 25px; + padding: 3px 0px 3px 5px; +} +.dropdown{ + display: flex; + justify-content: space-between; + align-items: center; + gap: 90px; + margin: 2rem; +} +button{ + display: flex; + justify-content: center; + align-items: center; + margin: 70px 0 0 0px; + min-height: 3rem; + width: 30vw; + border-radius: 2rem; + font-size: 25px; + position: relative; + cursor: pointer; + background-color: blueviolet; + color: antiquewhite; + border: 2px solid black; +} +#exchange{ + position: relative; + top: 0px; + right: 0px; +} +#fc,#tc{ + display: flex; + min-width: 30px; + font-size: 18px; + margin: 0px 12px; + cursor: pointer; +} +.flag{ + width: 85px; +} \ No newline at end of file