JSFiddle - React, Tailwind, and code Playground

by Chuck Tornton

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

CSS

html, body {
    margin: 0;
    color: #fff;
}

#cart_content {
    background: #82abbd;
    height: 100%;
    min-width: 100%;
    float: left;
}

.item_box {
    border: 1px solid black;
    width: 225px;
    height: 400px;
    margin: 10px;
    border-radius: 4px;
    float: left;
    position: inherit;
    color: #fff;
}

.image_box {
    height: 250px;
    display: flex;
    align-items: center;
}

.image_box img {
    background-repeat: no-repeat;
    width: 220px;
}

.item_text {
    text-align: center;
}

JavaScript

let bucket = [

        {id: 1, trademark: 'Apple', device: 'notebook', model: 'Macbook Pro 15', img: '1.jpeg', price: 102800, count: 3, residue: 0},
        {id: 2, trademark: 'Lenovo', device: 'notebook', model: 'Yoga 5', img: '2.png', price: 61200, count: 2, residue: 20},
        {id: 5, trademark: 'Samsung', device: 'notebook', model: 'NP558', img: '3.jpg', price: 54900, count: 4, residue: 19},
        {id: 3, trademark: 'Samsung', device: 'notebook', model: 'NP538', img: '4.jpeg', price: 54930, count: 1, residue: 10}
];

function countPrice() {
    let summ = 0;

    for (let r = 0; r < bucket.length; r++) {

        summ += bucket[r].price * bucket[r].count;
    }
    let ms = '<p> Общая сумма: ' + summ + ' руб.<hr></p><br> Выбранные товары:' +
        '<hr>';
    return ms;
}
countPrice();



document.write(countPrice());

function productsFromBucket() {
    let numbersOfProduct = bucket.length;

    for (let i = 0; i <= numbersOfProduct; i++) {
        let md =
            '<div class="item_box">' +
                '<div class="image_box">' +
                    '<img src="' +  bucket[i].img + '" alt="1">' +
                '</div>' +
                '<div class="item_text">' +
                    '<h2 class="item_title">' + bucket[i].model + '</h2>' +
                    '<p class="item_title">Выбрано: ' + bucket[i].count + ' шт.</p>' +
                    '<p> Цена: ' + '<span class="item_price">' + bucket[i].price + '</span>' + ' RUB</p>' +
                '</div>' +
            '</div>' +
            '<hr>';
        document.write(md);
    }
}
productsFromBucket();