Untitled

<html>

<head>
    <title>Projekt</title>
    <meta charset="utf-8">

    <style>
        body
        {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
        }

        #sklep
        {
            margin: auto;
            width: 50%;
            height: auto;
            background-color: dimgray;
            text-align: center;
        }

        #koszyk
        {
            clear: both;
            margin: auto;
            width: 70%;
            height: auto;
            background-color: silver;
            border-radius: 10px;
            padding: 10px;
        }

        .produkt
        {
            float: left;
            width: 32%;
            border: 2px solid white;
            border-radius: 5px;
            background-color: blue;
        }

        .koszyk
        {
            border: 2px solid white;
            border-radius: 5px;
            background-color: lime;
            text-align: center;
        }

        .zdjecie
        {
            border-radius: 10px;
        }

        button
        {
            margin-bottom: 10px;
        }

    </style>

</head>

<body>
    <div id="sklep">

    </div>

    <div id="koszyk">

    </div>

    <script>

        var div_sklep  = document.querySelector("#sklep");
        var div_koszyk = document.querySelector("#koszyk");
        var Tab        = new Array;
        var TabKoszyk  = new Array;
        var html       = "";
        var html2      = "";

        class Pamiec
            {
                constructor(tytul, sciezka, cena, ilosc)
                {
                    this.tytul   = tytul;
                    this.sciezka = sciezka;
                    this.cena    = cena;
                    this.ilosc   = 1;
                }
            }

        class Koszyk
            {
                constructor(index)
                {
                    this.index = index;
                    this.ilosc = 1;
                }
            }

        Tab.push(new Pamiec("Nowa pamięć 1", "obraz01.jpg", 333, 1));
        Tab.push(new Pamiec("Nowa pamięć 2", "obraz02.jpg", 562, 1));
        Tab.push(new Pamiec("Nowa pamięć 3", "obraz03.jpg", 200, 1));
        Tab.push(new Pamiec("Nowa pamięć 4", "obraz04.jpg", 105, 1));
        Tab.push(new Pamiec("Nowa pamięć 5", "obraz05.jpg", 640, 1));
        Tab.push(new Pamiec("Nowa pamięć 6", "obraz06.jpg", 345, 1));

        //console.log(Tab);

        for(i in Tab)
            {
                html += "<div class='produkt'> <h3> " + Tab[i].tytul   + "</h3>";
                html += "<img class='zdjecie' src='"  + Tab[i].sciezka + "'/>";
                html += "<h3> Cena: "                 + Tab[i].cena    + "</h3>";
                html += "<button onclick='dodajDoKoszyka(" + i +")'> Dodaj do koszyka </button>";
                html += "</div>";
            }
        div_sklep.innerHTML = html;

        function dodajDoKoszyka(index)
        {
            for(var i in TabKoszyk)
                {
                    if(TabKoszyk[i].index == index)
                        {
                            TabKoszyk[i].ilosc++;
                            console.log(TabKoszyk);
                            wyswietlKoszyk();
                            return;
                        }
                }
            TabKoszyk.push(new Koszyk(index));
            console.log(TabKoszyk);
            wyswietlKoszyk();
        }

        function wyswietlKoszyk()
        {
            html2 = "";

            for(var i in TabKoszyk)
                {
                    var x = TabKoszyk[i].index;
                    html2 += "<div class='koszyk'> <h4> Tytuł: " + Tab[x].tytul + "</h4>";
                    html2 += "<h4> Ilość: " + TabKoszyk[i].ilosc + "</h4>";
                    html2 += "<h4> Cena (szt.): " + Tab[x].cena + "</h4>";
                    html2 += "<h4> Razem: " + TabKoszyk[i].ilosc * Tab[x].cena + "</h4>";
                    html2 += "</div>";
                }
            div_koszyk.innerHTML = html2;
        }


    </script>

</body>

</html>