new style
This commit is contained in:
parent
967dac6e0d
commit
f4f93fbfde
65
index.html
65
index.html
|
|
@ -4,12 +4,16 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="author" content="Xaloc">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Currency Converter</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3>Conversion</h3>
|
||||
From: <select id='curr'>
|
||||
<div class="panel">
|
||||
<div class="content">
|
||||
<h3 class="myTitle">Currency Converter</h3>
|
||||
<input type='number' id='val' step='0.01' class="input">
|
||||
<select id='curr'>
|
||||
<option value='EUR'>EUR</option>
|
||||
<option value='USD'>USD</option>
|
||||
<option value='SEK'>SEK</option>
|
||||
|
|
@ -21,10 +25,17 @@ From: <select id='curr'>
|
|||
<option value='RON'>RON</option>
|
||||
<option value='NOK'>NOK</option>
|
||||
</select>
|
||||
|
||||
<input type='number' id='val' step='0.01'>
|
||||
|
||||
To: <select id='curr2'>
|
||||
<button onClick='change()' class="change">
|
||||
<svg fill="#000000" height="16px" width="16px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 251.247 251.247" xml:space="preserve">
|
||||
<path d="M248.611,119.259l-51.005-51.005c-3.516-3.515-9.213-3.515-12.729,0c-3.515,3.515-3.515,9.213,0,12.728l35.642,35.641
|
||||
H30.728l35.642-35.641c3.515-3.515,3.515-9.213,0-12.728c-3.516-3.515-9.213-3.515-12.729,0L2.636,119.259
|
||||
c-3.515,3.515-3.515,9.213,0,12.728l51.005,51.005c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636
|
||||
c3.515-3.515,3.515-9.213,0-12.728l-35.642-35.641h189.791l-35.642,35.641c-3.515,3.515-3.515,9.213,0,12.728
|
||||
c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l51.005-51.005C252.125,128.472,252.125,122.774,248.611,119.259z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="text" id='res' readonly="readonly" class="result" value=""> </input> <select id='curr2'>
|
||||
<option value='USD'>USD</option>
|
||||
<option value='EUR'>EUR</option>
|
||||
<option value='SEK'>SEK</option>
|
||||
|
|
@ -37,46 +48,10 @@ To: <select id='curr2'>
|
|||
<option value='NOK'>NOK</option>
|
||||
</select>
|
||||
|
||||
<button onClick='convert()'>Convert</button>
|
||||
|
||||
<p>
|
||||
Conversion: <span id='res'></span>
|
||||
</p>
|
||||
<h3>Reversed conversion</h3>
|
||||
From: <select id='rev'>
|
||||
<option value='USD'>USD</option>
|
||||
<option value='EUR'>EUR</option>
|
||||
<option value='SEK'>SEK</option>
|
||||
<option value='JPY'>JPY</option>
|
||||
<option value='GBP'>GBP</option>
|
||||
<option value='INR'>INR</option>
|
||||
<option value='ISK'>ISK</option>
|
||||
<option value='DKK'>DKK</option>
|
||||
<option value='RON'>RON</option>
|
||||
<option value='NOK'>NOK</option>
|
||||
</select>
|
||||
|
||||
<input type='number' id='val2' step='0.01'>
|
||||
|
||||
To: <select id='rev2'>
|
||||
<option value='EUR'>EUR</option>
|
||||
<option value='USD'>USD</option>
|
||||
<option value='SEK'>SEK</option>
|
||||
<option value='JPY'>JPY</option>
|
||||
<option value='GBP'>GBP</option>
|
||||
<option value='INR'>INR</option>
|
||||
<option value='ISK'>ISK</option>
|
||||
<option value='DKK'>DKK</option>
|
||||
<option value='RON'>RON</option>
|
||||
<option value='NOK'>NOK</option>
|
||||
</select>
|
||||
|
||||
<button onClick='convert2()'>Convert</button>
|
||||
|
||||
<p>
|
||||
Conversion: <span id='res2'></span>
|
||||
</p>
|
||||
|
||||
<p><button onClick='convert()' class="convert">Convert</button></p>
|
||||
</div>
|
||||
</div>
|
||||
<script src='script.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 251.247 251.247" xml:space="preserve">
|
||||
<path d="M248.611,119.259l-51.005-51.005c-3.516-3.515-9.213-3.515-12.729,0c-3.515,3.515-3.515,9.213,0,12.728l35.642,35.641
|
||||
H30.728l35.642-35.641c3.515-3.515,3.515-9.213,0-12.728c-3.516-3.515-9.213-3.515-12.729,0L2.636,119.259
|
||||
c-3.515,3.515-3.515,9.213,0,12.728l51.005,51.005c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636
|
||||
c3.515-3.515,3.515-9.213,0-12.728l-35.642-35.641h189.791l-35.642,35.641c-3.515,3.515-3.515,9.213,0,12.728
|
||||
c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l51.005-51.005C252.125,128.472,252.125,122.774,248.611,119.259z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
41
script.js
41
script.js
|
|
@ -1,7 +1,7 @@
|
|||
async function api(base){
|
||||
const res = await fetch(`https://api.exchangeratesapi.io/latest?base=${base}`);
|
||||
const res = await fetch(`https://v6.exchangerate-api.com/v6/aa74a76fa349403ebf36b1ff/latest/${base}`);
|
||||
const data = await res.json();
|
||||
return data.rates;
|
||||
return data.conversion_rates;
|
||||
}
|
||||
|
||||
async function convert(){
|
||||
|
|
@ -13,40 +13,15 @@ async function convert(){
|
|||
coef = 1;
|
||||
}
|
||||
var val = document.getElementById('val').value;
|
||||
document.getElementById('res').textContent = Number((val*coef).toFixed(2)).toLocaleString('en') + ' ' +document.getElementById('curr2').value;
|
||||
}
|
||||
|
||||
async function convert2(){
|
||||
const base = document.getElementById('rev').value;
|
||||
const rates = await api(base);
|
||||
const cur = document.getElementById('rev2').value;
|
||||
var coef = rates[cur];
|
||||
if (base==cur){
|
||||
coef = 1;
|
||||
}
|
||||
var val = document.getElementById('val2').value;
|
||||
document.getElementById('res2').textContent = Number((val*coef).toFixed(2)).toLocaleString('en') + ' ' +document.getElementById('rev2').value;
|
||||
document.getElementById('res').value = Number((val*coef).toFixed(2)).toLocaleString('en');
|
||||
}
|
||||
|
||||
const from1 = document.getElementById('curr');
|
||||
const to1 = document.getElementById('curr2');
|
||||
|
||||
const from2 = document.getElementById('rev');
|
||||
const to2 = document.getElementById('rev2');
|
||||
|
||||
from1.onchange = function(a){
|
||||
to2.value = a.target.value;
|
||||
};
|
||||
|
||||
to1.onchange = function(a){
|
||||
from2.value = a.target.value;
|
||||
};
|
||||
|
||||
from2.onchange = function(a){
|
||||
to1.value = a.target.value;
|
||||
};
|
||||
|
||||
to2.onchange = function(a){
|
||||
from1.value = a.target.value;
|
||||
};
|
||||
function change(){
|
||||
tmp = from1.value;
|
||||
from1.value = to1.value;
|
||||
to1.value = tmp;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
body {
|
||||
background-image: url("bg.jpg");
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel {
|
||||
height: 60%;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
margin-top: 15%;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
color: #000000;
|
||||
background-color: #9e79c0;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 9px 9px 9px #55335c;
|
||||
}
|
||||
.content {
|
||||
margin-top: -10%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.input {
|
||||
max-width: 15%;
|
||||
min-width: 15%;
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result {
|
||||
max-width: 15%;
|
||||
min-width: 15%;
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.change {
|
||||
border: none;
|
||||
background-color: #9e79c0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.change:active {
|
||||
border: none;
|
||||
background-color: #55335c;
|
||||
}
|
||||
.convert {
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
color: #000000;
|
||||
background-color: #a925c4;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 9px #7e5683;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.convert:active {
|
||||
border: none;
|
||||
background-color: #7e5683;
|
||||
}
|
||||
|
||||
.myTitle {
|
||||
padding-bottom: 10%;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 48px;
|
||||
font-size: x-small;
|
||||
}
|
||||
Loading…
Reference in New Issue