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');

function getRandomIndex() {
  return Math.floor(Math.random() * quotes.length);
}


let previousIndex = null;
btn.addEventListener('click', (e) => {
  let randomIndex = getRandomIndex();

  while (randomIndex === previousIndex) {
    randomIndex = getRandomIndex();
  }

  const randomQuote = quotes[randomIndex];
  previousIndex = randomIndex;
  pre.innerHTML = randomQuote;

});