Skip to content

Commit b5a1014

Browse files
PratikdatePratikdate
committed
Currancy converter
1 parent b12e33b commit b5a1014

File tree

3 files changed

+322
-0
lines changed

3 files changed

+322
-0
lines changed

‎Currancy_con/index.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
body {
2+
background-color: aliceblue;
3+
background-position: center;
4+
background-size: cover;
5+
background-attachment: fixed;
6+
background-repeat: no-repeat;
7+
}
8+
9+
.heading {
10+
font-family: "Pacifico", cursive;
11+
margin: 35px auto 20px;
12+
}
13+
14+
hr {
15+
border-top: 2px solid black;
16+
width: 40%;
17+
margin-bottom: 55px;
18+
}
19+
20+
.main {
21+
width: 50vw;
22+
margin: auto;
23+
padding: 30px;
24+
border-radius: 5px;
25+
background-color: rgba(0, 0, 0, 0.5);
26+
color: white;
27+
}
28+
29+
label {
30+
font-size: 20px;
31+
}
32+
33+
.btn {
34+
width: 200px;
35+
}
36+
37+
#finalAmount {
38+
font-family: "Lobster", cursive;
39+
display: none;
40+
margin: 50px auto;
41+
}
42+
43+
#finalAmount h2 {
44+
font-size: 50px;
45+
}
46+
47+
.finalValue {
48+
font-family: "Amiri", serif;
49+
}
50+
51+
@media (max-width: 768px) {
52+
hr {
53+
width: 60%;
54+
}
55+
56+
.main {
57+
width: 100%;
58+
}
59+
}
60+
61+
@media (max-width: 400px) {
62+
.heading {
63+
font-size: 60px;
64+
}
65+
66+
hr {
67+
width: 75%;
68+
}
69+
70+
#finalAmount h2,
71+
.finalValue {
72+
font-size: 40px;
73+
}
74+
}

‎Currancy_con/index.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
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
9+
rel="stylesheet"
10+
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
11+
/>
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
14+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
15+
16+
<link rel="preconnect" href="https://fonts.gstatic.com" />
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Amiri&family=Lobster&family=Pacifico&display=swap"
19+
rel="stylesheet"
20+
/>
21+
<!-- linking style.css file-->
22+
<link rel="stylesheet" href="index.css" />
23+
</head>
24+
25+
<body>
26+
<!-- Currency Converter -->
27+
<h1 class="heading text-center display-2">Currency Converter</h1>
28+
<hr />
29+
<div class="container">
30+
<div class="main">
31+
<div class="form-group">
32+
<label for="oamount"> Amount to Convert : </label>
33+
<input
34+
type="text"
35+
class="form-control searchBox"
36+
placeholder="0.00"
37+
id="oamount"
38+
/>
39+
</div>
40+
<div class="row">
41+
<div class="col-sm-6">
42+
<div class="input-group mb-3">
43+
<div class="input-group-prepend">
44+
<span class="input-group-text">From</span>
45+
</div>
46+
<select class="form-control from" id="sel1">
47+
<option value="">Select One …</option>
48+
<option value="USD">USD</option>
49+
<option value="AED">AED</option>
50+
<option value="ARS">ARS</option>
51+
<option value="AUD">AUD</option>
52+
<option value="BGN">BGN</option>
53+
<option value="BRL">BRL</option>
54+
<option value="BSD">BSD</option>
55+
<option value="CAD">CAD</option>
56+
<option value="CHF">CHF</option>
57+
<option value="CLP">CLP</option>
58+
<option value="CNY">CNY</option>
59+
<option value="COP">COP</option>
60+
<option value="CZK">CZK</option>
61+
<option value="DKK">DKK</option>
62+
<option value="DOP">DOP</option>
63+
<option value="EGP">EGP</option>
64+
<option value="EUR">EUR</option>
65+
<option value="FJD">FJD</option>
66+
<option value="GBP">GBP</option>
67+
<option value="GTQ">GTQ</option>
68+
<option value="HKD">HKD</option>
69+
<option value="HRK">HRK</option>
70+
<option value="HUF">HUF</option>
71+
<option value="IDR">IDR</option>
72+
<option value="ILS">ILS</option>
73+
<option value="INR">INR</option>
74+
<option value="ISK">ISK</option>
75+
<option value="JPY">JPY</option>
76+
<option value="KRW">KRW</option>
77+
<option value="KZT">KZT</option>
78+
<option value="MVR">MVR</option>
79+
<option value="MXN">MXN</option>
80+
<option value="MYR">MYR</option>
81+
<option value="NOK">NOK</option>
82+
<option value="NZD">NZD</option>
83+
<option value="PAB">PAB</option>
84+
<option value="PEN">PEN</option>
85+
<option value="PHP">PHP</option>
86+
<option value="PKR">PKR</option>
87+
<option value="PLN">PLN</option>
88+
<option value="PYG">PYG</option>
89+
<option value="RON">RON</option>
90+
<option value="RUB">RUB</option>
91+
<option value="SAR">SAR</option>
92+
<option value="SEK">SEK</option>
93+
<option value="SGD">SGD</option>
94+
<option value="THB">THB</option>
95+
<option value="TRY">TRY</option>
96+
<option value="TWD">TWD</option>
97+
<option value="UAH">UAH</option>
98+
<option value="UYU">UYU</option>
99+
<option value="ZAR">ZAR</option>
100+
</select>
101+
</div>
102+
</div>
103+
104+
<div class="col-sm-6">
105+
<div class="input-group mb-3">
106+
<div class="input-group-prepend">
107+
<span class="input-group-text">To</span>
108+
</div>
109+
<select class="form-control to" id="sel2">
110+
<option value="">Select One …</option>
111+
<option value="USD">USD</option>
112+
<option value="AED">AED</option>
113+
<option value="ARS">ARS</option>
114+
<option value="AUD">AUD</option>
115+
<option value="BGN">BGN</option>
116+
<option value="BRL">BRL</option>
117+
<option value="BSD">BSD</option>
118+
<option value="CAD">CAD</option>
119+
<option value="CHF">CHF</option>
120+
<option value="CLP">CLP</option>
121+
<option value="CNY">CNY</option>
122+
<option value="COP">COP</option>
123+
<option value="CZK">CZK</option>
124+
<option value="DKK">DKK</option>
125+
<option value="DOP">DOP</option>
126+
<option value="EGP">EGP</option>
127+
<option value="EUR">EUR</option>
128+
<option value="FJD">FJD</option>
129+
<option value="GBP">GBP</option>
130+
<option value="GTQ">GTQ</option>
131+
<option value="HKD">HKD</option>
132+
<option value="HRK">HRK</option>
133+
<option value="HUF">HUF</option>
134+
<option value="IDR">IDR</option>
135+
<option value="ILS">ILS</option>
136+
<option value="INR">INR</option>
137+
<option value="ISK">ISK</option>
138+
<option value="JPY">JPY</option>
139+
<option value="KRW">KRW</option>
140+
<option value="KZT">KZT</option>
141+
<option value="MVR">MVR</option>
142+
<option value="MXN">MXN</option>
143+
<option value="MYR">MYR</option>
144+
<option value="NOK">NOK</option>
145+
<option value="NZD">NZD</option>
146+
<option value="PAB">PAB</option>
147+
<option value="PEN">PEN</option>
148+
<option value="PHP">PHP</option>
149+
<option value="PKR">PKR</option>
150+
<option value="PLN">PLN</option>
151+
<option value="PYG">PYG</option>
152+
<option value="RON">RON</option>
153+
<option value="RUB">RUB</option>
154+
<option value="SAR">SAR</option>
155+
<option value="SEK">SEK</option>
156+
<option value="SGD">SGD</option>
157+
<option value="THB">THB</option>
158+
<option value="TRY">TRY</option>
159+
<option value="TWD">TWD</option>
160+
<option value="UAH">UAH</option>
161+
<option value="UYU">UYU</option>
162+
<option value="ZAR">ZAR</option>
163+
</select>
164+
</div>
165+
</div>
166+
</div>
167+
168+
<div class="text-center">
169+
<!-- convert button -->
170+
<button class="btn btn-primary convert m-2" type="submit">
171+
Convert
172+
</button>
173+
<!-- reset button -->
174+
<button class="btn btn-primary m-2" onclick="clearVal()">
175+
Reset
176+
</button>
177+
</div>
178+
</div>
179+
180+
<div id="finalAmount" class="text-center">
181+
<!-- Display the converted amount -->
182+
<h2>
183+
Converted Amount :
184+
<span class="finalValue" style="color: green"> </span>
185+
</h2>
186+
</div>
187+
</div>
188+
189+
<!-- linking script.js file -->
190+
<script src="index.js"></script>
191+
</body>
192+
</html>

‎Currancy_con/index.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// Include api for currency change
2+
const api = "https://api.exchangerate-api.com/v4/latest/USD";
3+
4+
// For selecting different controls
5+
let search = document.querySelector(".searchBox");
6+
let convert = document.querySelector(".convert");
7+
let fromCurrecy = document.querySelector(".from");
8+
let toCurrecy = document.querySelector(".to");
9+
let finalValue = document.querySelector(".finalValue");
10+
let finalAmount = document.getElementById("finalAmount");
11+
let resultFrom;
12+
let resultTo;
13+
let searchValue;
14+
15+
// Event when currency is changed
16+
fromCurrecy.addEventListener("change", (event) => {
17+
resultFrom = `${event.target.value}`;
18+
});
19+
20+
// Event when currency is changed
21+
toCurrecy.addEventListener("change", (event) => {
22+
resultTo = `${event.target.value}`;
23+
});
24+
25+
search.addEventListener("input", updateValue);
26+
27+
// Function for updating value
28+
function updateValue(e) {
29+
searchValue = e.target.value;
30+
}
31+
32+
// When user clicks, it calls function getresults
33+
convert.addEventListener("click", getResults);
34+
35+
// Function getresults
36+
function getResults() {
37+
fetch(`${api}`)
38+
.then((currency) => {
39+
return currency.json();
40+
})
41+
.then(displayResults);
42+
}
43+
44+
// Display results after conversion
45+
function displayResults(currency) {
46+
let fromRate = currency.rates[resultFrom];
47+
let toRate = currency.rates[resultTo];
48+
finalValue.innerHTML = ((toRate / fromRate) * searchValue).toFixed(2);
49+
finalAmount.style.display = "block";
50+
}
51+
52+
// When user click on reset button
53+
function clearVal() {
54+
window.location.reload();
55+
document.getElementsByClassName("finalValue").innerHTML = "";
56+
}

0 commit comments

Comments
 (0)