JSFiddle - React, Tailwind, and code Playground

by AntowaKartowa

HTML

<h1>Lotto</h1>

<h2>SuperEnaLotto <button class="button clear-enalotto-numbers">Clear</button> <button class="button get-enalotto-numbers">Generate</button></h2>
<textarea cols=80 rows=6 class="textarea put-enalotto-numbers"></textarea>

<h2>SuperLotto <button class="button clear-super-numbers">Clear</button> <button class="button get-super-numbers">Generate</button></h2>
<textarea cols=80 rows=6 class="textarea put-super-numbers"></textarea>

<h2>Maxima <button class="button clear-maxima-numbers">Clear</button> <button class="button get-maxima-numbers">Generate</button></h2>
<textarea cols=80 rows=6 class="textarea put-maxima-numbers"></textarea>

<h2>Triyka <button class="button clear-triyka-numbers">Clear</button> <button class="button get-triyka-numbers">Generate</button></h2>
<textarea cols=80 rows=6 class="textarea put-triyka-numbers"></textarea>

CSS

body {
  padding: 20px;
  font-family: Helvetica, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

h1, h2, h3 {
  margin: 1.5em 0 .5em;
  max-width: 270px;
}
h1 { font-size: 30px; margin-top: 0; }
h2 { font-size: 20px }

textarea {
  display: block;
  width: 270px;
  border: none;
  background: transparent;
  font-family: "Segoe UI Mono", "DejaVu Sans Mono", monospace;
}

.button {
  float: right;
  margin-left: 5px;
}

JavaScript

setLottoBlock('enalotto', 91, 6);
setLottoBlock('super', 53, 6);
setLottoBlock('maxima', 46, 5);
setLottoBlock('triyka', 1000, 1, getBetTriyka);

function setLottoBlock(alias, rangeSize, betNumbers, getBetFunc = getBet) {
	const range = _.range(1, rangeSize);
	let getBtn = document.body.querySelector(`.get-${alias}-numbers`);
  let clrBtn = document.body.querySelector(`.clear-${alias}-numbers`);
  let putArea = document.body.querySelector(`.put-${alias}-numbers`);
  
  getBtn.addEventListener('click', getBetFunc.bind(this, putArea, range, betNumbers));
  clrBtn.addEventListener('click', clearAll.bind(this, putArea));
}

function getBet(area, range, qty) {
	let prevValue = area.value.length ? `${area.value}\n` : area.value;
	area.innerHTML = prevValue + _.sample(range, qty)
  		.map(num => ['', '', num].join(' ').slice(-2))
  		.sort((a, b) => a - b).join(',  ');
}

function getBetTriyka(area, range, qty) {
	let prevValue = area.value.length ? `${area.value}\n` : area.value;
	let newValue = ['0', '0', ...(--(_.sample(range, qty)[0])).toString().split('')].slice(-3).join(', ');
	area.innerHTML = prevValue + newValue;
}

function clearAll(area) {
	area.innerHTML = '';
}