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

Compare commits

base: xaloc/Conversor_moneda:fcf2d160e233a1873d9a1da8b1e407010f638175
Branches Tags
xaloc/Conversor_moneda:main
...
compare: xaloc/Conversor_moneda:main
Branches Tags
xaloc/Conversor_moneda:main

7 Commits
fcf2d160e2 ... main

Author SHA1 Message Date
xaloc 1c50d3bbe7 change bg to cover and add more top margin to panel 2023-07-07 15:23:09 +02:00
xaloc dbf21f570b fix style extra height 2023-07-07 15:03:54 +02:00
xaloc 1edb455c41 fix start url 2023-07-07 14:51:27 +02:00
xaloc b5f6c5bb90 improve compatibility input appearance 2023-07-07 14:42:16 +02:00
xaloc d9d68c190f make web installable 2023-07-07 14:39:49 +02:00
xaloc f4f93fbfde new style 2023-07-06 22:31:44 +02:00
xaloc 967dac6e0d add default zoom all devices 2020-06-24 02:23:30 +02:00
9 changed files with 216 additions and 78 deletions
Expand all files Collapse all files
bg.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

img/192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

img/icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

index.html
+30 -45
View File
@@ -3,12 +3,19 @@
<head> <head>
<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"/>
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="img/icon.png"/>
<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>
@@ -20,10 +27,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>
@@ -36,46 +50,17 @@ 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>
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('/service-worker.js');
} else {
console.log("Service worker is not supported");
}
</script>
</body> </body>
</html> </html>
manifest.json
+23
View File
@@ -0,0 +1,23 @@
{
"name": "Currency Converter",
"short_name": "Currency Converter",
"start_url": "/currency",
"background_color": "#55335C",
"theme_color": "#9E79C0",
"icons": [
{
"src": "img/icon.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "img/192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
}
],
"display": "standalone",
"orientation":"portrait"
}
resize-svgrepo-com.svg
+11
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

script.js
+8 -33
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;
};
service-worker.js
+36
View File
@@ -0,0 +1,36 @@
const CACHE_NAME = 'Convert-currency';
let resourcesToCache = ["./", "./bg.jpg", "./script.js", "./style.css"];
self.addEventListener("install", e=>{
e.waitUntil(
caches.open(CACHE_NAME).then(cache =>{
return cache.addAll(resourcesToCache);
})
);
});
// Cache and return requests
self.addEventListener("fetch", e=>{
e.respondWith(
caches.match(e.request).then(response=>{
return response || fetch(e.request);
})
);
});
// Update a service worker
const cacheWhitelist = ['Convert-currency'];
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
style.css
+108
View File
@@ -0,0 +1,108 @@
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid transparent;
}
.panel {
height: 60%;
min-height: 192px;
margin-left: 15%;
margin-right: 15%;
margin-top: 20%;
font-size: 15px;
text-align: center;
text-decoration: none;
outline: none;
color: #000000;
background-color: #9e79c0;
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;
appearance: textfield;
}
select {
max-width: 48px;
font-size: x-small;
}