<div class="items"></div>
.items{
display: flex;
justify-content: space-around;
}
img{
display: block;
width: 140px;
height: 150px;
}
.items div{
text-align: center;
border: 1px solid #ccc;
padding: 4px;
}
let parent = document.querySelector(".items");
let units = [{
"image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
"name": "iphone 6",
"price": "$200",
},{
"image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
"name": "iphone7",
"price": "$400",
},{
"image": "https://i.pinimg.com/originals/d6/59/0a/d6590a0b654ba020d2cd61dfc5c31944.jpg",
"name" : "iphone 8",
"price": "$500",
},{
"image": "https://avatars.mds.yandex.net/get-pdb/2111302/c75957b4-10f8-464f-bdd0-df6c80a58227/s1200",
"name": "iphone XS",
"price": "$2000",
}];
for(item in units){
let block = document.createElement("div");
let goo = "";
goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
goo += `<h3>${units[item].name}</h3>`;
goo += `<p>${units[item].price}</p>`;
goo += `<button>Купить</button>`;
block.innerHTML = goo;
parent.append(block);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.