├── README.md
├── index.html
├── style.css
└── js
├── script.js
└── country_list.js
/README.md:
--------------------------------------------------------------------------------
1 | # Currency_Converter
2 | Currency Converter using JS!!
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Currency Exchange App in JavaScript
8 |
9 |
10 |
11 |
12 |
13 |
14 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Import Google Font - Poppins */
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
3 | *{
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | font-family: 'Poppins', sans-serif;
8 | }
9 | body{
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | min-height: 100vh;
14 | padding: 0 10px;
15 | background-image: linear-gradient(to right, #00b4db, #0083b0);
16 |
17 |
18 | }
19 | ::selection{
20 | color: #fff;
21 | background: #675AFE;
22 | }
23 | .wrapper{
24 | width: 500px;
25 | padding: 30px;
26 | border-radius: 7px;
27 | background: #fff;
28 | box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
29 | }
30 | .wrapper header{
31 | font-size: 28px;
32 | font-weight: 500;
33 | text-align: center;
34 | }
35 | .wrapper form{
36 | margin: 40px 0 20px 0;
37 | }
38 | form :where(input, select, button){
39 | width: 100%;
40 | outline: none;
41 | border-radius: 5px;
42 | border: none;
43 | }
44 | form p{
45 | font-size: 18px;
46 | margin-bottom: 5px;
47 | }
48 | form input{
49 | height: 50px;
50 | font-size: 17px;
51 | padding: 0 15px;
52 | border: 1px solid #999;
53 | }
54 | form input:focus{
55 | padding: 0 14px;
56 | border: 2px solid #0083b0;
57 | }
58 | form .drop-list{
59 | display: flex;
60 | margin-top: 20px;
61 | align-items: center;
62 | justify-content: space-between;
63 | }
64 | .drop-list .select-box{
65 | display: flex;
66 | width: 175px;
67 | height: 45px;
68 | align-items: center;
69 | border-radius: 5px;
70 | justify-content: center;
71 | border: 1px solid #999;
72 | }
73 | .select-box img{
74 | max-width: 21px;
75 | }
76 | .select-box select{
77 | width: auto;
78 | font-size: 20px;
79 | background: none;
80 | margin: 0 -5px 0 5px;
81 | }
82 | .select-box select::-webkit-scrollbar{
83 | width: 8px;
84 | }
85 | .select-box select::-webkit-scrollbar-track{
86 | background: #fff;
87 | }
88 | .select-box select::-webkit-scrollbar-thumb{
89 | background: #888;
90 | border-radius: 8px;
91 | border-right: 2px solid #ffffff;
92 | }
93 | .drop-list .icon{
94 | cursor: pointer;
95 | margin-top: 30px;
96 | font-size: 22px;
97 | }
98 | form .exchange-rate{
99 | border: 1px dotted gray;
100 | border-radius: 5px;
101 | padding: 7px;
102 | display: flex;
103 | justify-content: center;
104 | align-items: center;
105 | font-size: 19px;
106 | margin: 20px 0 30px;
107 | }
108 | form button{
109 | height: 52px;
110 | color: #fff;
111 | font-size: 17px;
112 | cursor: pointer;
113 | background: #00b4db;
114 | transition: all 0.5s;
115 | }
116 | form button:hover{
117 | background: #049bce;
118 |
119 | }
120 |
121 |
122 |
123 | .footer .footer-text{
124 | text-decoration: none;
125 | font-size: 14px;
126 | font-weight: 400;
127 | color: #024359;
128 | transition: all 0.5s;
129 | }
130 | .footer .footer-text:hover{
131 | color: #035c7a;
132 | }
133 |
134 | @media (max-width: 700px){
135 |
136 | .wrapper{
137 | width: 370px;
138 | }
139 |
140 |
141 | .drop-list .select-box{
142 | width: 115px;
143 | height: 45px;
144 | }
145 |
146 |
147 | }
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const dropList = document.querySelectorAll("form select"),
2 | fromCurrency = document.querySelector(".from select"),
3 | toCurrency = document.querySelector(".to select"),
4 | getButton = document.querySelector("form button");
5 |
6 | for (let i = 0; i < dropList.length; i++) {
7 | for(let currency_code in country_list){
8 | // selecting USD by default as FROM currency and AFN as TO currency
9 | let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "AFN" ? "selected" : "";
10 | // creating option tag with passing currency code as a text and value
11 | let optionTag = ``;
12 | // inserting options tag inside select tag
13 | dropList[i].insertAdjacentHTML("beforeend", optionTag);
14 | }
15 | dropList[i].addEventListener("change", e =>{
16 | loadFlag(e.target); // calling loadFlag with passing target element as an argument
17 | });
18 | }
19 |
20 | function loadFlag(element){
21 | for(let code in country_list){
22 | if(code == element.value){ // if currency code of country list is equal to option value
23 | let imgTag = element.parentElement.querySelector("img"); // selecting img tag of particular drop list
24 | // passing country code of a selected currency code in a img url
25 | imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
26 | }
27 | }
28 | }
29 |
30 | window.addEventListener("load", ()=>{
31 | getExchangeRate();
32 | });
33 |
34 | getButton.addEventListener("click", e =>{
35 | e.preventDefault(); //preventing form from submitting
36 | getExchangeRate();
37 | });
38 |
39 | const exchangeIcon = document.querySelector("form .icon");
40 | exchangeIcon.addEventListener("click", ()=>{
41 | let tempCode = fromCurrency.value; // temporary currency code of FROM drop list
42 | fromCurrency.value = toCurrency.value; // passing TO currency code to FROM currency code
43 | toCurrency.value = tempCode; // passing temporary currency code to TO currency code
44 | loadFlag(fromCurrency); // calling loadFlag with passing select element (fromCurrency) of FROM
45 | loadFlag(toCurrency); // calling loadFlag with passing select element (toCurrency) of TO
46 | getExchangeRate(); // calling getExchangeRate
47 | })
48 |
49 | function getExchangeRate(){
50 | const amount = document.querySelector("form input");
51 | const exchangeRateTxt = document.querySelector("form .exchange-rate");
52 | let amountVal = amount.value;
53 | // if user don't enter any value or enter 0 then we'll put 1 value by default in the input field
54 | if(amountVal == "" || amountVal == "0"){
55 | amount.value = "1";
56 | amountVal = 1;
57 | }
58 | exchangeRateTxt.innerText = "Getting exchange rate...";
59 | let url = `https://v6.exchangerate-api.com/v6/YOUR_API_KEY/latest/${fromCurrency.value}`;
60 | // fetching api response and returning it with parsing into js obj and in another then method receiving that obj
61 | fetch(url).then(response => response.json()).then(result =>{
62 | let exchangeRate = result.conversion_rates[toCurrency.value]; // getting user selected TO currency rate
63 | let totalExRate = (amountVal * exchangeRate).toFixed(2); // multiplying user entered value with selected TO currency rate
64 | exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
65 | }).catch(() =>{ // if user is offline or any other error occured while fetching data then catch function will run
66 | exchangeRateTxt.innerText = "Something went wrong";
67 | });
68 | }
--------------------------------------------------------------------------------
/js/country_list.js:
--------------------------------------------------------------------------------
1 | let country_list = {
2 | "AED" : "AE",
3 | "AFN" : "AF",
4 | "XCD" : "AG",
5 | "ALL" : "AL",
6 | "AMD" : "AM",
7 | "ANG" : "AN",
8 | "AOA" : "AO",
9 | "AQD" : "AQ",
10 | "ARS" : "AR",
11 | "AUD" : "AU",
12 | "AZN" : "AZ",
13 | "BAM" : "BA",
14 | "BBD" : "BB",
15 | "BDT" : "BD",
16 | "XOF" : "BE",
17 | "BGN" : "BG",
18 | "BHD" : "BH",
19 | "BIF" : "BI",
20 | "BMD" : "BM",
21 | "BND" : "BN",
22 | "BOB" : "BO",
23 | "BRL" : "BR",
24 | "BSD" : "BS",
25 | "NOK" : "BV",
26 | "BWP" : "BW",
27 | "BYR" : "BY",
28 | "BZD" : "BZ",
29 | "CAD" : "CA",
30 | "CDF" : "CD",
31 | "XAF" : "CF",
32 | "CHF" : "CH",
33 | "CLP" : "CL",
34 | "CNY" : "CN",
35 | "COP" : "CO",
36 | "CRC" : "CR",
37 | "CUP" : "CU",
38 | "CVE" : "CV",
39 | "CYP" : "CY",
40 | "CZK" : "CZ",
41 | "DJF" : "DJ",
42 | "DKK" : "DK",
43 | "DOP" : "DO",
44 | "DZD" : "DZ",
45 | "ECS" : "EC",
46 | "EEK" : "EE",
47 | "EGP" : "EG",
48 | "ETB" : "ET",
49 | "EUR" : "FR",
50 | "FJD" : "FJ",
51 | "FKP" : "FK",
52 | "GBP" : "GB",
53 | "GEL" : "GE",
54 | "GGP" : "GG",
55 | "GHS" : "GH",
56 | "GIP" : "GI",
57 | "GMD" : "GM",
58 | "GNF" : "GN",
59 | "GTQ" : "GT",
60 | "GYD" : "GY",
61 | "HKD" : "HK",
62 | "HNL" : "HN",
63 | "HRK" : "HR",
64 | "HTG" : "HT",
65 | "HUF" : "HU",
66 | "IDR" : "ID",
67 | "ILS" : "IL",
68 | "INR" : "IN",
69 | "IQD" : "IQ",
70 | "IRR" : "IR",
71 | "ISK" : "IS",
72 | "JMD" : "JM",
73 | "JOD" : "JO",
74 | "JPY" : "JP",
75 | "KES" : "KE",
76 | "KGS" : "KG",
77 | "KHR" : "KH",
78 | "KMF" : "KM",
79 | "KPW" : "KP",
80 | "KRW" : "KR",
81 | "KWD" : "KW",
82 | "KYD" : "KY",
83 | "KZT" : "KZ",
84 | "LAK" : "LA",
85 | "LBP" : "LB",
86 | "LKR" : "LK",
87 | "LRD" : "LR",
88 | "LSL" : "LS",
89 | "LTL" : "LT",
90 | "LVL" : "LV",
91 | "LYD" : "LY",
92 | "MAD" : "MA",
93 | "MDL" : "MD",
94 | "MGA" : "MG",
95 | "MKD" : "MK",
96 | "MMK" : "MM",
97 | "MNT" : "MN",
98 | "MOP" : "MO",
99 | "MRO" : "MR",
100 | "MTL" : "MT",
101 | "MUR" : "MU",
102 | "MVR" : "MV",
103 | "MWK" : "MW",
104 | "MXN" : "MX",
105 | "MYR" : "MY",
106 | "MZN" : "MZ",
107 | "NAD" : "NA",
108 | "XPF" : "NC",
109 | "NGN" : "NG",
110 | "NIO" : "NI",
111 | "NPR" : "NP",
112 | "NZD" : "NZ",
113 | "OMR" : "OM",
114 | "PAB" : "PA",
115 | "PEN" : "PE",
116 | "PGK" : "PG",
117 | "PHP" : "PH",
118 | "PKR" : "PK",
119 | "PLN" : "PL",
120 | "PYG" : "PY",
121 | "QAR" : "QA",
122 | "RON" : "RO",
123 | "RSD" : "RS",
124 | "RUB" : "RU",
125 | "RWF" : "RW",
126 | "SAR" : "SA",
127 | "SBD" : "SB",
128 | "SCR" : "SC",
129 | "SDG" : "SD",
130 | "SEK" : "SE",
131 | "SGD" : "SG",
132 | "SKK" : "SK",
133 | "SLL" : "SL",
134 | "SOS" : "SO",
135 | "SRD" : "SR",
136 | "STD" : "ST",
137 | "SVC" : "SV",
138 | "SYP" : "SY",
139 | "SZL" : "SZ",
140 | "THB" : "TH",
141 | "TJS" : "TJ",
142 | "TMT" : "TM",
143 | "TND" : "TN",
144 | "TOP" : "TO",
145 | "TRY" : "TR",
146 | "TTD" : "TT",
147 | "TWD" : "TW",
148 | "TZS" : "TZ",
149 | "UAH" : "UA",
150 | "UGX" : "UG",
151 | "USD" : "US",
152 | "UYU" : "UY",
153 | "UZS" : "UZ",
154 | "VEF" : "VE",
155 | "VND" : "VN",
156 | "VUV" : "VU",
157 | "YER" : "YE",
158 | "ZAR" : "ZA",
159 | "ZMK" : "ZM",
160 | "ZWD" : "ZW"
161 | }
162 |
--------------------------------------------------------------------------------