Skip to content

Commit e2ea74e

Browse files
ot-codeot-code
authored
Add files via upload
0 parents  commit e2ea74e

File tree

7 files changed

+360
-0
lines changed

7 files changed

+360
-0
lines changed

‎api-key.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
//Paste your generated api Key here
2+
let apiKey = "a9565e2419bd39fc7d21da37";

‎app-icon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎arrow-down.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎currency-codes.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
currencies = [
2+
"AED",
3+
"AFN",
4+
"ALL",
5+
"AMD",
6+
"ANG",
7+
"AOA",
8+
"ARS",
9+
"AUD",
10+
"AWG",
11+
"AZN",
12+
"BAM",
13+
"BBD",
14+
"BDT",
15+
"BGN",
16+
"BHD",
17+
"BIF",
18+
"BMD",
19+
"BND",
20+
"BOB",
21+
"BRL",
22+
"BSD",
23+
"BTC",
24+
"BTN",
25+
"BWP",
26+
"BYN",
27+
"BZD",
28+
"CAD",
29+
"CDF",
30+
"CHF",
31+
"CLF",
32+
"CLP",
33+
"CNY",
34+
"COP",
35+
"CRC",
36+
"CUC",
37+
"CUP",
38+
"CVE",
39+
"CZK",
40+
"DJF",
41+
"DKK",
42+
"DOP",
43+
"DZD",
44+
"EGP",
45+
"ERN",
46+
"ETB",
47+
"EUR",
48+
"FJD",
49+
"FKP",
50+
"GBP",
51+
"GEL",
52+
"GGP",
53+
"GHS",
54+
"GIP",
55+
"GMD",
56+
"GNF",
57+
"GTQ",
58+
"GYD",
59+
"HKD",
60+
"HNL",
61+
"HRK",
62+
"HTG",
63+
"HUF",
64+
"IDR",
65+
"ILS",
66+
"IMP",
67+
"INR",
68+
"IQD",
69+
"IRR",
70+
"ISK",
71+
"JEP",
72+
"JMD",
73+
"JOD",
74+
"JPY",
75+
"KES",
76+
"KGS",
77+
"KHR",
78+
"KMF",
79+
"KPW",
80+
"KRW",
81+
"KWD",
82+
"KYD",
83+
"KZT",
84+
"LAK",
85+
"LBP",
86+
"LKR",
87+
"LRD",
88+
"LSL",
89+
"LYD",
90+
"MAD",
91+
"MDL",
92+
"MGA",
93+
"MKD",
94+
"MMK",
95+
"MNT",
96+
"MOP",
97+
"MRO",
98+
"MRU",
99+
"MUR",
100+
"MVR",
101+
"MWK",
102+
"MXN",
103+
"MYR",
104+
"MZN",
105+
"NAD",
106+
"NGN",
107+
"NIO",
108+
"NOK",
109+
"NPR",
110+
"NZD",
111+
"OMR",
112+
"PAB",
113+
"PEN",
114+
"PGK",
115+
"PHP",
116+
"PKR",
117+
"PLN",
118+
"PYG",
119+
"QAR",
120+
"RON",
121+
"RSD",
122+
"RUB",
123+
"RWF",
124+
"SAR",
125+
"SBD",
126+
"SCR",
127+
"SDG",
128+
"SEK",
129+
"SGD",
130+
"SHP",
131+
"SLL",
132+
"SOS",
133+
"SRD",
134+
"SSP",
135+
"STD",
136+
"STN",
137+
"SVC",
138+
"SYP",
139+
"SZL",
140+
"THB",
141+
"TJS",
142+
"TMT",
143+
"TND",
144+
"TOP",
145+
"TRY",
146+
"TTD",
147+
"TWD",
148+
"TZS",
149+
"UAH",
150+
"UGX",
151+
"USD",
152+
"UYU",
153+
"UZS",
154+
"VEF",
155+
"VES",
156+
"VND",
157+
"VUV",
158+
"WST",
159+
"XAF",
160+
"XAG",
161+
"XAU",
162+
"XCD",
163+
"XDR",
164+
"XOF",
165+
"XPD",
166+
"XPF",
167+
"XPT",
168+
"YER",
169+
"ZAR",
170+
"ZMW",
171+
"ZWL",
172+
];

‎index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Conversor de divisas</title>
6+
<!-- Google Fonts -->
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<!-- Stylesheet-->
12+
<link rel="stylesheet" href="style.css" />
13+
</head>
14+
<body>
15+
<div class="wrapper">
16+
<div class="app-details">
17+
<img src="app-icon.svg" class="app-icon" />
18+
<h1 class="app-title">Conversor de divisas</h1>
19+
</div>
20+
<label for="amount">Cantidad:</label>
21+
<input type="number" id="amount" value="100" />
22+
<div class="dropdowns">
23+
<select id="from-currency-select"></select>
24+
<select id="to-currency-select"></select>
25+
</div>
26+
<button id="convert-button">Convertir</button>
27+
<p id="result"></p>
28+
</div>
29+
30+
<!-- Scipt With Array Of Supported Country Codes -->
31+
<script src="currency-codes.js"></script>
32+
<!-- Script with API Key -->
33+
<script src="api-key.js"></script>
34+
<!-- Script -->
35+
<script src="script.js"></script>
36+
</body>
37+
</html>

‎script.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
let api = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`;
2+
const fromDropDown = document.getElementById("from-currency-select");
3+
const toDropDown = document.getElementById("to-currency-select");
4+
5+
//Creacion de desplegable a partir de la matriz de divisas
6+
currencies.forEach((currency) => {
7+
const option = document.createElement("option");
8+
option.value = currency;
9+
option.text = currency;
10+
fromDropDown.add(option);
11+
});
12+
13+
//Repeticion para el otro desplegable
14+
currencies.forEach((currency) => {
15+
const option = document.createElement("option");
16+
option.value = currency;
17+
option.text = currency;
18+
toDropDown.add(option);
19+
});
20+
21+
//Establecimiento de valores automaticos
22+
fromDropDown.value = "MXN";
23+
toDropDown.value = "USD";
24+
25+
let convertCurrency = () => {
26+
//Crear referencias
27+
const amount = document.querySelector("#amount").value;
28+
const fromCurrency = fromDropDown.value;
29+
const toCurrency = toDropDown.value;
30+
31+
//Si el campo de entrada del importe no esta vacio
32+
if (amount.length != 0) {
33+
fetch(api)
34+
.then((resp) => resp.json())
35+
.then((data) => {
36+
let fromExchangeRate = data.conversion_rates[fromCurrency];
37+
let toExchangeRate = data.conversion_rates[toCurrency];
38+
const convertedAmount = (amount / fromExchangeRate) * toExchangeRate;
39+
result.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(
40+
2
41+
)} ${toCurrency}`;
42+
});
43+
} else {
44+
alert("Please fill in the amount");
45+
}
46+
};
47+
48+
document
49+
.querySelector("#convert-button")
50+
.addEventListener("click", convertCurrency);
51+
window.addEventListener("load", convertCurrency);

‎style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
6+
border: none;
7+
outline: none;
8+
}
9+
body {
10+
background-color: #313638;
11+
}
12+
.wrapper {
13+
width: 90%;
14+
max-width: 25em;
15+
background-color: #ffffff;
16+
position: absolute;
17+
transform: translate(-50%, -50%);
18+
left: 50%;
19+
top: 50%;
20+
padding: 2em;
21+
border-radius: 0.8em;
22+
}
23+
.app-details {
24+
display: flex;
25+
align-items: center;
26+
flex-direction: column;
27+
}
28+
.app-icon {
29+
width: 9.37em;
30+
}
31+
.app-title {
32+
font-size: 1.6em;
33+
text-transform: uppercase;
34+
margin-bottom: 1em;
35+
}
36+
label {
37+
display: block;
38+
font-weight: 600;
39+
}
40+
input#amount {
41+
font-weight: 400;
42+
font-size: 1.2em;
43+
display: block;
44+
width: 100%;
45+
border-bottom: 2px solid #02002c;
46+
color: #7a789d;
47+
margin-bottom: 2em;
48+
padding: 0.5em;
49+
}
50+
input#amount:focus {
51+
color: #DB5375;
52+
border-color: #DB5375;
53+
}
54+
.dropdowns {
55+
display: flex;
56+
align-items: center;
57+
justify-content: space-between;
58+
gap: 1em;
59+
}
60+
select {
61+
width: 100%;
62+
padding: 0.6em;
63+
font-size: 1em;
64+
border-radius: 0.2em;
65+
appearance: none;
66+
-webkit-appearance: none;
67+
-moz-appearance: none;
68+
background-image: url("arrow-down.svg");
69+
background-repeat: no-repeat;
70+
background-position: right 15px top 50%, center;
71+
background-size: 20px 20px;
72+
background-color: #729EA1;
73+
color: #ffffff;
74+
}
75+
select option {
76+
background-color: #ffffff;
77+
color: #02002c;
78+
}
79+
button {
80+
font-size: 1em;
81+
width: 100%;
82+
background-color: #DB5375;
83+
padding: 1em 0;
84+
margin-top: 2em;
85+
border-radius: 0.3em;
86+
color: #ffffff;
87+
font-weight: 600;
88+
}
89+
#result {
90+
font-size: 1.2em;
91+
text-align: center;
92+
margin-top: 1em;
93+
color: #313638;
94+
background-color: #F9DB6D;
95+
padding: 0.8em 0;
96+
}

0 commit comments

Comments
 (0)