Auslagerung der Dateien in den Assets-Folder

README.md

@@ -6,6 +6,13 @@ ist auch offline verfügbar und kann ohne Internetverbindung genutzt werden (Ser
 Einrichtung wird eine Internetverbindung empfohlen (das einmalige Aufrufen der Seite im Browser mit einer Internetverbindung 
 genügt).
 
+## Installation
+
+```bash
+# Installieren der Abhängigkeiten
+pnpm install
+```
+
 ## Entwicklung
 
 ```bash

assets/script/all.js

@@ -0,0 +1,11 @@
+import './theme.js'
+import './calculator.js'
+import './../../node_modules/bootstrap/dist/js/bootstrap.min.js'
+
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        navigator.serviceWorker.register('./assets/script/service-worker.js')
+            .then(reg => console.log('Service Worker installiert', reg))
+            .catch(err => console.error('Service Worker fehlgeschlagen', err));
+    });
+}

assets/script/calculator.js

@@ -48,15 +48,10 @@ class CartLine {
 class ProductList {
     constructor() {
         this.products = [];
-        this.products.push(new Product('Product 1', 10, 'https://placehold.co/250x250/000000/FFF?text=Product 1'));
-        this.products.push(new Product('Product 2', 5, 'https://placehold.co/250x250/000000/FFF?text=Product 2'));
-        this.products.push(new Product('Product 3', 2.5, 'https://placehold.co/250x250/000000/FFF?text=Product 3'));
-        this.products.push(new Product('Product 4', 1, 'https://placehold.co/250x250/000000/FFF?text=Product 4'));
-        this.renderProductList();
+        for (let i = 1; i < 50; i++) {
+            this.products.push(new Product(`Product ${i}`, 1, `https://placehold.co/250x250?text=Product ${i}`));
         }
-
-    getProductJson() {
-        return JSON.stringify(this.products);
+        this.renderProductList();
     }
 
     getProductListElement() {

assets/script/service-worker.js

@@ -3,23 +3,23 @@ const CACHE_NAME = 'durst-rechner-v2';
 const FILES_TO_CACHE = [
     '/',
     '/index.html',
-    '/manifest.json',
-    '/service-worker.js',
-    '/stylesheet.css',
-    '/script/all.js',
-    '/script/calculator.js',
-    '/script/theme.js',
+    '/assets/manifest.json',
+    '/assets/script/service-worker.js',
+    '/assets/style/stylesheet.css',
+    '/assets/script/all.js',
+    '/assets/script/calculator.js',
+    '/assets/script/theme.js',
     '/node_modules/bootstrap/dist/css/bootstrap.min.css',
     '/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
     '/node_modules/bootstrap-icons/font/bootstrap-icons.min.css',
     '/node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2',
     '/node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff',
-    '/favicon/android-chrome-192x192.png',
-    '/favicon/android-chrome-512x512.png',
-    '/favicon/apple-touch-icon.png',
-    '/favicon/favicon-16x16.png',
-    '/favicon/favicon-32x32.png',
-    '/favicon/favicon.ico',
+    '/assets/favicon/android-chrome-192x192.png',
+    '/assets/favicon/android-chrome-512x512.png',
+    '/assets/favicon/apple-touch-icon.png',
+    '/assets/favicon/favicon-16x16.png',
+    '/assets/favicon/favicon-32x32.png',
+    '/assets/favicon/favicon.ico',
 ];
 
 self.addEventListener('install', event => {

assets/style/stylesheet.css

@@ -8,6 +8,9 @@
         min-width: 3em;
     }
 }
+.product-list {
+    padding-bottom: 1em;
+}
 .currency-value::after {
     content: ' €';
 }

index.html

@@ -4,13 +4,13 @@
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta name="theme-color" content="#2196f3"/>
-    <link rel="manifest" href="manifest.json">
-    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+    <link rel="manifest" href="assets/manifest.json">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
-    <link rel="stylesheet" href="stylesheet.css">
+    <link rel="stylesheet" href="assets/style/stylesheet.css">
     <title>Der Durstrechner</title>
 </head>
 <body class="d-flex flex-column vh-100">
@@ -24,7 +24,7 @@
         </div>
     </nav>
 
-    <main class="container-fluid">
+    <main class="container-fluid flex-grow-1">
         <div class="row">
             <div class="col-12 col-md-4">
                 <li class="list-group-item d-flex justify-content-between" data-template="product-line-item">
@@ -43,10 +43,10 @@
                 </button>
             </div>
             <div class="col-12 col-md-8">
-                <div class="row row-cols-4 row-gap-3 product-list">
+                <div class="row row-cols-4 row-gap-3 product-list h-100 overflow-auto">
                     <div class="col product-box" data-template="product" data-id="0">
                         <div class="card">
-                            <img data-attr="image" src="https://placehold.co/250x250" alt="Produktbild" class="card-img-top">
+                            <img data-attr="image" src="https://placehold.co/250x250" alt="Produktbild" class="card-img-top" loading="lazy">
                             <div class="card-body">
                                 <span data-attr="name">Wasser mit Kohlensäure</span>
                             </div>
@@ -57,18 +57,6 @@
         </div>
     </main>
 
-
-    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="script/all.js" type="module"></script>
-    <script>
-        // Install the service worker for offline capabilities
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('service-worker.js')
-                    .then(reg => console.log('Service Worker registered', reg))
-                    .catch(err => console.error('SW registration failed', err));
-            });
-        }
-    </script>
+    <script src="assets/script/all.js" type="module"></script>
 </body>
 </html>

script/all.js

@@ -1,2 +0,0 @@
-import './theme.js'
-import './calculator.js'