JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<div style="height: 300px;">
  <button id="btn">
    Click here for a random quote!
  </button>
  <pre id="target"></pre>
</div>

JavaScript

const quotes = [
  `A good programmer looks both ways before crossing a one-way street.`,
  `A computer program does what you tell it to do, not what you want it to do.`,
  `Only half of programming is coding. The other 90% is debugging`,
  `The best thing about a boolean is even if you are wrong, you are only off by a bit.`,
  `There is nothing quite so permanent as a quick fix.`,
  `There’s no test like production.`
];

const button = document.getElementById('btn');
const pre = document.getElementById('target');

btn.addEventListener('click', (e) => {
  pre.innerHTML = quotes[Math.floor(Math.random() * quotes.length)];
});