Skip to content

Commit c848c9c

Browse files
solygambassolygambas
committed
add exchange rate calculator
1 parent 935cd9b commit c848c9c

File tree

4 files changed

+283
-0
lines changed

4 files changed

+283
-0
lines changed

Diff for: ‎62-exchange rate calculator/index.html

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Exchange Rate Calculator</title>
8+
</head>
9+
<body>
10+
<div class="wrapper">
11+
<img
12+
src="https://image.flaticon.com/icons/svg/3915/3915722.svg"
13+
alt="Exchange Rate Calculator"
14+
class="money-img"
15+
/>
16+
<h1>Exchange Rate Calculator</h1>
17+
<p>Choose the currency and the amount to get the exchange rate</p>
18+
<div class="container">
19+
<div class="currency">
20+
<select id="currency-one">
21+
<option value="AED">AED</option>
22+
<option value="ARS">ARS</option>
23+
<option value="AUD">AUD</option>
24+
<option value="BGN">BGN</option>
25+
<option value="BRL">BRL</option>
26+
<option value="BSD">BSD</option>
27+
<option value="CAD">CAD</option>
28+
<option value="CHF">CHF</option>
29+
<option value="CLP">CLP</option>
30+
<option value="CNY">CNY</option>
31+
<option value="COP">COP</option>
32+
<option value="CZK">CZK</option>
33+
<option value="DKK">DKK</option>
34+
<option value="DOP">DOP</option>
35+
<option value="EGP">EGP</option>
36+
<option value="EUR">EUR</option>
37+
<option value="FJD">FJD</option>
38+
<option value="GBP">GBP</option>
39+
<option value="GTQ">GTQ</option>
40+
<option value="HKD">HKD</option>
41+
<option value="HRK">HRK</option>
42+
<option value="HUF">HUF</option>
43+
<option value="IDR">IDR</option>
44+
<option value="ILS">ILS</option>
45+
<option value="INR">INR</option>
46+
<option value="ISK">ISK</option>
47+
<option value="JPY">JPY</option>
48+
<option value="KRW">KRW</option>
49+
<option value="KZT">KZT</option>
50+
<option value="MXN">MXN</option>
51+
<option value="MYR">MYR</option>
52+
<option value="NOK">NOK</option>
53+
<option value="NZD">NZD</option>
54+
<option value="PAB">PAB</option>
55+
<option value="PEN">PEN</option>
56+
<option value="PHP">PHP</option>
57+
<option value="PKR">PKR</option>
58+
<option value="PLN">PLN</option>
59+
<option value="PYG">PYG</option>
60+
<option value="RON">RON</option>
61+
<option value="RUB">RUB</option>
62+
<option value="SAR">SAR</option>
63+
<option value="SEK">SEK</option>
64+
<option value="SGD">SGD</option>
65+
<option value="THB">THB</option>
66+
<option value="TRY">TRY</option>
67+
<option value="TWD">TWD</option>
68+
<option value="UAH">UAH</option>
69+
<option value="USD" selected>USD</option>
70+
<option value="UYU">UYU</option>
71+
<option value="VND">VND</option>
72+
<option value="ZAR">ZAR</option>
73+
</select>
74+
<input type="number" id="amount-one" placeholder="0" value="1" />
75+
</div>
76+
77+
<div class="swap-rate-container">
78+
<button class="btn" id="swap">Swap</button>
79+
<div class="rate" id="rate"></div>
80+
</div>
81+
82+
<div class="currency">
83+
<select id="currency-two">
84+
<option value="AED">AED</option>
85+
<option value="ARS">ARS</option>
86+
<option value="AUD">AUD</option>
87+
<option value="BGN">BGN</option>
88+
<option value="BRL">BRL</option>
89+
<option value="BSD">BSD</option>
90+
<option value="CAD">CAD</option>
91+
<option value="CHF">CHF</option>
92+
<option value="CLP">CLP</option>
93+
<option value="CNY">CNY</option>
94+
<option value="COP">COP</option>
95+
<option value="CZK">CZK</option>
96+
<option value="DKK">DKK</option>
97+
<option value="DOP">DOP</option>
98+
<option value="EGP">EGP</option>
99+
<option value="EUR" selected>EUR</option>
100+
<option value="FJD">FJD</option>
101+
<option value="GBP">GBP</option>
102+
<option value="GTQ">GTQ</option>
103+
<option value="HKD">HKD</option>
104+
<option value="HRK">HRK</option>
105+
<option value="HUF">HUF</option>
106+
<option value="IDR">IDR</option>
107+
<option value="ILS">ILS</option>
108+
<option value="INR">INR</option>
109+
<option value="ISK">ISK</option>
110+
<option value="JPY">JPY</option>
111+
<option value="KRW">KRW</option>
112+
<option value="KZT">KZT</option>
113+
<option value="MXN">MXN</option>
114+
<option value="MYR">MYR</option>
115+
<option value="NOK">NOK</option>
116+
<option value="NZD">NZD</option>
117+
<option value="PAB">PAB</option>
118+
<option value="PEN">PEN</option>
119+
<option value="PHP">PHP</option>
120+
<option value="PKR">PKR</option>
121+
<option value="PLN">PLN</option>
122+
<option value="PYG">PYG</option>
123+
<option value="RON">RON</option>
124+
<option value="RUB">RUB</option>
125+
<option value="SAR">SAR</option>
126+
<option value="SEK">SEK</option>
127+
<option value="SGD">SGD</option>
128+
<option value="THB">THB</option>
129+
<option value="TRY">TRY</option>
130+
<option value="TWD">TWD</option>
131+
<option value="UAH">UAH</option>
132+
<option value="USD">USD</option>
133+
<option value="UYU">UYU</option>
134+
<option value="VND">VND</option>
135+
<option value="ZAR">ZAR</option>
136+
</select>
137+
<input type="number" id="amount-two" placeholder="0" />
138+
</div>
139+
</div>
140+
</div>
141+
<script src="script.js"></script>
142+
</body>
143+
</html>

Diff for: ‎62-exchange rate calculator/script.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const currencyOne = document.getElementById("currency-one");
2+
const amountOne = document.getElementById("amount-one");
3+
const currencyTwo = document.getElementById("currency-two");
4+
const amountTwo = document.getElementById("amount-two");
5+
const rate = document.getElementById("rate");
6+
const swap = document.getElementById("swap");
7+
8+
function calculate() {
9+
const currency_one = currencyOne.value;
10+
const currency_two = currencyTwo.value;
11+
fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
12+
.then((res) => res.json())
13+
.then((data) => {
14+
const currentRate = data.rates[currency_two];
15+
rate.innerText = `1 ${currency_one} = ${currentRate} ${currency_two}`;
16+
amountTwo.value = (amountOne.value * currentRate).toFixed(2);
17+
});
18+
}
19+
20+
currencyOne.addEventListener("change", calculate);
21+
amountOne.addEventListener("input", calculate);
22+
currencyTwo.addEventListener("change", calculate);
23+
amountTwo.addEventListener("input", calculate);
24+
25+
swap.addEventListener("click", () => {
26+
const storedValue = currencyOne.value;
27+
currencyOne.value = currencyTwo.value;
28+
currencyTwo.value = storedValue;
29+
calculate();
30+
});
31+
32+
calculate();

Diff for: ‎62-exchange rate calculator/style.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
:root {
4+
--primary-color: #fd5900;
5+
}
6+
7+
* {
8+
box-sizing: border-box;
9+
}
10+
11+
body {
12+
background-color: #070606;
13+
font-family: "Roboto", sans-serif;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
height: 100vh;
19+
overflow: hidden;
20+
margin: 0;
21+
padding: 20px;
22+
}
23+
24+
.wrapper {
25+
background-color: #f4efea;
26+
padding: 2rem;
27+
border-radius: 10px;
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
}
33+
34+
h1 {
35+
color: var(--primary-color);
36+
}
37+
38+
p {
39+
text-align: center;
40+
}
41+
42+
.btn {
43+
color: #fff;
44+
background-color: var(--primary-color);
45+
cursor: pointer;
46+
border-radius: 5px;
47+
font-size: 12px;
48+
padding: 5px 12px;
49+
border: none;
50+
}
51+
52+
.money-img {
53+
width: 150px;
54+
margin: auto 0;
55+
}
56+
57+
.currency {
58+
padding: 40px 0;
59+
display: flex;
60+
align-items: center;
61+
justify-content: space-between;
62+
}
63+
64+
.currency select {
65+
padding: 10px 20px 10px 10px;
66+
-moz-appearance: none;
67+
-webkit-appearance: none;
68+
appearance: none;
69+
border: 1px solid #dedede;
70+
font-size: 16px;
71+
background: transparent;
72+
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
73+
background-position: right 10px top 50%, 0, 0;
74+
background-size: 12px auto, 100%;
75+
background-repeat: no-repeat;
76+
}
77+
78+
.currency input {
79+
border: 0;
80+
background: transparent;
81+
font-size: 30px;
82+
text-align: right;
83+
}
84+
85+
.swap-rate-container {
86+
display: flex;
87+
align-items: center;
88+
justify-content: space-between;
89+
}
90+
91+
.rate {
92+
color: var(--primary-color);
93+
font-size: 14px;
94+
padding: 0 10px;
95+
}
96+
97+
select:focus,
98+
input:focus,
99+
button:focus {
100+
outline: 0;
101+
}
102+
103+
@media (max-width: 600px) {
104+
.currency input {
105+
width: 200px;
106+
}
107+
}

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
| 59 | [Form Validator](https://github.com/solygambas/html-css-fifty-projects/tree/master/59-form%20validator) | [Live Demo](https://codepen.io/solygambas/full/MWbPJjb) |
6868
| 60 | [Movie Seat Booking](https://github.com/solygambas/html-css-fifty-projects/tree/master/60-movie%20seat%20booking) | [Live Demo](https://codepen.io/solygambas/full/xxRQEOy) |
6969
| 61 | [Custom Video Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/61-custom%20video%20player) | [Live Demo](https://codepen.io/solygambas/full/mdOQadY) |
70+
| 62 | [Exchange Rate Calculator](https://github.com/solygambas/html-css-fifty-projects/tree/master/62-exchange%20rate%20calculator) | [Live Demo](https://codepen.io/solygambas/full/abBPJBG) |
7071

7172
Mainly based on 2 courses by Brad Traversy (2020):
7273

0 commit comments

Comments
 (0)