klienckie_stefanczyk/Lekcja_04/z2.html

<!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>