JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<div class="container">
  <h1>
    Патрушев Бинго
  </h1>
  <button>
    Ещё
  </button>
  <div id="result"></div>

</div>

CSS

button {
  font-size: x-large;
  padding: 0 5em;
  }
body {
  font-family: Times, Times New Roman, serif;
  font-size: larger;
  }

JavaScript

const bingo = [
	[
  	'Ястребы из вашингтона',
    'Западные партнеры',
    'Поджигатели из Пентагона',
    'Сорос и подручные',
    'Байден и клевреты США',
  ],
  [
  	'распространяют',
    'пропагандируют',
    'продвигают',
    'сеют',
    'порождают',
  ],
  [
  	'в России',
    'в сердцах молодежи',
    'на наших границах',
    'в суверенной демократии',
    'на границах ОДКБ',
  ],
  [
  	'западные',
    'псевдолиберальные',
    'русофобские',
    'очерняющие Ивана Грозного',
    'натовские',
  ],
  [
  	'ценности',
    'идеи',
    'практики',
    'клеветнические истории',
    'форпосты',
  ],
]

const resultDiv = document.getElementById('result'); 

function randomIndex(max) {
	return Math.floor(Math.random() * max);
}

function addQuote() {
  const quote = bingo
  	.reduce((acc, current) => {
    	acc.push(current[randomIndex(current.length)]);
      return acc;
    }, [])
    .join(' ');
  const p = document.createElement('p');
  p.innerHTML = `<q>${quote}</q>`;
	resultDiv.prepend(p);
}

document.querySelector('button').addEventListener('click', addQuote);
document.addEventListener('DOMContentLoaded', addQuote);