Lekcja 4

Lekcja_04/z2.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ćwiczenie 2</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            color: white;
+            font-family: monospace;
+        }
+
+        body {
+            background-color: rgb(40, 40, 45);
+        }
+
+        p {
+            text-align: center;
+            font-size: 2em;
+        }
+
+        select {
+            border: none;
+            font-size: 1.5em;
+            background-color: gray;
+            padding: .5em;
+        }
+
+        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>
+        const produkty = [
+            { id: 101, nazwa: 'Laptop Pro', cena: 4500 },
+            { id: 102, nazwa: 'Mysz bezprzewodowa', cena: 150 },
+            { id: 103, nazwa: 'Klawiatura mechaniczna', cena: 350 },
+            { id: 104, nazwa: 'Monitor 4K', cena: 1800 },
+            { id: 105, nazwa: 'Monitor 5K', cena: 1000 }
+        ];
+
+        let koszyk = [] // { id: ?, ilosc: ? }
+
+        $(document).ready(function () {
+            $("#dodaj").on("click", function () {
+                let this_id = $("#wybor-produktu").val()
+
+                const obiekt = koszyk.find(produkt => produkt.id == this_id)
+                obiekt ? obiekt.ilosc += 1 : koszyk.push({ id: this_id, ilosc: 1 })
+
+                // aktualizuj tabelę
+                $("#tabela-container").empty()
+                const nowa_tabela = $("<table>")
+
+                const header = $("<tr>")
+
+                let headery = ["lp", "produkt", "cena", "ilość", "razem"];
+                headery.forEach(e => {
+                    const header_pole = $("<th>").text(e)
+                    header.append(header_pole)
+                })
+
+                nowa_tabela.append(header)
+
+                let sum = 0;
+                let lp = 0;
+                koszyk.forEach(e => {
+                    const wiersz = $("<tr>")
+                    const infoprodukt = produkty[produkty.findIndex(produkt => produkt.id == e.id)]
+
+                    lp++
+                    const tlp = $("<td>").text(lp)
+                    const tprodukt = $("<td>").text(infoprodukt.nazwa)
+                    const tcena = $("<td>").text(infoprodukt.cena)
+                    const tilosc = $("<td>").text(e.ilosc)
+
+                    let razem = parseFloat(`${infoprodukt.cena}`.replace(",", ".")) * e.ilosc
+                    const trazem = $("<td>").text(razem.toFixed(2).replace(".", ",") + " zł")
+                    sum += razem
+
+                    wiersz.append(tlp, tprodukt, tcena, tilosc, trazem)
+
+                    nowa_tabela.append(wiersz)
+                })
+
+                const suma_row = $("<tr>")
+                const suma_tytul = $("<td>").attr("colspan", "4").text("suma")
+                const suma_wartosc = $("<td>").text(parseFloat(sum).toFixed(2).replace(".", ",") + " zł")
+                suma_row.append(suma_tytul, suma_wartosc)
+                nowa_tabela.append(suma_row)
+
+                $("#tabela-container").append(nowa_tabela)
+            })
+        })
+    </script>
+</head>
+
+<body>
+    <main id="main">
+        <h1>Tabela html - koszyk</h1>
+        <p>Produkt:</p>
+        <div id="d1">
+            <script>
+                const select = $("<select>").attr("id", "wybor-produktu")
+
+                produkty.forEach(produkt => {
+                    const option = $("<option>").attr("value", `${produkt.id}`)
+                        .text(`${produkt.nazwa} (${produkt.cena.toFixed(2).replace('.', ',')} zł)`)
+                    select.append(option)
+                });
+
+                $("#d1").append(select)
+            </script>
+            <button id="dodaj">dodaj</button>
+        </div>
+        <div id="tabela-container">
+            <table>
+                <tr>
+                    <th>lp</th>
+                    <th>produkt</th>
+                    <th>cena</th>
+                    <th>ilość</th>
+                    <th>razem</th>
+                </tr>
+                <tr>
+                    <td colspan="4">suma</td>
+                    <td>00,00 zł</td>
+                </tr>
+            </table>
+        </div>
+    </main>
+
+</body>
+
+</html>