diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/67 - Currency Converter/codes.js b/67 - Currency Converter/codes.js new file mode 100644 index 00000000..6e14cfe5 --- /dev/null +++ b/67 - Currency Converter/codes.js @@ -0,0 +1,151 @@ +const countryList = { + AED: "AE", + AFN: "AF", + ALL: "AL", + AMD: "AM", + ANG: "AN", + AOA: "AO", + ARS: "AR", + AUD: "AU", + AZN: "AZ", + BAM: "BA", + BBD: "BB", + BDT: "BD", + BGN: "BG", + BHD: "BH", + BIF: "BI", + BMD: "BM", + BND: "BN", + BOB: "BO", + BRL: "BR", + BSD: "BS", + BWP: "BW", + 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", + 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", + SLL: "SL", + SOS: "SO", + SRD: "SR", + 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", + VND: "VN", + VUV: "VU", + YER: "YE", + ZAR: "ZA", + ZMW: "ZM", + ZWD: "ZW", + }; \ No newline at end of file diff --git a/67 - Currency Converter/index.html b/67 - Currency Converter/index.html index 864b5ebb..221f6bf3 100644 --- a/67 - Currency Converter/index.html +++ b/67 - Currency Converter/index.html @@ -1,150 +1,53 @@ + + + + + Currency_Converter + + + - - - - - Currency_Converter - - - - -

Currency Converter

-
-
- -

-

Welcome! Please Enter the values

-

- -
-
- - -
- -
-
-
+ +

Currency Converter

+
+
+
+

From

+
+ +
-
+
- -
- + + +
+
+

1 USD = 83.54 INR

-
- - - - \ No newline at end of file + + + + diff --git a/67 - Currency Converter/script.js b/67 - Currency Converter/script.js index 0d5db711..0cd36e80 100644 --- a/67 - Currency Converter/script.js +++ b/67 - Currency Converter/script.js @@ -1,61 +1,66 @@ -const exchange_rate = document.getElementById('exchange-rate'); -const curr_first = document.getElementById('curr-first'); -const curr_second = document.getElementById('curr-second'); -const worth_first = document.getElementById('worth-first'); -const worth_second = document.getElementById('worth-second'); -const swap_curr = document.getElementById('swap-curr'); +const BASE_URL ="https://v6.exchangerate-api.com/v6/16947c81da979880bacde4f5/latest"; + +const dropdowns = document.querySelectorAll(".dropdown select"); +const fromCurr = document.querySelector("#fromselect"); +const toCurr = document.querySelector("#toselect"); +const msg = document.querySelector("#msgg"); +const swap_curr = document.querySelector(".swap"); + +let amount = document.querySelector("#frominput"); +let displayamt = document.querySelector("#toinput"); + +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); + }); +} function swap() { - const temp = curr_first.value; - curr_first.value = curr_second.value; - curr_second.value = temp; + const temp = fromCurr.value; + fromCurr.value = toCurr.value; + toCurr.value = temp; + updateFlag(fromCurr); + updateFlag(toCurr); convert(); } -function convert() { - const currency_first = curr_first.value; - const currency_second = curr_second.value; -//using API for conversion of currency units - fetch(`https://v6.exchangerate-api.com/v6/16947c81da979880bacde4f5/latest/${currency_first}`) - .then((res) => res.json()) - .then((data) => { - - const rate = data.conversion_rates[currency_second]; - exchange_rate.innerText = `1 ${currency_first} = ${rate} ${currency_second}`; - - worth_second.value = (worth_first.value * rate).toFixed(5); - }); -} -//some javascript event listeners -swap_curr.addEventListener('click', swap); - -curr_first.addEventListener('change', convert); -worth_first.addEventListener('input', convert); -curr_second.addEventListener('change', convert); -worth_second.addEventListener('input', convert); -convert(); - - - - - - - - - - - - - - - - - - - - +const convert = async () => { + const URL = `${BASE_URL}/${fromCurr.value}`; + let response = await fetch(URL); + let data = await response.json(); + let rate = data.conversion_rates[toCurr.value]; + displayamt.value = (amount.value * rate).toFixed(4); + msg.innerText = `1 ${fromCurr.value} = ${rate} ${toCurr.value}`; +}; +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; +}; +swap_curr.addEventListener("click", swap); +amount.addEventListener("input", convert); +fromCurr.addEventListener("change", convert); +displayamt.addEventListener("input", convert); +toCurr.addEventListener("change", convert); +window.addEventListener("load", () => { + convert(); +}); \ No newline at end of file diff --git a/67 - Currency Converter/style.css b/67 - Currency Converter/style.css index 24dd13ff..88e0985d 100644 --- a/67 - Currency Converter/style.css +++ b/67 - Currency Converter/style.css @@ -1,98 +1,134 @@ * { - box-sizing: border-box; + margin: 0; + padding: 0; } body { - font-family: Arial, Helvetica, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; - margin: 0; - padding: 20px; background: #19172e; } h1 { - color: blanchedalmond; + color: white; text-align: center; + margin: 10px 0px; + font-size: 35px; } -h3 { - text-align: center; +.container { + background-color: #8c9093; + margin: 100px; + border: 2px solid black; + border-radius: 10px; } -p { - text-align: center; +.swap { + border-radius: 25px; + padding: 11px; + font-size: 20px; + border: 2px solid black; + background-color: black; + color: aliceblue; + cursor: pointer; } -.second-box { - border: 2px solid; - background-color: #ff99cc; - border-radius: 20px; - padding: 10px; +.swap:active { + background-color: aliceblue; + color: black; } -.currency { - padding: 40px 0; +.dropdown { display: flex; - align-items: center; justify-content: space-between; + align-items: center; + margin: 10px 10px 30px 10px; } -.currency select { - padding: 10px 20px 10px 10px; - - appearance: none; - border: 1px solid #000000; - font-size: 16px; - background: transparent; - background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); - background-position: right 10px top 50%, 0, 0; - background-size: 12px auto, 100%; - background-repeat: no-repeat; +.dropdown p { + padding: 16px 0px 0px 18px; + font-size: 20px; } -.currency input { - border: 0px; - background: transparent; - font-size: 30px; - text-align: right; +.select-container { + margin: 20px; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; } +.select-container select { + font-size: larger; +} - -.exchange-rate { - color: rgb(0, 0, 0); - font-size: 14px; - padding: 0 10px; +.select-container img { + margin-right: 16px; + width: 70px; } -select:focus, -input:focus, -button:focus { - outline: 0; +.currency { + padding-left: 12px; + font-size: larger; + height: 80px; } -.swap { - text-align: end; +#toinput { + margin-left: 8px; } -.swap button { - background-color: #ff99cc; - border: 1px solid #000000; - color: rgb(0, 0, 0); - padding: 0.3rem; +#toinput:read-only { + background-color: white; + color: black; } -.swap button:active { - background-color: #ffc1e0; +#msgg { + font-size: 32px; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 15px; } -.swap-grid { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: baseline; +@media (max-width:680px) { + .container { + margin: 0; + margin-top: 5px; + } + .currency { + padding-left: 12px; + font-size: medium; + height: 40px; + width: 200px; + } + + #msgg { + font-size: 25px; + margin-bottom: 5px; + } + + @media (max-width:490px) { + .container{ + width: 300px; + display: block; + justify-content: start; + align-items: center; + } + .dropdown{ + display: block; + } + + .swap { + align-self: center; + margin: 20px 125px; + } + + .currency { + width: 90%; + } + } } \ No newline at end of file