Skip to content

Commit d0fea13

Browse files
Merge pull request #453 from SMD-1/main
add currency convertor
2 parents b5b404c + 14eed12 commit d0fea13

File tree

3 files changed

+323
-0
lines changed

3 files changed

+323
-0
lines changed

currecyConvertor/app.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const currency_one = document.getElementById("currency-one");
2+
const currency_two = document.getElementById("currency-two");
3+
const amount_one = document.getElementById("amount-one");
4+
const amount_two = document.getElementById("amount-two");
5+
const rateElement = document.getElementById("rate");
6+
7+
const swap = document.getElementById("swap");
8+
function calculate() {
9+
const currencyOne = currency_one.value;
10+
const currencyTwo = currency_two.value;
11+
12+
fetch(
13+
`https://v6.exchangerate-api.com/v6/f71c99390322cc94f29358e6/latest/${currencyOne}`
14+
)
15+
.then((res) => res.json())
16+
.then((data) => {
17+
const rate = data.conversion_rates[currencyTwo];
18+
console.log(rate);
19+
rateElement.innerHTML = `1 ${currencyOne} = ${rate} ${currencyTwo} `;
20+
amount_two.value = (amount_one.value * rate).toFixed(3);
21+
});
22+
}
23+
24+
// Event Listener
25+
currency_one.addEventListener("change", calculate);
26+
amount_one.addEventListener("input", calculate);
27+
28+
currency_two.addEventListener("change", calculate);
29+
amount_two.addEventListener("input", calculate);
30+
31+
swap.addEventListener("click", () => {
32+
const temp = currency_one.value;
33+
currency_one.value = currency_two.value;
34+
currency_two.value = temp;
35+
calculate();
36+
});
37+
38+
calculate();

currecyConvertor/index.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
11+
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
12+
crossorigin="anonymous"
13+
/>
14+
<title>Currency-Exchange</title>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<nav class="navBar">
19+
<div class="headerRight"><i class="fas fa-hand-holding-usd"></i></div>
20+
<div class="headerLeft">
21+
<ul>
22+
<li><a href="#"> Home </a></li>
23+
<li><a href="#"> About </a></li>
24+
<li>
25+
<a href="#">
26+
<i
27+
class="fab fa-github-square"
28+
style="
29+
display: flex;
30+
align-items: center;
31+
width: 100%;
32+
height: 100%;
33+
"
34+
></i>
35+
</a>
36+
</li>
37+
</ul>
38+
</div>
39+
</nav>
40+
41+
<div class="hero"></div>
42+
<div class="currencies">
43+
<div class="currency">
44+
<select id="currency-one">
45+
<option value="AED">AED</option>
46+
<option value="ARS">ARS</option>
47+
<option value="AUD">AUD</option>
48+
<option value="BGN">BGN</option>
49+
<option value="BRL">BRL</option>
50+
<option value="BSD">BSD</option>
51+
<option value="CAD">CAD</option>
52+
<option value="CHF">CHF</option>
53+
<option value="CLP">CLP</option>
54+
<option value="CNY">CNY</option>
55+
<option value="COP">COP</option>
56+
<option value="CZK">CZK</option>
57+
<option value="DKK">DKK</option>
58+
<option value="DOP">DOP</option>
59+
<option value="EGP">EGP</option>
60+
<option value="EUR">EUR</option>
61+
<option value="FJD">FJD</option>
62+
<option value="GBP">GBP</option>
63+
<option value="GTQ">GTQ</option>
64+
<option value="HKD">HKD</option>
65+
<option value="HRK">HRK</option>
66+
<option value="HUF">HUF</option>
67+
<option value="IDR">IDR</option>
68+
<option value="ILS">ILS</option>
69+
<option value="INR">INR</option>
70+
<option value="ISK">ISK</option>
71+
<option value="JPY">JPY</option>
72+
<option value="KRW">KRW</option>
73+
<option value="KZT">KZT</option>
74+
<option value="MXN">MXN</option>
75+
<option value="MYR">MYR</option>
76+
<option value="NOK">NOK</option>
77+
<option value="NZD">NZD</option>
78+
<option value="PAB">PAB</option>
79+
<option value="PEN">PEN</option>
80+
<option value="PHP">PHP</option>
81+
<option value="PKR">PKR</option>
82+
<option value="PLN">PLN</option>
83+
<option value="PYG">PYG</option>
84+
<option value="RON">RON</option>
85+
<option value="RUB">RUB</option>
86+
<option value="SAR">SAR</option>
87+
<option value="SEK">SEK</option>
88+
<option value="SGD">SGD</option>
89+
<option value="THB">THB</option>
90+
<option value="TRY">TRY</option>
91+
<option value="TWD">TWD</option>
92+
<option value="UAH">UAH</option>
93+
<option value="USD" selected>USD</option>
94+
<option value="UYU">UYU</option>
95+
<option value="VND">VND</option>
96+
<option value="ZAR">ZAR</option>
97+
</select>
98+
<input type="number" value="1" id="amount-one" />
99+
</div>
100+
<div class="swap" id="swap"><i class="fas fa-exchange-alt"></i></div>
101+
<div class="currency">
102+
<select id="currency-two">
103+
<option value="AED">AED</option>
104+
<option value="ARS">ARS</option>
105+
<option value="AUD">AUD</option>
106+
<option value="BGN">BGN</option>
107+
<option value="BRL">BRL</option>
108+
<option value="BSD">BSD</option>
109+
<option value="CAD">CAD</option>
110+
<option value="CHF">CHF</option>
111+
<option value="CLP">CLP</option>
112+
<option value="CNY">CNY</option>
113+
<option value="COP">COP</option>
114+
<option value="CZK">CZK</option>
115+
<option value="DKK">DKK</option>
116+
<option value="DOP">DOP</option>
117+
<option value="EGP">EGP</option>
118+
<option value="EUR">EUR</option>
119+
<option value="FJD">FJD</option>
120+
<option value="GBP">GBP</option>
121+
<option value="GTQ">GTQ</option>
122+
<option value="HKD">HKD</option>
123+
<option value="HRK">HRK</option>
124+
<option value="HUF">HUF</option>
125+
<option value="IDR">IDR</option>
126+
<option value="ILS">ILS</option>
127+
<option value="INR" selected>INR</option>
128+
<option value="ISK">ISK</option>
129+
<option value="JPY">JPY</option>
130+
<option value="KRW">KRW</option>
131+
<option value="KZT">KZT</option>
132+
<option value="MXN">MXN</option>
133+
<option value="MYR">MYR</option>
134+
<option value="NOK">NOK</option>
135+
<option value="NZD">NZD</option>
136+
<option value="PAB">PAB</option>
137+
<option value="PEN">PEN</option>
138+
<option value="PHP">PHP</option>
139+
<option value="PKR">PKR</option>
140+
<option value="PLN">PLN</option>
141+
<option value="PYG">PYG</option>
142+
<option value="RON">RON</option>
143+
<option value="RUB">RUB</option>
144+
<option value="SAR">SAR</option>
145+
<option value="SEK">SEK</option>
146+
<option value="SGD">SGD</option>
147+
<option value="THB">THB</option>
148+
<option value="TRY">TRY</option>
149+
<option value="TWD">TWD</option>
150+
<option value="UAH">UAH</option>
151+
<option value="USD">USD</option>
152+
<option value="UYU">UYU</option>
153+
<option value="VND">VND</option>
154+
<option value="ZAR">ZAR</option>
155+
</select>
156+
<input type="number" id="amount-two" value="0" />
157+
</div>
158+
<p class="rate" id="rate"></p>
159+
</div>
160+
</div>
161+
162+
<script src="app.js"></script>
163+
</body>
164+
</html>

currecyConvertor/style.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
.container {
8+
height: 100vh;
9+
font-family: "Roboto", sans-serif;
10+
}
11+
.navBar {
12+
width: 100%;
13+
height: 60px;
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
padding: 1rem 3rem;
18+
background: #002366;
19+
color: #ffac64;
20+
}
21+
ul {
22+
list-style: none;
23+
display: flex;
24+
padding: 0;
25+
margin: 0;
26+
}
27+
li {
28+
display: flex;
29+
align-items: center;
30+
padding: 5px 10px;
31+
margin: 1rem;
32+
border-radius: 5px;
33+
outline: none;
34+
cursor: pointer;
35+
}
36+
li a {
37+
text-decoration: none;
38+
color: #fff7ee;
39+
font-size: 1.2rem;
40+
}
41+
.headerRight {
42+
font-size: 2.5rem;
43+
align-items: center;
44+
display: flex;
45+
}
46+
.hero {
47+
position: relative;
48+
height: calc(50% - 60px);
49+
background: #002366;
50+
}
51+
.currencies {
52+
width: 50%;
53+
height: 250px;
54+
margin: 0 auto;
55+
transform: translateY(-100px);
56+
background: #ff9f1e;
57+
border-radius: 10px;
58+
display: flex;
59+
flex-direction: column;
60+
justify-content: center;
61+
align-items: center;
62+
}
63+
64+
@media (max-width: 700px) {
65+
html {
66+
font-size: 70%;
67+
}
68+
.swap i {
69+
font-size: 1.4rem;
70+
}
71+
.currencies {
72+
width: 80%;
73+
}
74+
}
75+
.currency {
76+
display: flex;
77+
justify-content: center;
78+
height: 40px;
79+
width: 100%;
80+
margin: 10px auto;
81+
padding: 0 10px;
82+
}
83+
.currency input {
84+
width: 65px;
85+
margin-left: 10px;
86+
border-radius: 5px;
87+
border: none;
88+
padding: 3px;
89+
}
90+
select {
91+
width: 50%;
92+
border-radius: 0.5rem;
93+
outline: none;
94+
font-size: 1.2rem;
95+
padding: 5px 10px;
96+
border: 1px solid #000;
97+
}
98+
.swap {
99+
width: 50px;
100+
height: 50px;
101+
transform: rotate(90deg);
102+
padding: 10px;
103+
border-radius: 50%;
104+
border: 3px solid #fff;
105+
cursor: pointer;
106+
display: flex;
107+
align-items: center;
108+
justify-content: center;
109+
}
110+
.swap i {
111+
color: #002366;
112+
font-size: 1.4rem;
113+
}
114+
i.fa-github-square {
115+
font-size: 1.5rem;
116+
width: 30px;
117+
height: 30px;
118+
}
119+
.rate {
120+
font-size: 1.5rem;
121+
}

0 commit comments

Comments
 (0)