Skip to content

Commit 897a539

Browse files
TD-17TD-17
committed
Created exchange rate calculator
1 parent 8f1f442 commit 897a539

File tree

5 files changed

+261
-0
lines changed

5 files changed

+261
-0
lines changed

‎Exchange Rate Calculator/Image/money.png‎

65.8 KB
Loading

‎Exchange Rate Calculator/Readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#Exchange Rate Calculator
2+
##In this "Exchange Rate Calculator project, fetch API is used to make a Http request to a third party API to get some exchange rate and then put that into the DOM.

‎Exchange Rate Calculator/index.html‎

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

‎Exchange Rate Calculator/script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const curEl_one = document.getElementById('currency-one');
2+
const amtEl_one = document.getElementById('amount-one');
3+
const curEl_two = document.getElementById('currency-two');
4+
const amtEl_two = document.getElementById('amount-two');
5+
6+
const rateEl = document.getElementById('rate');
7+
const swap = document.getElementById('swap');
8+
9+
// Fetch exchange rates and update the DOM
10+
function calculate() {
11+
const currency_one = curEl_one.value;
12+
const currency_two = curEl_two.value;
13+
14+
fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
15+
.then(res => res.json())
16+
.then(data => {
17+
const rate = data.rates[currency_two];
18+
19+
rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
20+
21+
amtEl_two.value = (amtEl_one.value * rate).toFixed(2);
22+
});
23+
}
24+
25+
// Event listeners
26+
curEl_one.addEventListener('change', calculate);
27+
amtEl_one.addEventListener('input', calculate);
28+
curEl_two.addEventListener('change', calculate);
29+
amtEl_two.addEventListener('input', calculate);
30+
31+
swap.addEventListener('click', () =>{
32+
const temp = curEl_one.value;
33+
curEl_one.value=curEl_two.value
34+
curEl_two.value=temp;
35+
calculate();
36+
})
37+
38+
calculate();

‎Exchange Rate Calculator/style.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:root{
2+
--primary-color:#5fbaa7;
3+
}
4+
*{
5+
box-sizing: border-box;
6+
}
7+
body{
8+
background-color: #f4f4f4;
9+
font-family: Arial, Helvetica, sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
margin:0;
16+
padding: 20px;
17+
}
18+
h1{
19+
color: var(--primary-color);
20+
}
21+
p{
22+
text-align: center;
23+
}
24+
.btn{
25+
color: #fff;
26+
background: var(--primary-color);
27+
cursor: pointer;
28+
border-radius: 5px;
29+
font-size: 12px;
30+
padding: 5px 12px;
31+
}
32+
.btn:focus{
33+
outline: none;
34+
}
35+
.money-img{
36+
width: 150px;
37+
}
38+
.currency{
39+
padding: 40px 0;
40+
display: flex;
41+
align-items: center;
42+
justify-content: space-between;
43+
}
44+
.currency select{
45+
padding: 10px 20px 10px 10px;
46+
border: 1px solid #dedede;
47+
font-size: 16px;
48+
background: transparent;
49+
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');
50+
background-position: right 3px top 50%,0,0;
51+
background-size:12px auto, 100%;
52+
background-repeat: no-repeat;
53+
}
54+
.currency input{
55+
border: 0;
56+
background: transparent;
57+
font-size: 30px;
58+
text-align: right;
59+
}
60+
.swap-rate-container
61+
{
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
}
66+
.rate{
67+
color: var(--primary-color);
68+
font-size: 14px;
69+
padding: 0 10px;
70+
}
71+
select:focus,
72+
input:focus,
73+
button:focus{
74+
outline: 0;
75+
}
76+
77+
@media(max-width:600px) {
78+
.currency input{
79+
width: 200px;
80+
}
81+
}

0 commit comments

Comments
 (0)