JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<ul class="products">
</ul>

JavaScript

var makeElement = function(tagName, className, text) {
  var element = document.createElement(tagName);
  element.classList.add(className);
  if (text) {
    element.textContent = text;
  }
  return element;
};

var createCards = function(product) {
  var listItems = [];
  for (var i = 0; i < product.length; i++) {
    var listItem = makeElement('li', 'product');

    var title = makeElement('h3', 'product__title', product[i].text);
    listItem.appendChild(title);

    var picture = makeElement('img', 'product__image');
    picture.src = product[i].imgUrl;
    picture.alt = product[i].text;
    listItem.appendChild(picture);

    var price = makeElement('p', 'product__price', product[i].price);
    listItem.appendChild(price);
    listItems.push(listItem);
  }
  return listItems;
};

var cardList = document.querySelector('.products');

var productOne = {
  isAvailable: true,
  imgUrl: 'device/item-1.jpg',
  text: 'Samsung',
  price: 100,
  isSpecial: true,
  specialPrice: 300
};
var productTwo = {
  isAvailable: true,
  imgUrl: 'device/item-1.jpg',
  text: 'Apple',
  price: 500,
  isSpecial: false,
  specialPrice: 300
};

var productList = [productOne, productTwo];
var cardItem = createCards(productList);
for (var i = 0; i < cardItem.length; i++) {
  cardList.appendChild(cardItem[i]);
}