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

Compare commits

base: xaloc/Conversor_moneda:5523f3a7c9b057aa5c4d6603af09b4fab35e4ab1
Branches Tags
xaloc/Conversor_moneda:main
...
compare: xaloc/Conversor_moneda:main
Branches Tags
xaloc/Conversor_moneda:main

17 Commits
5523f3a7c9 ... 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
xaloc fcf2d160e2 Merge branch 'main' of git.xaloc.space:xaloc/Conversor_moneda into main 2020-06-22 01:00:42 +02:00
xaloc fe77a1cee0 add reverse conversion 2020-06-22 00:58:58 +02:00
xaloc 33eb5709e9 change default lang 2020-06-20 15:06:35 +02:00
xaloc 600a5974b6 fix wording 2020-06-18 23:23:35 +02:00
xaloc 2c6311ad88 add currencies 2020-06-18 23:16:47 +02:00
xaloc 789e5b645f change html layout, better format number 2020-06-18 22:57:25 +02:00
xaloc cc70b38a21 translate english 2020-06-18 22:46:50 +02:00
xaloc 49f59d0f86 fix error README 2020-05-30 13:29:51 +02:00
xaloc a2a70bd2b5 afegir README 2020-05-30 13:17:20 +02:00
xaloc 80b1037db1 afegir llicencia 2020-05-30 13:13:00 +02:00
11 changed files with 246 additions and 15 deletions
Expand all files Collapse all files
LICENSE
+5
View File
@@ -0,0 +1,5 @@
"THE NON-ALCOHOLIC-BEVERAGE-WARE LICENSE":
<xaloc@tutanota.com> wrote this. As long as you retain this notice you can
do whatever you want with this stuff. If we meet some day, and you think this
stuff is worth it, you can buy me a non-alcoholic beverage in return Xaloc
README.md
+8
View File
@@ -0,0 +1,8 @@
# Conversor de monedes
Aquesta és una simple pàgina web que permet trobar el valor de l'intercanvi actual entre diferents monedes.
Pàgines com aquesta ja n'hi han milers i de molt millors. Aquest és un projecte per millorar amb JavaScript i les seves funcions asíncrones.
### Com puc utilitzar-ho?
Només has de baixar el repositori, o els fitxer index.html i script.js en la mateixa carpeta dins del teu ordinador, i després obrir el index.html amb el teu navegador preferit.
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
+42 -12
View File
@@ -1,36 +1,66 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='fr'> <html lang='en'>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="author" content="Arnau Busom i Vidal"> <meta name="author" content="Xaloc">
<title>Conversor</title> <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>
</head> </head>
<body> <body>
<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'> <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>
<option value='JPY'>JPY</option> <option value='JPY'>JPY</option>
<option value='GBP'>GBP</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> </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">
<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>
<option value='JPY'>JPY</option> <option value='JPY'>JPY</option>
<option value='GBP'>GBP</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> </select>
<p>
Quantitat convertida: <span id='res'></span>
</p>
<button onClick='convert()'>convertir</button>
<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
+13 -3
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,5 +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 = val*coef + ' ' +document.getElementById('curr2').value; document.getElementById('res').value = Number((val*coef).toFixed(2)).toLocaleString('en');
} }
const from1 = document.getElementById('curr');
const to1 = document.getElementById('curr2');
function change(){
tmp = from1.value;
from1.value = to1.value;
to1.value = tmp;
}
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;
}