xaloc/Conversor_moneda
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new style

Browse Source
This commit is contained in:
Xaloc 2023-07-06 22:31:44 +02:00
parent 967dac6e0d
commit f4f93fbfde
5 changed files with 142 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

65
index.html
View File

@ -4,12 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="author" content="Xaloc"> <meta name="author" content="Xaloc">
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css">
<title>Currency Converter</title> <title>Currency Converter</title>
</head> </head>
<body> <body>
<h3>Conversion</h3> <div class="panel">
From: <select id='curr'> <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='EUR'>EUR</option>
<option value='USD'>USD</option> <option value='USD'>USD</option>
<option value='SEK'>SEK</option> <option value='SEK'>SEK</option>
@ -21,10 +25,17 @@ From: <select id='curr'>
<option value='RON'>RON</option> <option value='RON'>RON</option>
<option value='NOK'>NOK</option> <option value='NOK'>NOK</option>
</select> </select>
<button onClick='change()' class="change">
<input type='number' id='val' step='0.01'> <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">
To: <select id='curr2'> <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='USD'>USD</option>
<option value='EUR'>EUR</option> <option value='EUR'>EUR</option>
<option value='SEK'>SEK</option> <option value='SEK'>SEK</option>
@ -37,46 +48,10 @@ To: <select id='curr2'>
<option value='NOK'>NOK</option> <option value='NOK'>NOK</option>
</select> </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> <script src='script.js'></script>
</body> </body>
</html> </html>

11
resize-svgrepo-com.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

41
script.js
View File

@ -1,7 +1,7 @@
async function api(base){ 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(); const data = await res.json();
return data.rates; return data.conversion_rates;
} }
async function convert(){ async function convert(){
@ -13,40 +13,15 @@ async function convert(){
coef = 1; coef = 1;
} }
var val = document.getElementById('val').value; var val = document.getElementById('val').value;
document.getElementById('res').textContent = Number((val*coef).toFixed(2)).toLocaleString('en') + ' ' +document.getElementById('curr2').value; document.getElementById('res').value = Number((val*coef).toFixed(2)).toLocaleString('en');
}
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;
} }
const from1 = document.getElementById('curr'); const from1 = document.getElementById('curr');
const to1 = document.getElementById('curr2'); const to1 = document.getElementById('curr2');
const from2 = document.getElementById('rev'); function change(){
const to2 = document.getElementById('rev2'); tmp = from1.value;
from1.value = to1.value;
from1.onchange = function(a){ to1.value = tmp;
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;
};

103
style.css Normal file
View File

@ -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;
}