change bg to cover and add more top margin to panel

fix style extra height
fix start url
2023-07-07 15:23:09 +02:00 · 2023-07-07 15:03:54 +02:00 · 2023-07-07 14:51:27 +02:00 · 2023-07-07 14:42:16 +02:00 · 2023-07-07 14:39:49 +02:00 · 2023-07-06 22:31:44 +02:00
9 changed files with 233 additions and 15 deletions
@@ -1,36 +1,66 @@
 <!DOCTYPE html>
-<html lang='fr'>
+<html lang='en'>
 <head>
 	<meta charset="UTF-8">
-	<meta name="author" content="Arnau Busom i Vidal">
-	<title>Conversor</title>
+	<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>
 </head>

 <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'>
 	<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>
-
-<input type='number' id='val' step='0.01'>
-
-<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>
 	<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>

-<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>
+	if('serviceWorker' in navigator){
+		navigator.serviceWorker.register('/service-worker.js');
+	} else {
+		console.log("Service worker is not supported");
+	}
+</script>
 </body>
 </html>
@@ -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"
+}
@@ -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>
@@ -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,5 +13,15 @@ async function convert(){
 		coef = 1;
 	}
 	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;
+}
+
@@ -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);
+            }
+          })
+        );
+      })
+    );
+  });
@@ -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;
+}
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