Skip to content

Commit fa76267

Browse files
committed
Tilt card updated
1 parent 1343e0b commit fa76267

File tree

12 files changed

+713
-238
lines changed

12 files changed

+713
-238
lines changed

BMI calculator/style.css

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
border-radius: 20px;
45
font-family: "Times New Roman", Times, serif;
56
}
67
body {
7-
background-color: #afd2e9;
8+
height: 100vh;
9+
background-color: #dee2ff;
10+
display: flex;
11+
justify-content: center;
12+
flex-direction: column;
13+
align-items: center;
814
}
915
#heading {
1016
text-align: center;
1117
font-size: 10vmin;
1218
}
1319
.container {
1420
height: 50vh;
15-
width: 100vw;
21+
width: 60vw;
1622
display: flex;
1723
justify-content: center;
1824
align-content: center;
1925
margin-top: 10vmin;
26+
border-radius: 20px;
27+
box-shadow: 0 0 10px;
28+
padding: 10px;
29+
background-color: #fff;
2030
}
2131
.info {
2232
height: 50vmin;
23-
width: 60vmin;
33+
width: 62vmin;
2434
display: flex;
2535
flex-wrap: wrap;
2636
justify-content: space-between;
@@ -98,3 +108,12 @@ body {
98108
.result-meter li {
99109
margin: 15px 0 0 30px;
100110
}
111+
112+
button {
113+
border: none;
114+
background-color: #59a5d8;
115+
cursor: pointer;
116+
}
117+
button:active{
118+
font-size: 2vw;
119+
}

Currency calculator/app.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const baseUrl = "https://latest.currency-api.pages.dev/v1/currencies/";
2+
const dropdowns = document.querySelectorAll(".dropdown select");
3+
4+
const btn = document.querySelector(".convert-button");
5+
6+
let fromCurr = document.querySelector(".from select");
7+
let toCurr = document.querySelector(".to select");
8+
let amount = document.querySelector(".get-info input");
9+
let resultDiv = document.querySelector(".result-div");
10+
11+
let result = document.querySelector(".result-msg");
12+
let swap = document.querySelector(".swap");
13+
let msg = document.querySelector(".unit-msg p");
14+
let symbolDiv = document.querySelector(".sign");
15+
16+
const updateSymbol = () => {
17+
let symbol = currency;
18+
let currSymbol = fromCurr.value;
19+
let finalSymbol;
20+
for (let code in symbol) {
21+
if (code === currSymbol) {
22+
finalSymbol = currency[code];
23+
}
24+
}
25+
symbolDiv.innerText = finalSymbol;
26+
};
27+
28+
// adding dropdown Values
29+
30+
for (let select of dropdowns) {
31+
for (currCode in countryList) {
32+
let newOption = document.createElement("option");
33+
newOption.innerText = currCode;
34+
newOption.values = currCode;
35+
if (select.name == "from" && currCode === "USD") {
36+
newOption.selected = "selected";
37+
} else if (select.name == "to" && currCode === "INR") {
38+
newOption.selected = "selected";
39+
}
40+
select.append(newOption);
41+
}
42+
select.addEventListener("change", (evt) => {
43+
updateFlag(evt.target);
44+
});
45+
updateSymbol();
46+
}
47+
swap.addEventListener("click", () => {
48+
let fromImg = document.querySelector(".from-img");
49+
let toImg = document.querySelector(".to-img");
50+
[fromCurr.value, toCurr.value] = [toCurr.value, fromCurr.value];
51+
let newFromImg = `https://flagsapi.com/${
52+
countryList[fromCurr.value]
53+
}/flat/64.png`;
54+
let newToImg = `https://flagsapi.com/${
55+
countryList[toCurr.value]
56+
}/flat/64.png`;
57+
fromImg.src = newFromImg;
58+
toImg.src = newToImg;
59+
convert();
60+
updateSymbol();
61+
});
62+
63+
const updateFlag = (element) => {
64+
let currCode = element.value;
65+
console.log(currCode);
66+
let countryCode = countryList[currCode];
67+
let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`;
68+
let img = element.parentElement.querySelector("img");
69+
img.src = newSrc;
70+
updateSymbol();
71+
};
72+
btn.addEventListener("click", () => {
73+
if (true) {
74+
convert();
75+
}
76+
});
77+
const convert = async () => {
78+
let amount = document.querySelector(".get-info input");
79+
let amtVal = amount.value;
80+
if (amtVal === "" || amtVal < 1) {
81+
amtVal = 1;
82+
amount.value = 1;
83+
}
84+
//fetching value
85+
let finalFrom = fromCurr.value.toLowerCase();
86+
let finalTo = toCurr.value.toLowerCase();
87+
88+
const URL = `${baseUrl}/${finalFrom}.json`;
89+
let response = await fetch(URL);
90+
let data = await response.json();
91+
let rate = data[finalFrom];
92+
let finalRate = rate[finalTo].toFixed(3);
93+
let finalAmount = (amount.value * finalRate).toFixed(3);
94+
resultDiv.innerText = `${amount.value} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
95+
updateMsg(finalRate);
96+
};
97+
98+
const updateMsg = (finalRate) => {
99+
msg.innerText = `1 ${fromCurr.value} = ${finalRate} ${toCurr.value}`;
100+
msg.style.visibility = "visible";
101+
};
102+
convert();

Currency calculator/code.js

Lines changed: 161 additions & 0 deletions
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+
};

0 commit comments

Comments
 (0)