Skip to content

Commit a0a65d0

Browse files
code-with-divyanshucode-with-divyanshu
authored
Add Initial File
1 parent 8646cf8 commit a0a65d0

File tree

4 files changed

+368
-0
lines changed

4 files changed

+368
-0
lines changed

Diff for: ‎currency-convert/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+
};

Diff for: ‎currency-convert/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Currency Converter</title>
7+
<link rel="stylesheet" href="style.css">
8+
<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" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h2 class="text-center">Currency Converter</h2>
13+
<form>
14+
<div class="amount">
15+
<p class="mb-2 ps-2">Enter Amount</p>
16+
<input type="text" value="1"/>
17+
</div>
18+
<div class="dropdown">
19+
<div class="from">
20+
<p class="mb-2 ps-2">From</p>
21+
<div class="select-container">
22+
<img src="https://flagsapi.com/US/flat/64.png">
23+
<select name="from"></select>
24+
</div>
25+
</div>
26+
<i class="fa-solid fa-arrow-right-arrow-left"></i>
27+
<div class="to">
28+
<p class="mb-2 ps-2">To</p>
29+
<div class="select-container">
30+
<img src="https://flagsapi.com/IN/flat/64.png">
31+
<select name="to"></select>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="msg">1USD = 80INR</div>
36+
<button id="btn">Exchange Currency</button>
37+
</form>
38+
</div>
39+
<script src="codes.js"></script>
40+
<script src="script.js"></script>
41+
</body>
42+
</html>

Diff for: ‎currency-convert/script.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const base_url = "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/";
2+
3+
const dropdowns = document.querySelectorAll(".dropdown select");
4+
const btn = document.querySelector("#btn");
5+
const fromCurr = document.querySelector(".from select");
6+
const toCurr = document.querySelector(".to select");
7+
const msg = document.querySelector(".msg");
8+
9+
window.addEventListener("load", () => {
10+
updateExchangeRate();
11+
});
12+
13+
14+
for(let select of dropdowns) {
15+
for(currCode in countryList) {
16+
let newOption = document.createElement("option");
17+
newOption.innerText = currCode;
18+
newOption.value = currCode;
19+
if(select.name === "from" && currCode === "USD") {
20+
newOption.selected = "selected";
21+
} else if(select.name === "to" && currCode === "INR") {
22+
newOption.selected = "selected";
23+
}
24+
select.append(newOption);
25+
}
26+
27+
select.addEventListener("change", (evt) => {
28+
updateFlag(evt.target);
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", (evt) => {
41+
evt.preventDefault();
42+
updateExchangeRate();
43+
});
44+
45+
const updateExchangeRate = async () => {
46+
let amount = document.querySelector(".amount input");
47+
let amtVal = amount.value;
48+
if(amtVal === "" || amtVal < 1) {
49+
amtVal = 1;
50+
amount.value = "1";
51+
}
52+
53+
const url = `${base_url}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
54+
let response = await fetch(url);
55+
let data = await response.json();
56+
let rate = data[toCurr.value.toLowerCase()];
57+
//console.log(rate);
58+
59+
let finalAmt = amtVal * rate;
60+
msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmt} ${toCurr.value}`
61+
}

Diff for: ‎currency-convert/style.css

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
min-height: 100vh;
11+
background-color: #D4E9B6;
12+
}
13+
14+
h2 {
15+
font-size: 2rem;
16+
}
17+
18+
.text-center{
19+
text-align: center;
20+
}
21+
22+
.mb-2 {
23+
margin-bottom: 0.5rem;
24+
font-weight: 600;
25+
}
26+
27+
.ps-2 {
28+
padding-left: 0.5rem;
29+
}
30+
31+
.container {
32+
background-color: #94DFDD;
33+
padding: 2rem;
34+
border-radius: 1rem;
35+
min-height: 45vh;
36+
width: 45vh;
37+
}
38+
39+
form {
40+
margin: 2rem 0 1rem 0;
41+
}
42+
43+
form select,
44+
button,
45+
input {
46+
width: 100%;
47+
border: none;
48+
outline: none;
49+
border-radius: 0.75rem;
50+
}
51+
52+
form input {
53+
border: 1px solid lightgray;
54+
font-size: 1rem;
55+
height: 3rem;
56+
padding-left: 0.5rem;
57+
}
58+
59+
.dropdown {
60+
display: flex;
61+
justify-content: space-between;
62+
align-items: center;
63+
margin-top: 2rem;
64+
}
65+
66+
.dropdown i {
67+
font-size: 1.5rem;
68+
margin-top: 1rem;
69+
}
70+
71+
.select-container img {
72+
max-width: 2rem;
73+
}
74+
75+
.select-container {
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
width: 6rem;
80+
border: 1px solid grey;
81+
border-radius: 0.5rem;
82+
}
83+
84+
.select-container select {
85+
font-size: 1rem;
86+
font-weight: semibold;
87+
width: auto;
88+
}
89+
90+
.msg {
91+
margin: 2rem 0 2rem 0;
92+
text-align: center;
93+
font-weight: 600;
94+
font-size: 1.13rem;
95+
}
96+
97+
form button {
98+
height: 3rem;
99+
background-color: #AB70CF;
100+
color: #fff;
101+
font-size: 1.15rem;
102+
cursor: pointer;
103+
}
104+

0 commit comments

Comments
 (0)