JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<button id="load">Switch message</button>
<div id="output"></div>

JavaScript

var app = {
    'messages': [{
        'author': 'Maya Angelou',
            'quote': "If you don't like something, change it. If you can't change it, change your attitude."
    }, {
        'author': 'Richard Feynman',
            'quote': "Hell, if I could explain it to the average person, it wouldn't have been worth the Nobel prize."
    }, {
        'author': 'Eddie Izzard',
            'quote': "Cats have a scam going – you buy the food, they eat the food, they fuck off; that's the deal."
    }, {
        'author': 'George Carlin',
            'quote': "I would never want to be a member of a group whose symbol was a man nailed to two pieces of wood. Especially if it's me!"
    }],
        'textProp': 'textContent' in document.body ? 'textContent' : 'innerText',
        'outputTo': document.querySelector('#output'),
        'trigger': document.querySelector('#load'),
        'quote': function () {
        var n = Math.floor(Math.random() * this.messages.length),
            f = document.createElement('figure'),
            c = document.createElement('figcaption'),
            frag = document.createDocumentFragment();
        f[this.textProp] = this.messages[n].quote;
        c[this.textProp] = this.messages[n].author;
        frag.appendChild(f);
        frag.appendChild(c);
        this.outputTo.innerHTML = '';
        this.outputTo.appendChild(frag);
    },
    'clickhandler' : function(){
        this.trigger.addEventListener('click', this.quote);
    }
};