change bg to cover and add more top margin to panel

index.html

@@ -5,6 +5,8 @@
 	<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>
 
@@ -53,5 +55,12 @@
 </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>

manifest.json

@@ -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"
+}

service-worker.js

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

@@ -6,23 +6,27 @@ html {
 }
 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: 15%;
+    margin-top: 20%;
     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;
 }
@@ -95,6 +99,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 input[type=number] {
     -moz-appearance: textfield;
+    appearance: textfield;
 }
 
 select {