<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/js.png" sizes="64x64">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <section class="goods">
        <div class="container"></div>
    </section>
    <section class="cart">
        <div class="container"></div>
    </section>
    <script src="script.js"></script>
</body>
</html>

body, div, h1, h2, h3, h4, p, a, b, span, button {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1000px;
  margin: auto;
}

.goods .container {
  display: flex;
  flex-wrap: wrap;
}
.goods .container .goods__item {
  width: 32%;
  margin-right: 2%;
}
.goods .container .goods__item a img {
  width: 100%;
}
.goods .container .goods__item .goods__tx {
  padding: 1rem;
  background: #eee;
}
.goods .container .goods__item .goods__tx .goods__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods .container .goods__item .goods__tx .goods__bottom .goods__btn {
  display: flex;
}
.goods .container .goods__item .goods__tx .goods__bottom .goods__btn button {
  width: 30px;
  height: 30px;
  margin-left: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: none;
  background: #f43737;
  color: #fff;
  cursor: pointer;
}
.goods .container .goods__item:nth-child(3n) {
  margin-right: 0;
}/*# sourceMappingURL=style.css.map */
// get data
async function getData() {
  let result = await fetch("https://jsonplaceholder.typicode.com/posts")
    .then((response) => response.json());
  return result;
}

// show data
getData().then((result) => showData(result));
function showData(allGoods) {
  let outGoods = "";
  for (let key in allGoods) {
    outGoods += `
        <div class="goods__item">
            <a><img src="${allGoods[key].image}"/></a>
            <div class="goods__tx">
                <h2>${allGoods[key].name}</h2>
                <p>${allGoods[key].desc}</p>
                <span>${allGoods[key].availability}</span>
                <div class="goods__bottom">
                    <b>${allGoods[key].price} $</b>
                    <div class="goods__btn">
                        <button class="goods__minus" data-id="${key}">-</button>
                        <button class="goods__plus" data-id="${key}">+</button>
                    </div>
                </div>
            </div>
        </div>`;
  }
  let goodsContent = document.querySelector(".goods .container");
  goodsContent.innerHTML = outGoods;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.