├── index.html ├── style.css └── script.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Currency Converter 7 | 8 | 9 | 10 | 11 |
12 |

Currency Converter

13 |
14 |
15 |

Enter Amount

16 | 17 |
18 |
19 |
20 |

From

21 |
22 | Image Not Found 23 | 24 |
25 |
26 | 27 |
28 |

To

29 |
30 | Image Not Found 31 | 32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* style.css */ 2 | 3 | /* General Styles */ 4 | body { 5 | margin: 0; 6 | font-family: 'Roboto', sans-serif; 7 | background-color: #121212; 8 | color: #e0e0e0; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | } 14 | 15 | .container { 16 | background-color: #1e1e2e; 17 | border-radius: 12px; 18 | box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); 19 | padding: 25px; 20 | width: 100%; 21 | max-width: 370px; 22 | box-sizing: border-box; 23 | } 24 | 25 | .title { 26 | text-align: center; 27 | margin-bottom: 25px; 28 | font-size: 2em; 29 | color: #ff9800; 30 | letter-spacing: 1px; 31 | font-weight: 600; 32 | } 33 | 34 | form { 35 | display: flex; 36 | flex-direction: column; 37 | gap: 20px; 38 | } 39 | 40 | /* Input Styles */ 41 | .amount .label, .from .label, .to .label { 42 | font-size: 1.1em; 43 | margin-bottom: 8px; 44 | color: #ff9800; 45 | text-transform: uppercase; 46 | font-weight: 500; 47 | } 48 | 49 | .input { 50 | width: 100%; 51 | padding: 12px; 52 | border-radius: 6px; 53 | border: none; 54 | background-color: #262633; 55 | color: #ffffff; 56 | font-size: 1.1em; 57 | transition: border 0.3s ease, background-color 0.3s ease; 58 | box-sizing: border-box; 59 | } 60 | 61 | .input:focus { 62 | outline: none; 63 | background-color: #33334c; 64 | } 65 | 66 | /* Dropdown Styles */ 67 | .dropdown { 68 | display: flex; 69 | justify-content: space-between; 70 | align-items: center; 71 | gap: 15px; 72 | } 73 | 74 | .select-container { 75 | display: flex; 76 | align-items: center; 77 | gap: 12px; 78 | width: 100%; 79 | position: relative; 80 | } 81 | 82 | .select-container img { 83 | width: 36px; 84 | height: 36px; 85 | border-radius: 5px; 86 | } 87 | 88 | .select { 89 | flex-grow: 1; 90 | padding: 10px 5px; 91 | border-radius: 6px; 92 | border: none; 93 | background-color: #262633; 94 | color: #ffffff; 95 | font-size: 1.2em; 96 | cursor: pointer; 97 | } 98 | 99 | .select:focus { 100 | outline: none; 101 | background-color: #33334c; 102 | } 103 | 104 | /* Arrow Icon */ 105 | .fa-arrow-right-arrow-left { 106 | color: #ff9800; 107 | font-size: 1.8em; 108 | cursor: pointer; 109 | transition: transform 0.3s ease; 110 | } 111 | 112 | .fa-arrow-right-arrow-left:hover { 113 | transform: rotate(180deg); 114 | } 115 | 116 | /* Button Styles */ 117 | .btn { 118 | padding: 14px; 119 | background-color: #ff9800; 120 | color: #121212; 121 | font-size: 1.2em; 122 | border: none; 123 | border-radius: 6px; 124 | cursor: pointer; 125 | font-weight: 600; 126 | transition: background-color 0.3s ease, transform 0.3s ease; 127 | text-transform: uppercase; 128 | } 129 | 130 | .btn:hover { 131 | background-color: #ffa726; 132 | transform: translateY(-2px); 133 | } 134 | 135 | /* Message Display */ 136 | .msg { 137 | text-align: center; 138 | font-size: 1.1em; 139 | margin-top: 12px; 140 | color: #ff9800; 141 | } 142 | 143 | /* Responsive Design */ 144 | @media (max-width: 480px) { 145 | .container { 146 | padding: 20px; 147 | } 148 | 149 | .title { 150 | font-size: 1.8em; 151 | } 152 | 153 | .fa-arrow-right-arrow-left { 154 | font-size: 1.5em; 155 | } 156 | 157 | .btn { 158 | font-size: 1.1em; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const baseURL = "https://v6.exchangerate-api.com/v6/6f0c226b77014ad0ac8af364/latest/"; 2 | const dropdowns = document.querySelectorAll(".dropdown select"); 3 | const button = document.querySelector("form button"); 4 | const fromCurrency = document.querySelector(".from select"); 5 | const toCurrency = document.querySelector(".to select"); 6 | const msg = document.querySelector(".msg"); 7 | 8 | const countryList = { 9 | AED: "AE", 10 | AFN: "AF", 11 | XCD: "AG", 12 | ALL: "AL", 13 | AMD: "AM", 14 | ANG: "AN", 15 | AOA: "AO", 16 | AQD: "AQ", 17 | ARS: "AR", 18 | AUD: "AU", 19 | AZN: "AZ", 20 | BAM: "BA", 21 | BBD: "BB", 22 | BDT: "BD", 23 | XOF: "BE", 24 | BGN: "BG", 25 | BHD: "BH", 26 | BIF: "BI", 27 | BMD: "BM", 28 | BND: "BN", 29 | BOB: "BO", 30 | BRL: "BR", 31 | BSD: "BS", 32 | NOK: "BV", 33 | BWP: "BW", 34 | BYR: "BY", 35 | BZD: "BZ", 36 | CAD: "CA", 37 | CDF: "CD", 38 | XAF: "CF", 39 | CHF: "CH", 40 | CLP: "CL", 41 | CNY: "CN", 42 | COP: "CO", 43 | CRC: "CR", 44 | CUP: "CU", 45 | CVE: "CV", 46 | CYP: "CY", 47 | CZK: "CZ", 48 | DJF: "DJ", 49 | DKK: "DK", 50 | DOP: "DO", 51 | DZD: "DZ", 52 | ECS: "EC", 53 | EEK: "EE", 54 | EGP: "EG", 55 | ETB: "ET", 56 | EUR: "FR", 57 | FJD: "FJ", 58 | FKP: "FK", 59 | GBP: "GB", 60 | GEL: "GE", 61 | GGP: "GG", 62 | GHS: "GH", 63 | GIP: "GI", 64 | GMD: "GM", 65 | GNF: "GN", 66 | GTQ: "GT", 67 | GYD: "GY", 68 | HKD: "HK", 69 | HNL: "HN", 70 | HRK: "HR", 71 | HTG: "HT", 72 | HUF: "HU", 73 | IDR: "ID", 74 | ILS: "IL", 75 | INR: "IN", 76 | IQD: "IQ", 77 | IRR: "IR", 78 | ISK: "IS", 79 | JMD: "JM", 80 | JOD: "JO", 81 | JPY: "JP", 82 | KES: "KE", 83 | KGS: "KG", 84 | KHR: "KH", 85 | KMF: "KM", 86 | KPW: "KP", 87 | KRW: "KR", 88 | KWD: "KW", 89 | KYD: "KY", 90 | KZT: "KZ", 91 | LAK: "LA", 92 | LBP: "LB", 93 | LKR: "LK", 94 | LRD: "LR", 95 | LSL: "LS", 96 | LTL: "LT", 97 | LVL: "LV", 98 | LYD: "LY", 99 | MAD: "MA", 100 | MDL: "MD", 101 | MGA: "MG", 102 | MKD: "MK", 103 | MMK: "MM", 104 | MNT: "MN", 105 | MOP: "MO", 106 | MRO: "MR", 107 | MTL: "MT", 108 | MUR: "MU", 109 | MVR: "MV", 110 | MWK: "MW", 111 | MXN: "MX", 112 | MYR: "MY", 113 | MZN: "MZ", 114 | NAD: "NA", 115 | XPF: "NC", 116 | NGN: "NG", 117 | NIO: "NI", 118 | NPR: "NP", 119 | NZD: "NZ", 120 | OMR: "OM", 121 | PAB: "PA", 122 | PEN: "PE", 123 | PGK: "PG", 124 | PHP: "PH", 125 | PKR: "PK", 126 | PLN: "PL", 127 | PYG: "PY", 128 | QAR: "QA", 129 | RON: "RO", 130 | RSD: "RS", 131 | RUB: "RU", 132 | RWF: "RW", 133 | SAR: "SA", 134 | SBD: "SB", 135 | SCR: "SC", 136 | SDG: "SD", 137 | SEK: "SE", 138 | SGD: "SG", 139 | SKK: "SK", 140 | SLL: "SL", 141 | SOS: "SO", 142 | SRD: "SR", 143 | STD: "ST", 144 | SVC: "SV", 145 | SYP: "SY", 146 | SZL: "SZ", 147 | THB: "TH", 148 | TJS: "TJ", 149 | TMT: "TM", 150 | TND: "TN", 151 | TOP: "TO", 152 | TRY: "TR", 153 | TTD: "TT", 154 | TWD: "TW", 155 | TZS: "TZ", 156 | UAH: "UA", 157 | UGX: "UG", 158 | USD: "US", 159 | UYU: "UY", 160 | UZS: "UZ", 161 | VEF: "VE", 162 | VND: "VN", 163 | VUV: "VU", 164 | YER: "YE", 165 | ZAR: "ZA", 166 | ZMK: "ZM", 167 | ZWD: "ZW", 168 | }; 169 | 170 | // Populate dropdowns and set event listeners 171 | for (let select of dropdowns) { 172 | for (let currencyCode in countryList) { 173 | let newOption = document.createElement("option"); 174 | newOption.innerText = currencyCode; 175 | newOption.value = currencyCode; 176 | 177 | if (select.name === "from" && currencyCode === "USD") { 178 | newOption.selected = "selected"; 179 | } else if (select.name === "to" && currencyCode === "PKR") { 180 | newOption.selected = "selected"; 181 | } 182 | 183 | select.append(newOption); 184 | } 185 | 186 | select.addEventListener("change", (event) => { 187 | updateFlag(event.target); 188 | }); 189 | } 190 | 191 | // Update the flag based on selected currency 192 | const updateFlag = (element) => { 193 | let currCode = element.value; 194 | let countryCode = countryList[currCode]; 195 | let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`; 196 | let img = element.parentElement.querySelector('img'); 197 | img.src = newSrc; 198 | } 199 | 200 | // Fetch and display exchange rate 201 | const updateExchangeRate = async () => { 202 | let amount = document.querySelector(".amount input"); 203 | let amountValue = parseFloat(amount.value) || 1; 204 | amount.value = amountValue; 205 | 206 | const URL = `${baseURL}${fromCurrency.value}`; 207 | try { 208 | let response = await fetch(URL); 209 | if (!response.ok) throw new Error("Failed to fetch data"); 210 | let data = await response.json(); 211 | let conversionRate = data.conversion_rates[toCurrency.value]; 212 | let finalAmount = (conversionRate * amountValue).toFixed(2); 213 | msg.innerHTML = `${amountValue} ${fromCurrency.value} = ${finalAmount} ${toCurrency.value}`; 214 | } catch (error) { 215 | msg.innerHTML = "Error fetching data. Please try again later."; 216 | console.error("Error:", error); 217 | } 218 | } 219 | 220 | // Set up event listeners 221 | button.addEventListener("click", (event) => { 222 | event.preventDefault(); 223 | updateExchangeRate(); 224 | }); 225 | 226 | // Update exchange rate on page load 227 | window.addEventListener("load", () => { 228 | updateExchangeRate(); 229 | }); 230 | --------------------------------------------------------------------------------