Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ceb3bc9

Browse files
logic & ui
1 parent ca9d47f commit ceb3bc9

File tree

3 files changed

+51
-38
lines changed

3 files changed

+51
-38
lines changed

β€ŽCurrency-Converter/app.jsβ€Ž

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const currency1InputElem = document.getElementById('currency-1');
2+
const selectCurrency1 = document.getElementById('select-currency-1');
3+
const currency2InputElem = document.getElementById('currency-2');
4+
const selectCurrency2 = document.getElementById('select-currency-2');
5+
const rateDetail = document.getElementById('rate-detail');
6+
7+
calc();
8+
9+
function calc(){
10+
11+
const selectCurrency1value = selectCurrency1.value;
12+
const selectCurrency2value = selectCurrency2.value;
13+
14+
fetch(`https://api.exchangerate-api.com/v4/latest/${selectCurrency1value}`)
15+
.then(response => {
16+
//if promise wasn't resolved
17+
if(!response.ok){
18+
throw new Error('Network response was not ok');
19+
}
20+
return response.json();
21+
})
22+
.then(data => {
23+
24+
const val = data.rates[selectCurrency2value];
25+
currency2InputElem.value = (currency1InputElem.value * val).toFixed(3);
26+
27+
rateDetail.innerText = `1 ${selectCurrency1value} = ${val.toFixed(3)} ${selectCurrency2value}`;
28+
})
29+
.catch(error => {
30+
console.log('problem : ', error);
31+
});
32+
}
33+
34+
currency1InputElem.addEventListener('input', calc);
35+
currency2InputElem.addEventListener('input', calc);
36+
37+
selectCurrency1.addEventListener('change', calc);
38+
selectCurrency2.addEventListener('change', calc);

β€ŽCurrency-Converter/index.htmlβ€Ž

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@
1010
<div class="container">
1111
<h1 class="title">Currency Converter</h1>
1212
<div class="row">
13-
<input type="number" name="currency-1" id="currency-1">
13+
<input type="number" name="currency-1" id="currency-1"step="any">
1414
<select name="currency-1" id="select-currency-1">
15+
<option value="EUR">EUR</option>
1516
<option value="CAD">CAD</option>
1617
<option value="HKD">HKD</option>
1718
<option value="ISK">ISK</option>
@@ -38,18 +39,18 @@ <h1 class="title">Currency Converter</h1>
3839
<option value="NOK">NOK</option>
3940
<option value="NZD">NZD</option>
4041
<option value="ZAR">ZAR</option>
41-
<option value="USD">USD</option>
42+
<option value="USD"selected>USD</option>
4243
<option value="MXN">MXN</option>
4344
<option value="ILS">ILS</option>
4445
<option value="GBP">GBP</option>
4546
<option value="KRW">KRW</option>
4647
<option value="MYR">MYR</option>
4748
</select>
4849
</div>
49-
<button id="btn">Convert</button>
5050
<div class="row">
51-
<input type="number" name="currency-2" id="currency-2">
51+
<input type="number" name="currency-2" id="currency-2"step="any">
5252
<select name="currency-2" id="select-currency-2">
53+
<option value="EUR">EUR</option>
5354
<option value="CAD">CAD</option>
5455
<option value="HKD">HKD</option>
5556
<option value="ISK">ISK</option>
@@ -61,7 +62,7 @@ <h1 class="title">Currency Converter</h1>
6162
<option value="RON">RON</option>
6263
<option value="SEK">SEK</option>
6364
<option value="IDR">IDR</option>
64-
<option value="INR">INR</option>
65+
<option value="INR"selected>INR</option>
6566
<option value="BRL">BRL</option>
6667
<option value="RUB">RUB</option>
6768
<option value="HRK">HRK</option>
@@ -84,9 +85,7 @@ <h1 class="title">Currency Converter</h1>
8485
<option value="MYR">MYR</option>
8586
</select>
8687
</div>
87-
<div id="rate-detail">
88-
1 EUR = 87.6185 INR
89-
</div>
88+
<div id="rate-detail"></div>
9089
</div>
9190
<p class="footer">This project is a part of <a href="https://60minutejs.vercel.app/">60 Minute javascript</a></p>
9291
<script src="./app.js" type="text/javascript"></script>

β€ŽCurrency-Converter/style.cssβ€Ž

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
padding: 0;
44
box-sizing: border-box;
55
}
6-
*::before,
7-
*::after {
8-
box-sizing: border-box;
9-
}
106
html,
117
body {
128
font-size: 10px;
@@ -18,8 +14,8 @@ body {
1814
flex-direction: column;
1915
justify-content: center;
2016
align-items: center;
21-
background-color: #af8c9d;
22-
background-image: linear-gradient(315deg, #af8c9d 0%, #8cacac 74%);
17+
background-color: #6bc1c1;
18+
background-image: linear-gradient(315deg, #73a6e8 0%, #64d7a1 74%);
2319
}
2420
.container {
2521
display: flex;
@@ -30,9 +26,7 @@ body {
3026
padding: 1.5rem;
3127
justify-content: space-evenly;
3228
}
33-
.title {
34-
font-size: 3rem;
35-
}
29+
.title { font-size: 3rem; }
3630
.row {
3731
display: flex;
3832
justify-content: space-between;
@@ -41,39 +35,21 @@ body {
4135
padding: 1rem;
4236
border-radius: 0.5rem;
4337
}
44-
input {
45-
margin-right: 2rem;
46-
}
38+
input { margin-right: 2rem; }
4739
input,
4840
select {
4941
font-size: 1.7rem;
5042
border: none;
5143
background: transparent;
5244
}
53-
#btn {
54-
border: none;
55-
padding: 1rem;
56-
width: 50%;
57-
border-radius: 0.5rem;
58-
font-size: 2rem;
59-
letter-spacing: 4px;
60-
cursor: pointer;
61-
background: linear-gradient(315deg, #e1aac5 0%, #97e8e8 74%);
62-
color: black;
63-
}
64-
#btn:hover{
65-
opacity: 0.7;
66-
transition: 0.2s opacity ease;
67-
}
6845
#rate-detail {
6946
font-size: 1.8rem;
47+
border-bottom: 3px dotted #035d66;
7048
}
7149
.footer {
7250
font-size: 1.2rem;
7351
position: relative;
7452
bottom: -2rem;
7553
letter-spacing: 1px;
7654
}
77-
.footer > a {
78-
text-decoration: none;
79-
}
55+
.footer > a { text-decoration: none; }

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /