JSFiddle - React, Tailwind, and code Playground

by ifinto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<div class="text js-text"></div>
<button class="btn-next js-next">
 Next
</button>

CSS

.text {
  font-size: 25px;
  font-family: Arial;
  margin: 40px 0 50px 10px;
}
.btn-next {
  width: 200px;
  height: 50px;
  margin: 0 0 0 10px;
}

JavaScript

var data = [
'фа мажор',
'ре минор',
'соль мажор',
'ми минор',
'соль мажор',
'си бемоль мажор',
'соль минор',
'ре мажор',
'си минор',
'ми бемоль мажор',
'до минор',
'ля мажор',
'фа диез минор'
];

$('.js-next').on('click', function(){
	var i = Math.floor(Math.random() * data.length);
	$('.js-text').html(data[i]);
});

var xdata = [
'до',
'ре',
'ми',
'фа',
'соль',
'ля',
'си'
];

var xdata = [
'доминант. трезвучие',
'доминант. секстаккорд',
'доминант. квартсекстаккорд',
'субдоминант. трезвучие',
'субдоминант. секстаккорд',
'субдоминант. квартсекстаккорд',
];

var xdata = [
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
];