Skip to content

Commit fbe2d04

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1740 from amansgith/ssocpr
added Live currency converter Project with responsive design
2 parents eb9d70f + be76f23 commit fbe2d04

7 files changed

Lines changed: 299 additions & 0 deletions

File tree

‎Projects/Live Currency Converter/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
# Realtime Currency Converted💲💵
3+
4+
# What is it?
5+
As the name suggest this small program will help you get currency rates of different countries and help you convert them into the currency of your choice.
6+
7+
## Tech Stack used
8+
- HTML
9+
- CSS
10+
- Javascript and
11+
- Basics of API.
12+
13+
## Features
14+
- Get the unit currency rates from one currency to another.
15+
- Convert any amount to desired currency.
16+
17+
## Demo images of the project
18+
![Project demo 1](images/image.png)
19+
---
20+
![Project demo 2](images/image2.png)
21+
---
22+
![Project demo 3](images/image3.png)
23+
---
24+
25+
## How to run it locally?
26+
- Fork the repository.
27+
- Clone the repository by using the command:-
28+
---
29+
git clone [github url of the repository]
30+
31+
- go to the directory of the project using command:-
32+
---
33+
cd [path of the project folder]
34+
35+
- Open the index.html file in any browser and see it running :)
36+
37+
### Thank you :)
38+
39+
40+

‎Projects/Live Currency Converter/images/image.png‎

87.8 KB
Loading

‎Projects/Live Currency Converter/images/image2.png‎

89.6 KB
Loading

‎Projects/Live Currency Converter/images/image3.png‎

93.6 KB
Loading

‎Projects/Live Currency Converter/index.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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+
<title>Currency Converter</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<h1>Realtime Currency Converter</h1>
12+
<div class="container">
13+
<!-- unit rate converted and printed -->
14+
<div class="rate" id="rate"></div>
15+
<div class="currency">
16+
<input type="number" id="amount-one" value="1" placeholder="0">
17+
<!-- first drop down for currency -->
18+
<select id="currency-one">
19+
<option value="AED">United Arab Emirates Dirham</option>
20+
<option value="ARS">Argentine Peso</option>
21+
<option value="AUD">Australian Dollar</option>
22+
<option value="BGN">Bulgarian Lev</option>
23+
<option value="BRL">Brazilian Real</option>
24+
<option value="BSD">Bahamian Dollar</option>
25+
<option value="CAD">Canadian Dollar</option>
26+
<option value="CHF">Swiss Franc</option>
27+
<option value="CLP">Chilean Peso</option>
28+
<option value="CNY">Yuan Renminbi</option>
29+
<option value="COP">Colombian Peso</option>
30+
<option value="CZK">Czech Koruna</option>
31+
<option value="DKK">Danish Krone</option>
32+
<option value="DOP">Dominican Peso</option>
33+
<option value="EGP">Egyptian Pound</option>
34+
<option value="EUR">Euro</option>
35+
<option value="FJD">Fiji Dollar</option>
36+
<option value="GBP">Pound Sterling</option>
37+
<option value="GTQ">Quetzal</option>
38+
<option value="HKD">Hong Kong Dollar</option>
39+
<option value="HRK">Croatian Kuna</option>
40+
<option value="HUF">Hungarian Forint</option>
41+
<option value="IDR">Indonesian Rupiah</option>
42+
<option value="ILS">Israeli New Shekel</option>
43+
<option value="INR">Indian Rupee</option>
44+
<option value="ISK">Icelandic Króna</option>
45+
<option value="JPY">Japanese Yen</option>
46+
<!-- default value selected -->
47+
<option value="USD" selected>US Dollar</option>
48+
<option value="UYU">Uruguayan Peso</option>
49+
<option value="VND">Vietnamese dong</option>
50+
<option value="ZAR">South African Rand</option>
51+
</select>
52+
</div>
53+
54+
<br>
55+
<div class="currency">
56+
<input type="number" id="amount-two" placeholder="0">
57+
<select id="currency-two">
58+
<!-- first drop down for currency -->
59+
<option value="AED">United Arab Emirates Dirham</option>
60+
<option value="ARS">Argentine Peso</option>
61+
<option value="AUD">Australian Dollar</option>
62+
<option value="BGN">Bulgarian Lev</option>
63+
<option value="BRL">Brazilian Real</option>
64+
<option value="BSD">Bahamian Dollar</option>
65+
<option value="CAD">Canadian Dollar</option>
66+
<option value="CHF">Swiss Franc</option>
67+
<option value="CLP">Chilean Peso</option>
68+
<option value="CNY">Yuan Renminbi</option>
69+
<option value="COP">Colombian Peso</option>
70+
<option value="CZK">Czech Koruna</option>
71+
<option value="DKK">Danish Krone</option>
72+
<option value="DOP">Dominican Peso</option>
73+
<option value="EGP">Egyptian Pound</option>
74+
<option value="EUR">Euro</option>
75+
<option value="FJD">Fiji Dollar</option>
76+
<option value="GBP">Pound Sterling</option>
77+
<option value="GTQ">Quetzal</option>
78+
<option value="HKD">Hong Kong Dollar</option>
79+
<option value="HRK">Croatian Kuna</option>
80+
<option value="HUF">Hungarian Forint</option>
81+
<option value="IDR">Indonesian Rupiah</option>
82+
<option value="ILS">Israeli New Shekel</option>
83+
<!-- default value selected -->
84+
<option value="INR" selected>Indian Rupee</option>
85+
<option value="ISK">Icelandic Króna</option>
86+
<option value="JPY">Japanese Yen</option>
87+
<option value="USD">US Dollar</option>
88+
<option value="UYU">Uruguayan Peso</option>
89+
<option value="VND">Vietnamese dong</option>
90+
<option value="ZAR">South African Rand</option>
91+
</select>
92+
</div>
93+
</div>
94+
<script src="index.js"></script>
95+
</body>
96+
</html>

‎Projects/Live Currency Converter/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const currencyElement_one = document.getElementById('currency-one'); //selecting the first currency drop down
2+
const currencyElement_two = document.getElementById('currency-two'); //selecting the second currency drop down
3+
const amountElement_one = document.getElementById('amount-one'); //selecting the first input blank
4+
const amountElement_two = document.getElementById('amount-two'); //selecting the second input blank
5+
6+
const rateElement = document.getElementById('rate'); //getting the rate stored in rateElement variable
7+
8+
// Adding the api link
9+
10+
function calculate(){
11+
const currency_one = currencyElement_one.value;
12+
const currency_two = currencyElement_two.value;
13+
14+
fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`) //fetching the rates from the api
15+
.then(res => res.json())
16+
.then(data => {
17+
const rate = data.rates[currency_two];
18+
rateElement.innerText = `1 ${currency_one} equals ${rate} ${currency_two}`; //printing the unit rate
19+
amountElement_two.value = (amountElement_one.value * rate).toFixed(2);
20+
});
21+
}
22+
23+
// Added event listener
24+
// to automatically invoke the calculate function whenever new value is input
25+
currencyElement_one.addEventListener('change', calculate);
26+
currencyElement_two.addEventListener('change', calculate);
27+
amountElement_one.addEventListener('input', calculate);
28+
amountElement_two.addEventListener('input', calculate);
29+
30+
31+
calculate();

‎Projects/Live Currency Converter/styles.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
body{
5+
background: linear-gradient(360deg, #37045b, #9b15fa) no-repeat;
6+
font-family: Arial, Helvetica, sans-serif;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
height: 100vh;
12+
margin: 0;
13+
padding: 20px;
14+
}
15+
16+
h1{
17+
color: #EDF5E0;
18+
text-align: center;
19+
font-size: 2rem;
20+
padding-bottom: 40px;
21+
}
22+
23+
24+
25+
.container{
26+
background-color: #EDF5E0;
27+
padding: 8px 40px;
28+
border-radius: 10px;
29+
box-shadow: 0px 0px 5px 5px rgba(0,0,0,.75);
30+
}
31+
32+
.btn {
33+
color: #fff;
34+
background: #9f7dee;
35+
cursor: pointer;
36+
border-radius: 5px;
37+
font-size: 15px;
38+
padding: 5px 15px;
39+
}
40+
41+
.currency {
42+
padding: 40px 0;
43+
display: flex;
44+
align-items: center;
45+
justify-content: space-between;
46+
}
47+
48+
.currency select{
49+
padding: 10px 20px 10px 10px;
50+
appearance: none;
51+
border: 1px solid #3c3131;
52+
font-size: 16px;
53+
background: transparent;
54+
border-radius: 8px;
55+
}
56+
57+
.currency input {
58+
border: 0;
59+
background: transparent;
60+
font-size: 30px;
61+
text-align: left;
62+
}
63+
64+
.swap-rate-container{
65+
display: flex;
66+
align-items: center;
67+
justify-content: space-between;
68+
}
69+
70+
.rate {
71+
color: #1f066c;
72+
font-size: 1.3rem;
73+
padding-top: 20px;
74+
text-align: center;
75+
}
76+
77+
select:focus,
78+
input:focus,
79+
button:focus {
80+
outline: 0;
81+
}
82+
83+
input::-webkit-inner-spin-button,
84+
input::-webkit-outer-spin-button {
85+
appearance: none;
86+
}
87+
88+
/* Responsive Styles */
89+
@media screen and (max-width: 768px) {
90+
body{
91+
width: 100%;
92+
height: 100%;
93+
padding-bottom: 100%;
94+
overflow: hidden;
95+
}
96+
97+
.container{
98+
align-items: center;
99+
width: 80%;
100+
padding: 20px;
101+
}
102+
103+
h1 {
104+
font-size: 1.5rem;
105+
padding: 20px;
106+
}
107+
108+
.currency {
109+
flex-direction: column;
110+
padding: 20px 0;
111+
align-items: center;
112+
}
113+
114+
.currency input {
115+
padding-bottom: 8%;
116+
width: 30%;
117+
font-size: 20px;
118+
align-items: center;
119+
}
120+
121+
.currency-one{
122+
margin: 3px;
123+
display: flex;
124+
flex-wrap: wrap;
125+
}
126+
127+
.rate {
128+
font-size: 1rem;
129+
padding-top: 10px;
130+
}
131+
132+
}

0 commit comments

Comments
 (0)