Не могу добавить несколько обьектов в блок div ,каждый последующий обьект просто заменяет предыдущий и в сухом остатке я имею только один обьект на странице . классы я не использовал ни разу ,developer.mozilla сказал что все отлично и должно работать )). Надеюсь что тут подскажут косяк
let box1 = document.querySelector('.main__catalog_sale');
class BoxSale {
constructor(src, percent, name, discount, sale, buttonName) {
this.src = src;
this.percent = percent;
this.name = name;
this.discount = discount;
this.sale = sale;
this.buttonName = buttonName;
}
render() {
let box = `<div class="main__catalog_box">
<div class="main__catalog_discount">${this.percent}</div>
<img src="${this.src}" alt="product">
<h1>${this.name}</h1>
<ul>
<li>xs</li>
<li>s</li>
<li>m</li>
<li>l</li>
<li>xl</li>
<li>xxl</li>
</ul>
<div class="main__catalog_color">
<div class="main__catalog_color-black"></div>
<div class="main__catalog_color-red"></div>
</div>
<div class="main__catalog_box-price">
<p>${this.discount}</p>
<p>${this.sale}</p>
</div>
<button class="btn">${this.buttonName}</button>
</div>`;
box1.innerHTML = box;
}
}
let cardSale = new BoxSale('./images/gallery/2.jpg', '-53%', 'Портупея "Пеппи"', '4990 p.', '2990 p.', 'заказать');
cardSale.render();
let cardSal = new BoxSale('./images/gallery/2.jpg', '-53%', 'Портупея "Пеппи"', '4990 p.', '2990 p.', 'заказать');
cardSal.render();
ну и сам код css этого блока
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
transition: .5s;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 2;
list-style-type: none;
outline: none;
}
.main__catalog_sale {
display: flex;
justify-content: center;
flex-wrap: wrap;
}