Lekcja 4

Lekcja_04/z1.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ćwiczenie 1</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            color: white;
+            font-family: monospace;
+        }
+
+        body {
+            background-color: rgb(40, 40, 45);
+        }
+
+        button {
+            border: none;
+            font-size: 2em;
+            background-color: cornflowerblue;
+            padding: 1em;
+        }
+
+        button:hover {
+            background-color: purple;
+            cursor: pointer;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        div {
+            margin: 0 auto;
+            width: fit-content;
+            margin-bottom: 1em;
+        }
+
+        table {
+            margin: 0 auto;
+            font-size: 2em;
+        }
+
+        th {
+            padding: 1em;
+            border: 1px solid white;
+            background-color: gray;
+        }
+
+        td {
+            padding: 1em;
+            border: 1px solid white;
+            background-color: darkslategray;
+        }
+    </style>
+    <script src="lib/jquery.js"></script>
+    <script>
+        $(document).ready(function () {
+            const data = {
+                header: {
+                    lps: ["lp", "cena", "produkt"],
+                },
+                products: {
+                    prices: ["5,60", "3,23", "7,45", "10,00", "3,20", "9,22"],
+                    names: ["chleb", "mąka", "masło", "kefir", "dżem", "inne"]
+                }
+            }
+
+            $("#generuj").on("click", function () {
+                const tabela = $("<table>")
+
+                let sum = 0
+
+                for (let i = 0; i < data.products.prices.length + 1; i++) {
+                    const row = $("<tr>")
+
+                    for (let j = 0; j < data.header.lps.length; j++) {
+                        if (i == 0) {
+                            const hdr = $("<th>").text(data.header.lps[j])
+                            row.append(hdr)
+                        } else {
+                            const td = $("<td>")
+                            switch (j) {
+                                case 0:
+                                    td.text(i)
+                                    break
+                                case 1:
+                                    td.text(data.products.prices[i - 1])
+                                    sum += parseFloat(data.products.prices[i - 1].replace(',', '.'))
+                                    break
+                                case 2:
+                                    td.text(data.products.names[i - 1])
+                                    break
+                            }
+                            row.append(td)
+                        }
+                    }
+
+                    tabela.append(row)
+                }
+
+                const row_suma = $("<tr>")
+                const suma = $("<td>").attr("colspan", 2).text("suma")
+                const suma_val = $("<td>").text(`${sum.toFixed(2)}`.replace('.', ','))
+
+                row_suma.append(suma)
+                row_suma.append(suma_val)
+                tabela.append(row_suma)
+
+                $("#d1").append(tabela)
+            })
+        })
+    </script>
+</head>
+
+<body>
+    <h1>Tabela html - tablice</h1>
+    <div><button id="generuj">Generuj tabelę</button></div>
+    <div id="d1"></div>
+</body>
+
+</html>