debugging PWA

index.html

@@ -77,7 +77,7 @@
       font-size: 12px;
     }
     #installButton {
-      display: block;
+      display: none;
       margin: 0 auto;
       padding: 10px 20px;
       font-size: 16px;
@@ -86,7 +86,6 @@
       border: none;
       border-radius: 5px;
       cursor: pointer;
-      margin-top: 20px;
     }
     #install-instructions {
       display: none;
@@ -108,7 +107,7 @@
   <!-- Installation button (hidden by default) -->
   <button id="installButton" onclick="installApp()">Install App</button>
 
-  <form onsubmit="convert(event)">
+  <form onsubmit="return convert(event)">
     <label for="euro">Enter amount in Euro:</label>
     <input type="number" id="euro" placeholder="Enter amount in Euro">
 
@@ -131,20 +130,52 @@
   </footer>
 
   <script>
-    let deferredPrompt;
+    let recentCalculations = [];
 
-    window.addEventListener('beforeinstallprompt', (event) => {
+    function convert(event) {
-      // Prevent the default installation prompt
       event.preventDefault();
-      // Stash the event so it can be triggered later
+      const euro = document.getElementById("euro").value;
-      deferredPrompt = event;
+      const dinar = document.getElementById("dinar").value;
-      // Show installation instructions only if app is not already installed
+      const apiKey = "ab0076697b3401ea71d2c393";
-      if (!window.matchMedia('(display-mode: standalone)').matches) {
+      const url = `https://v6.exchangerate-api.com/v6/${apiKey}/pair/EUR/DZD`;
-        document.getElementById('install-instructions').style.display = 'block';
+
-        document.getElementById('installButton').style.display = 'block';
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          const exchangeRate = data.conversion_rate;
+          if (euro && !isNaN(euro)) {
+            const result = (euro * exchangeRate).toFixed(2);
+            const calculation = `${euro} Euro = ${result} Algerian Dinar`;
+            document.getElementById("result").textContent = calculation;
+            recentCalculations.unshift(calculation);
+          } else if (dinar && !isNaN(dinar)) {
+            const result = (dinar / exchangeRate).toFixed(2);
+            const calculation = `${dinar} Algerian Dinar = ${result} Euro`;
+            document.getElementById("result").textContent = calculation;
+            recentCalculations.unshift(calculation);
           }
+          recentCalculations = recentCalculations.slice(0, 5);
+          updateRecentCalculations();
+        })
+        .catch(error => {
+          console.log(error);
+          document.getElementById("result").textContent = "Oops, something went wrong! Please try again later.";
         });
 
+      return false; // Prevent form submission
+    }
+
+    function updateRecentCalculations() {
+      const calculationList = document.getElementById("calculationList");
+      calculationList.innerHTML = "";
+
+      recentCalculations.forEach(calculation => {
+        const li = document.createElement("li");
+        li.textContent = calculation;
+        calculationList.appendChild(li);
+      });
+    }
+
     function installApp() {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/service-worker.js')
@@ -156,30 +187,14 @@
           });
       }
 
-      // 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';
-      }
-  
-      // Listen for the app installed event
-      window.addEventListener('appinstalled', () => {
       // Hide the installation button once the app is installed
       document.getElementById('installButton').style.display = 'none';
-      });
 
-      // Prompt the user to install the PWA
+      // Show installation instructions only if app is not already installed
-      if (deferredPrompt) {
+      if (!window.matchMedia('(display-mode: standalone)').matches) {
-        deferredPrompt.prompt();
+        document.getElementById('install-instructions').style.display = 'block';
-        deferredPrompt.userChoice.then((choiceResult) => {
-          if (choiceResult.outcome === 'accepted') {
-            console.log('User accepted the A2HS prompt');
-          }
-          deferredPrompt = null;
-        });
       }
     }
   </script>
-  
 </body>
 </html>