From 37748a2206ed7aac1b6d9b3e50868637ba8dfa3f Mon Sep 17 00:00:00 2001
From: Tobi <hello@kabi.tk>
Date: Tue, 9 Apr 2024 10:13:47 +0200
Subject: [PATCH] debugging PWA

---
 index.html | 106 +++++++++++++++++------------------------------------
 1 file changed, 34 insertions(+), 72 deletions(-)
diff --git a/index.html b/index.html
index 6a14c28..76262ec 100644
--- a/index.html
+++ b/index.html
@@ -76,8 +76,6 @@
       color: #666;
       font-size: 12px;
     }
-  </style>
-  <style>
     #installButton {
       display: block;
       margin: 0 auto;
@@ -88,47 +86,38 @@
       border: none;
       border-radius: 5px;
       cursor: pointer;
+      margin-top: 20px;
     }
-  
     #install-instructions {
       display: none;
       text-align: center;
       padding: 20px;
     }
   </style>
-  <style>
-    /* Center the button horizontally */
-    #installButton {
-      display: block;
-    }
-  
-    /* Show installation instructions when needed */
-    #install-instructions.show {
-      display: block;
-    }
-  </style>
-  
 </head>
 <body>
-  <div id="install-instructions" style="display: none; text-align: center; padding: 20px;">
+  <h1>Exchange Rate Calculator</h1>
+
+  <!-- Installation instructions (hidden by default) -->
+  <div id="install-instructions">
     <p>For the best experience, add this web app to your home screen:</p>
     <p>1. Tap the <strong>Share</strong> button.</p>
     <p>2. Tap <strong>Add to Home Screen</strong>.</p>
   </div>
   
-  <button id="installButton" style="display: none; margin: 0 auto; padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer;">
-    Install App
-  </button>
-  
+  <!-- Installation button (hidden by default) -->
+  <button id="installButton" onclick="installApp()">Install App</button>
 
-  <h1>Exchange Rate Calculator</h1>
-  <form>
-    <label>Enter amount in Euro:</label>
+  <form onsubmit="convert(event)">
+    <label for="euro">Enter amount in Euro:</label>
     <input type="number" id="euro" placeholder="Enter amount in Euro">
-    <label>Enter amount in Algerian Dinar:</label>
+
+    <label for="dinar">Enter amount in Algerian Dinar:</label>
     <input type="number" id="dinar" placeholder="Enter amount in Algerian Dinar">
-    <button type="submit" onclick="convert(event)">Convert</button>
+
+    <button type="submit">Convert</button>
   </form>
+
   <p class="result" id="result"></p>
 
   <div id="recentCalculations">
@@ -158,12 +147,12 @@
           if (euro) {
             const result = (euro * exchangeRate).toFixed(2);
             const calculation = `${euro} Euro = ${result} Algerian Dinar`;
-            document.getElementById("result").innerHTML = calculation;
+            document.getElementById("result").textContent = calculation;
             recentCalculations.unshift(calculation);
           } else if (dinar) {
             const result = (dinar / exchangeRate).toFixed(2);
             const calculation = `${dinar} Algerian Dinar = ${result} Euro`;
-            document.getElementById("result").innerHTML = calculation;
+            document.getElementById("result").textContent = calculation;
             recentCalculations.unshift(calculation);
           }
           recentCalculations = recentCalculations.slice(0, 5);
@@ -171,7 +160,7 @@
         })
         .catch(error => {
           console.log(error);
-          document.getElementById("result").innerHTML = "Oops, something went wrong! Please try again later.";
+          document.getElementById("result").textContent = "Oops, something went wrong! Please try again later.";
         });
     }
 
@@ -185,51 +174,24 @@
         calculationList.appendChild(li);
       });
     }
-  </script>
-  <script>
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/service-worker.js')
-        .then(function(registration) {
-          console.log('Service Worker registered with scope:', registration.scope);
-        })
-        .catch(function(error) {
-          console.error('Service Worker registration failed:', error);
-        });
+
+    function installApp() {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/service-worker.js')
+          .then(registration => {
+            console.log('Service Worker registered with scope:', registration.scope);
+          })
+          .catch(error => {
+            console.error('Service Worker registration failed:', error);
+          });
+      }
+
+      // Show installation instructions and button only if not already installed
+      if (!window.matchMedia('(display-mode: standalone)').matches) {
+        document.getElementById('install-instructions').style.display = 'block';
+        document.getElementById('installButton').style.display = 'block';
+      }
     }
   </script>
-<script>
-  let deferredPrompt;
-
-  window.addEventListener('beforeinstallprompt', (event) => {
-    // Prevent the default installation prompt
-    event.preventDefault();
-    // Stash the event so it can be triggered later
-    deferredPrompt = event;
-    // Show installation instructions only if app is not already installed
-    if (!window.matchMedia('(display-mode: standalone)').matches) {
-      document.getElementById('install-instructions').classList.add('show');
-      document.getElementById('installButton').style.display = 'block';
-    }
-  });
-
-  function installApp() {
-    // Show the installation prompt when the user clicks the button
-    if (deferredPrompt) {
-      deferredPrompt.prompt();
-      deferredPrompt.userChoice.then((choiceResult) => {
-        if (choiceResult.outcome === 'accepted') {
-          console.log('User accepted the A2HS prompt');
-          // App installed, hide installation instructions
-          document.getElementById('install-instructions').classList.remove('show');
-          document.getElementById('installButton').style.display = 'none';
-        }
-        deferredPrompt = null;
-      });
-    }
-  }
-</script>
-
-
-   
 </body>
 </html>
