Skip to content

Commit dfefd77

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #864 from Alkaison/RealtimeCurrencyConverterProject
Feat: Realtime Currency Converter Project using API.
2 parents 9a7f46e + e9e86c7 commit dfefd77

8 files changed

Lines changed: 426 additions & 1 deletion

File tree

‎Projects/Realtime Currency Converter/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Currency Converter
2+
3+
This is a currency converter web application that fetches real-time data for currency conversion rates using HTML, CSS, and JavaScript. The application allows users to convert currencies by selecting the source currency and the target currency, and it provides an interface to easily switch between the two selected values. Visit the webpage here: https://alkaison.github.io/Currency-Converter
4+
5+
## Features
6+
7+
- Real-time currency conversion rates using an API
8+
- Simple and intuitive user interface
9+
- Select source currency and target currency
10+
- Button to switch the selected currencies
11+
- Display of the converted currency value
12+
13+
## Screenshots
14+
15+
![Currency Converter](https://i.postimg.cc/mrFTzR1D/Currency-Converter1.png)
16+
![Currency Converter](https://i.postimg.cc/qvFkvgRS/Currency-Converter2.png)
17+
18+
## API Integration
19+
20+
This currency converter utilizes a real-time currency conversion API to fetch the latest exchange rates. The API used in this project is [Exchange Rate API](https://app.exchangerate-api.com/ "Exchange Rate API"), which provides accurate and up-to-date currency conversion data. To integrate a different API, you can modify the JavaScript code in `script.js` file to make requests and handle the response according to the API documentation.
21+
22+
Please note that you may need to sign up for an API key and update the code with your API key if required by the chosen API.
23+
24+
## Technologies Used
25+
26+
- HTML
27+
- CSS
28+
- JavaScript (Modern)
29+
30+
## Credits
31+
32+
This project was developed by [Alkaison](https://github.com/Alkaison "GitHub Profile"). If you have any questions or suggestions, feel free to [contact me](https://twitter.com/Alkaison "Twitter Profile").

‎Projects/Realtime Currency Converter/coinExchangeSticker.png‎

219 KB
Loading

‎Projects/Realtime Currency Converter/currencyCodes.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
export const currency_list = [
2+
["AED", "United Arab Emirates Dirhams"],
3+
["AFN", "Afghan Afghani"],
4+
["ALL", "Albanian Lek"],
5+
["AMD", "Armenian Dram"],
6+
["ANG", "Netherlands Antillean Guilder"],
7+
["AOA", "Angolan Kwanza"],
8+
["ARS", "Argentine Peso"],
9+
["AUD", "Australian Dollar"],
10+
["AWG", "Aruban Florin"],
11+
["AZN", "Azerbaijani Manat"],
12+
["BAM", "Bosnia Herzegovina Convertible Mark"],
13+
["BBD", "Barbadian Dollar"],
14+
["BGN", "Bulgarian Lev"],
15+
["BHD", "Bahraini Dinar"],
16+
["BIF", "Burundian Franc"],
17+
["BMD", "Bermudan Dollar"],
18+
["BOB", "Bolivian Boliviano"],
19+
["BRL", "Brazilian Real"],
20+
["BSD", "Bahamian Dollar"],
21+
["BWP", "Botswanan Pula"],
22+
["BYN", "Belarusian Ruble"],
23+
["BZD", "Belize Dollar"],
24+
["CDF", "Congolese Franc"],
25+
["CHF", "Swiss Franc"],
26+
["CLP", "Chilean Peso"],
27+
["CNY", "Chinese Yuan"],
28+
["COP", "Colombian Peso"],
29+
["CRC", "Costa Rican Colón"],
30+
["CUP", "Cuban Peso"],
31+
["CZK", "Czech Koruna"],
32+
["DJF", "Djiboutian Franc"],
33+
["DKK", "Danish Krone"],
34+
["DOP", "Dominican Peso"],
35+
["DZD", "Algerian Dinar"],
36+
["EGP", "Egyptian Pound"],
37+
["ERN", "Eritrean Nakfa"],
38+
["EUR", "Euro"],
39+
["FJD", "Fijian Dollar"],
40+
["FKP", "Falkland Islands Pound"],
41+
["GBP", "British Pound"],
42+
["GEL", "Georgian Lari"],
43+
["GHS", "Ghanaian Cedi"],
44+
["GIP", "Gibraltar Pound"],
45+
["GMD", "Gambian Dalasi"],
46+
["GNF", "Guinean Franc"],
47+
["GTQ", "Guatemalan Quetzal"],
48+
["GYD", "Guyanaese Dollar"],
49+
["HKD", "Hong Kong Dollar"],
50+
["HNL", "Honduran Lempira"],
51+
["HRK", "Croatian Kuna"],
52+
["HTG", "Haitian Gourde"],
53+
["HUF", "Hungarian Forint"],
54+
["IDR", "Indonesian Rupiah"],
55+
["ILS", "Israeli New Shekel"],
56+
["INR", "Indian Rupee"],
57+
["IQD", "Iraqi Dinar"],
58+
["IRR", "Iranian Rial"],
59+
["ISK", "Icelandic Króna"],
60+
["JMD", "Jamaican Dollar"],
61+
["JOD", "Jordanian Dinar"],
62+
["JPY", "Japanese Yen"],
63+
["KES", "Kenyan Shilling"],
64+
["KGS", "Kyrgystani Som"],
65+
["KHR", "Cambodian Riel"],
66+
["KMF", "Comorian Franc"],
67+
["KRW", "South Korean Won"],
68+
["KWD", "Kuwaiti Dinar"],
69+
["KYD", "Cayman Islands Dollar"],
70+
["KZT", "Kazakhstani Tenge"],
71+
["LAK", "Laotian Kip"],
72+
["LBP", "Lebanese Pound"],
73+
["LKR", "Sri Lankan Rupee"],
74+
["LRD", "Liberian Dollar"],
75+
["LSL", "Lesotho Loti"],
76+
["LYD", "Libyan Dinar"],
77+
["MAD", "Moroccan Dirham"],
78+
["MDL", "Moldovan Leu"],
79+
["MGA", "Malagasy Ariary"],
80+
["MKD", "Macedonian Denar"],
81+
["MMK", "Myanmar Kyat"],
82+
["MNT", "Mongolian Tugrik"],
83+
["MOP", "Macanese Pataca"],
84+
["MRU", "Mauritanian Ouguiya"],
85+
["MUR", "Mauritian Rupee"],
86+
["MVR", "Maldivian Rufiyaa"],
87+
["MWK", "Malawian Kwacha"],
88+
["MXN", "Mexican Peso"],
89+
["MYR", "Malaysian Ringgit"],
90+
["MZN", "Mozambican Metical"],
91+
["NAD", "Namibian Dollar"],
92+
["NGN", "Nigerian Naira"],
93+
["NIO", "Nicaraguan Córdoba"],
94+
["NOK", "Norwegian Krone"],
95+
["NPR", "Nepalese Rupee"],
96+
["NZD", "New Zealand Dollar"],
97+
["OMR", "Omani Rial"],
98+
["PAB", "Panamanian Balboa"],
99+
["PGK", "Papua New Guinean Kina"],
100+
["PHP", "Philippine Peso"],
101+
["PKR", "Pakistani Rupee"],
102+
["PLN", "Polish Zloty"],
103+
["PYG", "Paraguayan Guarani"],
104+
["QAR", "Qatari Riyal"],
105+
["RON", "Romanian Leu"],
106+
["RSD", "Serbian Dinar"],
107+
["RUB", "Russian Ruble"],
108+
["RWF", "Rwandan Franc"],
109+
["SAR", "Saudi Riyal"],
110+
["SBD", "Solomon Islands Dollar"],
111+
["SCR", "Seychellois Rupee"],
112+
["SDG", "Sudanese Pound"],
113+
["SEK", "Swedish Krona"],
114+
["SGD", "Singapore Dollar"],
115+
["SHP", "St. Helena Pound"],
116+
["SLL", "Sierra Leonean Leone (1964—2022)"],
117+
["SOS", "Somali Shilling"],
118+
["SRD", "Surinamese Dollar"],
119+
["SSP", "South Sudanese Pound"],
120+
["STN", "São Tomé Príncipe Dobra"],
121+
["SYP", "Syrian Pound"],
122+
["SZL", "Swazi Lilangeni"],
123+
["THB", "Thai Baht"],
124+
["TJS", "Tajikistani Somoni"],
125+
["TMT", "Turkmenistani Manat"],
126+
["TND", "Tunisian Dinar"],
127+
["TOP", "Tongan Paanga"],
128+
["TRY", "Turkish Lira"],
129+
["TTD", "Trinidad Tobago Dollar"],
130+
["TWD", "New Taiwan Dollar"],
131+
["TZS", "Tanzanian Shilling"],
132+
["UAH", "Ukrainian Hryvnia"],
133+
["UGX", "Ugandan Shilling"],
134+
["USD", "US Dollar"],
135+
["UYU", "Uruguayan Peso"],
136+
["UZS", "Uzbekistani Som"],
137+
["VES", "Venezuelan Bolívar"],
138+
["VND", "Vietnamese Dong"],
139+
["VUV", "Vanuatu Vatu"],
140+
["WST", "Samoan Tala"],
141+
["XAF", "Central African CFA Franc"],
142+
["XCD", "East Caribbean Dollar"],
143+
["XOF", "West African CFA Franc"],
144+
["XPF", "CFP Franc"],
145+
["YER", "Yemeni Rial"],
146+
["ZAR", "South African Rand"],
147+
["ZMW", "Zambian Kwacha"],
148+
["ZWL", "Zimbabwean Dollar (2009)"]
149+
];
150+
151+
export const api = "7643a9379eac5ef74dfef2d6";

‎Projects/Realtime Currency Converter/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Realtime Currency Converter</title>
8+
<!-- CSS File -->
9+
<link rel="stylesheet" href="./style.css">
10+
<!-- Favicon -->
11+
<link rel="shortcut icon" href="./coinExchangeSticker.png" type="image/x-icon">
12+
</head>
13+
<body>
14+
15+
<div class="container">
16+
<h1 id="title">Realtime Currency Converter</h1>
17+
<img src="./coinExchangeSticker.png" id="coinSticker" alt="coin exchange sticker">
18+
19+
<input type="number" id="userValue" min="1" name="userInput" placeholder="100">
20+
21+
<div class="selecterContainer">
22+
<select id="fromCurrency" name="fromCurrency" title="Convert From"></select>
23+
24+
<button type="button" id="switchCurrency">🔁</button>
25+
26+
<select id="toCurrency" name="toCurrency" title="Convert To"></select>
27+
</div>
28+
29+
<p id="status"></p>
30+
31+
<button type="button" id="btn">Convert</button>
32+
33+
<p id="result"></p>
34+
</div>
35+
36+
<!-- JavaScript File -->
37+
<script type="module" src="./script.js" defer></script>
38+
</body>
39+
</html>

‎Projects/Realtime Currency Converter/script.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// importing currency codes list and API Key
2+
import { currency_list, api } from "./currencyCodes.js";
3+
4+
const fromCurrencySelectTag = document.querySelector("#fromCurrency");
5+
const toCurrencySelectTag = document.querySelector("#toCurrency");
6+
const resultTag = document.querySelector("#result");
7+
const btn = document.querySelector("#btn");
8+
const status = document.querySelector("#status");
9+
10+
// append the curreny codes list to the list and select defaults
11+
currency_list.forEach((currency) => {
12+
const code = currency[0];
13+
const countryName = currency[1];
14+
15+
const newElement = document.createElement("option");
16+
newElement.value = code;
17+
newElement.textContent = `${code} - ${countryName}`;
18+
19+
if (code === "USD")
20+
newElement.selected = true;
21+
22+
fromCurrencySelectTag.append(newElement);
23+
24+
const newElementTo = newElement.cloneNode(true);
25+
26+
if (code === "INR")
27+
newElementTo.selected = true;
28+
29+
toCurrencySelectTag.append(newElementTo);
30+
});
31+
32+
// Swap currency on "click"
33+
document.getElementById("switchCurrency").onclick = () => {
34+
35+
const fromValue = fromCurrencySelectTag.value;
36+
fromCurrencySelectTag.value = toCurrencySelectTag.value;
37+
toCurrencySelectTag.value = fromValue;
38+
39+
};
40+
41+
// handle "click" event for conversion
42+
btn.onclick = () => {
43+
44+
const numberInputField = document.getElementById("userValue");
45+
const userEnteredAmount = numberInputField.value;
46+
47+
if(userEnteredAmount < 1 || isNaN(userEnteredAmount)) {
48+
numberInputField.style.border = "1px solid red";
49+
resultTag.style.color = "red";
50+
resultTag.textContent = "Error: Only numeric values greater than 0 are allowed.";
51+
}
52+
else {
53+
numberInputField.style.border = "1px solid gray";
54+
resultTag.style.color = "black";
55+
btn.textContent = "Processing: have patients...";
56+
57+
btn.disabled = true;
58+
btn.style.color = "gray";
59+
btn.style.cursor = "not-allowed";
60+
61+
convertAmount(userEnteredAmount);
62+
}
63+
}
64+
65+
// convert the amount to different currency using Fetch API
66+
function convertAmount(amount) {
67+
68+
fetchData(`https://v6.exchangerate-api.com/v6/${api}/latest/USD`)
69+
.then(data => {
70+
71+
const fromRates = data.conversion_rates[fromCurrencySelectTag.value];
72+
const toRates = data.conversion_rates[toCurrencySelectTag.value];
73+
74+
const perRate = (1 * (toRates / fromRates)).toFixed(2);
75+
const convertedAmount = (amount * (toRates / fromRates)).toFixed(2);
76+
77+
resultTag.style.color = "black";
78+
status.textContent = `1 ${fromCurrencySelectTag.value} = ${perRate} ${toCurrencySelectTag.value}`;
79+
resultTag.textContent = `${amount} ${fromCurrencySelectTag.value} = ${convertedAmount} ${toCurrencySelectTag.value}`;
80+
81+
btn.disabled = false;
82+
btn.style.color = "black";
83+
btn.style.cursor = "pointer";
84+
btn.textContent = "Convert";
85+
})
86+
.catch(error => console.log(`Additional information about error: ${error}`));
87+
}
88+
89+
// Fetch API Data with proper validation
90+
async function fetchData(url) {
91+
92+
try {
93+
const response = await fetch(url);
94+
95+
if (!response.ok)
96+
throw new Error(`HTTP error! Status: ${response.status}`);
97+
98+
const data = await response.json();
99+
return data;
100+
}
101+
catch (error) {
102+
resultTag.style.color = "red";
103+
resultTag.textContent = `Fetch API Error: ${error}`;
104+
105+
throw error;
106+
}
107+
}

0 commit comments

Comments
 (0)