Create a bar chart of word lengths from a prompted sentence.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
<button>click me</button>
</div>
<canvas></canvas>
JavaScript
let chart = null;
document.querySelector('button').addEventListener('click', e => {
const str = prompt('Введи предложение');
const words = (str.match(/[\wа-яё]+/gi) || []);
const lengths = words.map(n => n.length);
if (chart) {
chart.data.datasets[0].data = lengths;
chart.data.labels = words;
chart.update();
} else {
chart = new Chart(document.querySelector('canvas'), {
type: 'bar',
data: {
labels: words,
datasets: [
{
label: 'Количество букв',
data: lengths,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
}
});