├── index.html
├── README.md
├── script.js
├── style.css
└── script2.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Currency Converter
7 |
8 |
9 |
10 |
11 |
Currency Converter
12 |
41 |
42 |
43 |
44 |
2 | 
3 | 🌍 Foreign Exchange Converter 💱
4 |
5 | A sleek, responsive, and lightning-fast currency converter built using HTML, CSS, and JavaScript. Convert currencies instantly with an elegant UI — whether you’re traveling, running a business, or just curious about exchange rates.
6 |
7 | ✨ Features
8 |
9 | ✅ Wide Range of Currencies – Convert between popular currencies like USD, EUR, GBP, INR, PKR, CNY, and more.
10 | ✅ Instant Conversion – Real-time calculations for a smooth user experience.
11 | ✅ Responsive UI – Works beautifully on mobile, tablet, and desktop.
12 | ✅ Modern Design – Eye-catching gradient backgrounds and clean layout.
13 | ✅ User-Friendly – Just enter the amount, pick your currencies, and click Convert.
14 |
15 | 🖼 Live Demo
16 |
17 | 🔗 https://foreignmoneyexchange.netlify.app/
18 |
19 | 🛠 Built With
20 |
21 | HTML5 – Provides the structure of the web page.
22 |
23 | CSS3 – Styles for a beautiful and modern interface.
24 |
25 | JavaScript (Vanilla) – Handles conversion logic and user interactions.
26 |
27 | 📖 How to Use
28 |
29 | Enter the amount you want to convert.
30 |
31 | Select the source currency (e.g., USD).
32 |
33 | Choose the target currency (e.g., PKR).
34 |
35 | Click Convert – the result will be shown instantly!
36 |
37 | 🚀 Run Locally
38 |
39 | Clone the repository
40 |
41 | git clone https://github.com/AbdulRehmanBaig384/Foreign-Exchange-Converter.git
42 |
43 |
44 | Open the index.html file in your browser.
45 |
46 | 🔮 Future Enhancements
47 |
48 | 🔹 Live Exchange Rates – Integrate with APIs like CurrencyLayer or Fixer.io.
49 |
50 | 🔹 Dark Mode – A toggle for day/night themes.
51 |
52 | 🔹 Historical Charts – Visualize currency trends.
53 |
54 | 🔹 Multi-Language Support – Switch between different languages.
55 |
56 | 🤝 Contributing
57 |
58 | 💡 Got ideas to improve this project?
59 |
60 | Fork the repository.
61 |
62 | Create a feature branch.
63 |
64 | Submit a pull request.
65 |
66 | 📜 License
67 |
68 | This project is licensed under the MIT License – feel free to use and modify it.
69 |
70 |
71 |
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const countryList = {
2 | AED: "AE", AFN: "AF", XCD: "AG",
3 | ALL: "AL", AMD: "AM", ANG: "AN",
4 | AOA: "AO", AQD: "AQ", ARS: "AR",
5 | AUD: "AU", AZN: "AZ", BAM: "BA",
6 | BBD: "BB",BDT: "BD", XOF: "BE",
7 | BGN: "BG",BHD: "BH", BIF: "BI",
8 | BMD: "BM", BND: "BN", BOB: "BO",
9 | BRL: "BR", BSD: "BS", NOK: "BV",
10 | BWP: "BW", BYR: "BY", BZD: "BZ",
11 | CAD: "CA", CDF: "CD", XAF: "CF",
12 | CHF: "CH",CLP: "CL", CNY: "CN",
13 | COP: "CO", CRC: "CR", CUP: "CU",
14 | CVE: "CV", CYP: "CY", CZK: "CZ",
15 | DJF: "DJ", DKK: "DK", DOP: "DO",
16 | DZD: "DZ", ECS: "EC", EEK: "EE",
17 | EGP: "EG", ETB: "ET", EUR: "FR",
18 | FJD: "FJ", FKP: "FK", GBP: "GB",
19 | GEL: "GE", GGP: "GG", GHS: "GH",
20 | GIP: "GI", GMD: "GM", GNF: "GN",
21 | GTQ: "GT", GYD: "GY", HKD: "HK",
22 | HNL: "HN", HRK: "HR", HTG: "HT",
23 | HUF: "HU", IDR: "ID", ILS: "IL",
24 | INR: "IN", IQD: "IQ", IRR: "IR",
25 | ISK: "IS",JMD: "JM", JOD: "JO",
26 | JPY: "JP", KES: "KE", KGS: "KG",
27 | KHR: "KH", KMF: "KM", KPW: "KP",
28 | KRW: "KR", KWD: "KW", KYD: "KY",
29 | KZT: "KZ", LAK: "LA", LBP: "LB",
30 | LKR: "LK", LRD: "LR", LSL: "LS",
31 | LTL: "LT", LVL: "LV", LYD: "LY",
32 | MAD: "MA", MDL: "MD", MGA: "MG",
33 | MKD: "MK", MMK: "MM", MNT: "MN",
34 | MOP: "MO", MRO: "MR", MTL: "MT",
35 | MUR: "MU", MVR: "MV", MWK: "MW",
36 | MXN: "MX", MYR: "MY", MZN: "MZ",
37 | NAD: "NA", XPF: "NC", NGN: "NG",
38 | NIO: "NI", NPR: "NP", NZD: "NZ",
39 | OMR: "OM", PAB: "PA", PEN: "PE",
40 | PGK: "PG", PHP: "PH", PKR: "PK",
41 | PLN: "PL", PYG: "PY", QAR: "QA",
42 | RON: "RO", RSD: "RS", RUB: "RU",
43 | RWF: "RW", SAR: "SA", SBD: "SB",
44 | SCR: "SC", SDG: "SD", SEK: "SE",
45 | SGD: "SG", SKK: "SK", SLL: "SL",
46 | SOS: "SO", SRD: "SR", STD: "ST",
47 | SVC: "SV", SYP: "SY", SZL: "SZ",
48 | THB: "TH",
49 | TJS: "TJ",
50 | TMT: "TM",
51 | TND: "TN",
52 | TOP: "TO",
53 | TRY: "TR",
54 | TTD: "TT",
55 | TWD: "TW",
56 | TZS: "TZ",
57 | UAH: "UA",
58 | UGX: "UG",
59 | USD: "US",
60 | UYU: "UY",
61 | UZS: "UZ",
62 | VEF: "VE",
63 | VND: "VN",
64 | VUV: "VU",
65 | YER: "YE",
66 | ZAR: "ZA",
67 | ZMK: "ZM",
68 | ZWD: "ZW",
69 | };
70 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Arial', sans-serif;
3 | background: linear-gradient(150deg, #2b4a4e, #D1A1D5, #280a52);
4 | color: #333333;
5 | margin: 0;
6 | padding: 0;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | height: 100vh;
11 | }
12 |
13 | .container {
14 | display: flex;
15 | flex-direction: column;
16 | background: linear-gradient(150deg, #9662f1,#2b4a4e, #82a2ba);
17 | padding: 30px;
18 | border-radius: 16px;
19 | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
20 | width: 350px;
21 | text-align: center;
22 | }
23 |
24 | h2 {
25 | color: #FFD700;
26 | text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
27 | }
28 |
29 | h3 {
30 | color: #32CD32;
31 | text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
32 | }
33 |
34 | form {
35 | display: flex;
36 | flex-direction: column;
37 | gap: 1.5rem;
38 | }
39 |
40 | .input {
41 | display: flex;
42 | flex-direction: column;
43 | }
44 |
45 | label {
46 | margin-bottom: 6px;
47 | color: #C1C1C1;
48 | font-weight: bold;
49 | }
50 |
51 | input,
52 | select {
53 | background-color: #2C3E50;
54 | color: #FFFFFF;
55 | border: 1px solid #7F8C8D;
56 | border-radius: 10px;
57 | padding: 14px;
58 | transition: border-color 0.3s ease, transform 0.3s ease;
59 | }
60 |
61 | select {
62 | width: 100%;
63 | }
64 |
65 | input:focus,
66 | select:focus {
67 | border-color: #FFD700;
68 | outline: none;
69 | box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
70 | transform: scale(1.05);
71 | }
72 |
73 | button {
74 | background: linear-gradient(135deg, #2C3E50, #1ABC9C);
75 | color: #FFFFFF;
76 | font-weight: bold;
77 | border: none;
78 | padding: 14px;
79 | border-radius: 12px;
80 | cursor: pointer;
81 | transition: background 0.4s ease, transform 0.3s ease;
82 | }
83 |
84 | button:hover {
85 | background: linear-gradient(145deg, #16A085, #1ABC9C);
86 | transform: scale(1.1);
87 | }
88 |
89 | .result {
90 | margin-top: 20px;
91 | font-size: 1.2rem;
92 | color: #E8E8E8;
93 | }
94 |
95 | .error {
96 | color: #E74C3C;
97 | font-weight: bold;
98 | }
99 |
100 | .currency-selector {
101 | display: flex;
102 | align-items: center;
103 | gap: 15px;
104 | }
105 |
106 | .currency-flag {
107 | width: 28px;
108 | height: 28px;
109 | border-radius: 6px;
110 | box-shadow: 0 3px 6px rgba(0,0,0,0.3);
111 | }
--------------------------------------------------------------------------------
/script2.js:
--------------------------------------------------------------------------------
1 | let form = document.querySelector("form");
2 | let resultValue = document.querySelector("#result-value");
3 | let countryOptions = document.querySelectorAll("select");
4 |
5 | countryOptions.forEach(selectOption => {
6 | for (currCode in countryList) {
7 | let option = document.createElement("option");
8 | option.innerHTML = currCode;
9 | option.value = currCode;
10 | selectOption.append(option);
11 | if (selectOption.id === "from-currency" && currCode === "CNY") {
12 | option.selected = "selected";
13 | } else if (selectOption.id === "to-currency" && currCode === "PKR") {
14 | option.selected = "selected";
15 | }
16 | };
17 | selectOption.addEventListener("change", (e) => {
18 | countryFlag(e.target);
19 | });
20 |
21 | });
22 |
23 | // Function to update country flag based on selected currency.
24 | async function countryFlag(countryOption) {
25 | let countryCode = countryList[countryOption.value];
26 | let URL = `https://flagsapi.com/${countryCode}/flat/64.png`
27 | let img = countryOption.parentElement.querySelector("IMG");
28 | img.src = URL;
29 | }
30 |
31 | form.addEventListener("submit", async (e) => {
32 | e.preventDefault();
33 | let input = document.querySelector("input");
34 | let inputVal = Number(input.value);
35 | if (inputVal <= 0 || isNaN(inputVal)) {
36 | resultValue.innerText = "INVALID INPUT, TRY AGAIN."
37 | resultValue.classList.add("error")
38 | input.value = "";
39 | return;
40 | }
41 | else {
42 | fetchData(inputVal);
43 | }
44 | });
45 |
46 |
47 | async function fetchData(inputVal) {
48 | let fromCurrency = document.querySelector("#from-currency").value.toLowerCase();
49 | let toCurrency = document.querySelector("#to-currency").value.toLowerCase();
50 |
51 | try {
52 | let URL = `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${fromCurrency}.json`
53 | let response = await fetch(URL);
54 | let data = await response.json();
55 |
56 | let exchangeRate = data[fromCurrency][toCurrency];
57 | if (!exchangeRate) {
58 | resultValue.innerText = "Exchange rate not available.";
59 | resultValue.classList.add("error");
60 | return;
61 | }
62 |
63 | let convertedAmount = (inputVal * exchangeRate).toFixed(2);
64 | resultValue.innerText = `${inputVal} ${fromCurrency.toUpperCase()} = ${convertedAmount} ${toCurrency.toUpperCase()}`;
65 | resultValue.classList.remove("error");
66 |
67 | }
68 |
69 | catch (error) {
70 | resultValue.innerText = "Failed to fetch exchange rates. Please try again later."
71 | resultValue.classList.add("error");
72 | console.log("error", error);
73 |
74 | }
75 | }
--------------------------------------------------------------------------------