JSFiddle - React, Tailwind, and code Playground

by crazzzy

HTML

<p>
  Кол-во точек: <input type="number" value="300" id="points_count" />
  <button id="create_points_btn">Создать</button>
</p>
<div id="points"></div>
<p>
  <button id="select_all_btn">Выбрать все</button>
  <button id="clear_all_btn">Убрать выделение</button>
  <button id="make_json_btn">Сформировать json</button>
</p>
<p>
<textarea id="json" cols="200" rows="15" placeholder="JSON"></textarea>
</p>

CSS

.point {
  display: inline-block;
  border: 1px black solid;
  padding: 4px;
}

.point.active {
  background: yellow;
}

JavaScript

$('#create_points_btn').on('click', function() {
	$('#points').html('');
  for (var i = 1; i <= $('#points_count').val(); i++) {
    $('#points').append('<div class="point" data-val="' + i * 3 + '">' + i + '</div>');
  }
}).click();

$('#points').on('click', '.point', function() {
	$(this).toggleClass('active');
});

$('#select_all_btn').on('click', function() {
	$('.point').addClass('active');
});

$('#clear_all_btn').on('click', function() {
	$('.point').removeClass('active');
});

$('#make_json_btn').on('click', function() {
	var t0 = performance.now();

	var json = [];
  $('#points').find('.point.active').each(function(idx, elem) {
  	json.push({id: $(elem).text(), val: $(elem).data('val')});
  });
  $('#json').text(JSON.stringify(json));
  
  var t1 = performance.now();
  alert('Время обработки: ' + (t1 - t0) + ' мс');
});