Skip to content

Commit 3b37b19

Browse files
Aadi1235Aadi1235
authored
Add files via upload
1 parent 87a16e6 commit 3b37b19

File tree

4 files changed

+335
-0
lines changed

4 files changed

+335
-0
lines changed

‎codes.js

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
const countryList = {
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+
};

‎index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Currency Converter</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h2>Currency Converter</h2>
13+
<form>
14+
<div class="amount">
15+
<p>Amount</p>
16+
<input value="100" type="text" />
17+
</div>
18+
<div class="dropdown">
19+
<div class="from">
20+
<p>from</p>
21+
<div class="select-container">
22+
<img src="https://flagsapi.com/US/flat/64.png">
23+
<select name="from">
24+
</select>
25+
</div>
26+
</div>
27+
<i class="fa-solid fa-arrow-right-arrow-left"></i>
28+
<div class="to">
29+
<p>to</p>
30+
<div class="select-container">
31+
<img src="https://flagsapi.com/IN/flat/64.png">
32+
<select name="to">
33+
</select>
34+
</div>
35+
</div>
36+
</div>
37+
<div class="msg">1USD = 80INR</div>
38+
<button>Get Exchange Rate</button>
39+
</form>
40+
</div>
41+
42+
<script src="codes.js"></script>
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎script.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const BASE_URL = "https://2024-03-06.currency-api.pages.dev/v1/currencies"
2+
3+
const dropdowns = document.querySelectorAll(".dropdown select");
4+
const btn = document.querySelector("form button");
5+
const fromCurr = document.querySelector(".from select");
6+
const toCurr = document.querySelector(".to select");
7+
8+
9+
//for (code in countryList) {
10+
// console.log(code, countryList[code]);
11+
//}
12+
13+
for (let select of dropdowns) {
14+
for (currCode in countryList) {
15+
let newOption = document.createElement("option");
16+
newOption.innerText = currCode;
17+
newOption.value = currCode;
18+
if (select.name ==="from" && currCode ==="USD") {
19+
newOption.selected = "selected";
20+
} else if (select.name ==="to" && currCode ==="INR") {
21+
newOption.selected = "selected";
22+
}
23+
select.append(newOption);
24+
}
25+
26+
select.addEventListener("change", (evt)=> {
27+
updateFlag(evt.target);
28+
29+
});
30+
}
31+
32+
const updateFlag = (element) => {
33+
let currCode = element.value;
34+
let countryCode = countryList[currCode];
35+
let newSrc =`https://flagsapi.com/${countryCode}/flat/64.png`;
36+
let img = element.parentElement.querySelector("img");
37+
img.src = newSrc;
38+
}
39+
40+
btn.addEventListener("click", async (evt) => {
41+
evt.preventDefault();
42+
let amount = document.querySelector(".amount input");
43+
let amtVal = amount.value;
44+
if (amtVal === "" || amtVal < 1) {
45+
amtVal = 1;
46+
amount.value = "1";
47+
}
48+
//console.log(fromCurr.value,toCurr.value);
49+
const URL =`${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
50+
51+
let response = await fetch(URL);
52+
let data = await response.json();
53+
console.log(data);
54+
});
55+

‎style.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body{
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
min-height: 100vh;
11+
background-color: #f4e4ba;
12+
}
13+
.container {
14+
background-color: #fff;
15+
padding: 50px;
16+
border-radius: 1rem;
17+
min-height: 45vh;
18+
width: 45vh;
19+
}
20+
21+
form {
22+
margin: 2rem 0 1rem 0;
23+
}
24+
25+
form select,button,input {
26+
width: 100%;
27+
border: none;
28+
outline: none;
29+
border-radius: 0.75rem;
30+
}
31+
32+
form input {
33+
border: 1px solid lightgray;
34+
font-size: 1rem;
35+
height: 3rem;
36+
padding-left: 0.5rem;
37+
}
38+
39+
.dropdown {
40+
display: flex;
41+
justify-content: space-between;
42+
align-items: center;
43+
margin-top: 2rem;
44+
}
45+
46+
.select-container img {
47+
max-width: 2rem;
48+
}
49+
50+
.select-container {
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
width: 6rem;
55+
border: 1px solid lightgray;
56+
border-radius: 0.5rem;
57+
}
58+
59+
.select-container select {
60+
font-size: 1rem;
61+
width: auto;
62+
}
63+
64+
.msg {
65+
margin: 2rem 0 2rem 0;
66+
}
67+
68+
form button {
69+
height: 3rem;
70+
background-color: #af48af;
71+
color: #fff;
72+
font-size: 1.15rem;
73+
cursor: pointer;
74+
}

0 commit comments

Comments
 (0)