JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<button class="add-item">
  Добавить элемент
</button>


<div class="box"></div>

CSS

.box {
  margin-top: 40px;
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 10px;
  box-sizing: border-box;
}

JavaScript

// Классы ES6

class ItemBox {
	constructor(){
  	this.items = []
  }
  
  add(item){
  	this.items.push(item)
  }
  
  show(id){
  	return this.items[id]
  }
}

class Item {
	// @"Default name" ES6 default parameters
	constructor(name = "Default name"){
  	this.name = name  
    this.items = []
  }
}

// Константы, глабалки
const ITEM_BOX = new ItemBox()
let counter = 0


// Инициализация объектов
let defaultItem = new Item()
let item1 = new Item("First item")
let item2 = new Item("Second item")

ITEM_BOX.add(defaultItem)
ITEM_BOX.add(item1)
ITEM_BOX.add(item2)

// Обработчики

$(".add-item").click(function(){

  if(counter < ITEM_BOX.items.length){
  	$(".box").append(
    	JSON.stringify(ITEM_BOX.show(counter))
    )
  }
  else {
    alert("Больше нет элементов")
  }
  
  counter++
})