Fireworks added to the mix

app.js

import template from './index.html';
import {} from './app.css';

import YOPFForm from './form/form.index';
import YOPFFireworks from './fireworks/fireworks.index';

(function() {
    function onPhraseChange(phrase) {
        fireworks.doFireworks(phrase);
    }

    document.body.innerHTML = template;
    const form = new YOPFForm(document.getElementById('phrase-form-wrapper'));
    const fireworks = new YOPFFireworks(document.getElementById('phrase-fireworks-wrapper'));
    form.listen(onPhraseChange);
})();

fireworks.css

.phraseText {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

fireworks.index.js

const fireworks = require('fireworks');
// get the styles
import {} from './fireworks.css';

class YOPFFireworks{
    constructor(element) {
        this._element = element;
    }

    get centerX() {
        return this._centerX ? this._centerX : this._centerX = this._element.offsetLeft + this._element.offsetWidth / 2;
    }

    get centerY() {
        return this._centerY ? this._centerY : this._centerY = this._element.offsetTop + this._element.offsetHeight / 2;
    }

    doFireworks(phrase) {
        this._element.innerHTML = '<h1 class="phraseText">' + phrase + '</h1>';

        if (this._interval) {
            return;
        }

        this._interval = setInterval(() => {
            const newX = Math.random()*100*(Math.random() < .5 ? -1 : 1);
            const newY = Math.random()*100*(Math.random() < .5 ? -1 : 1);
            fireworks({
                x: this.centerX + newX,
                y: this.centerY + newY,
                colors: ["#cc3333", "#4CAF50", "#81C784"]
            });
        }, 500);
    }

    stopFireworks() {
        if (!this._interval) {
            return;
        }
        clearInterval(this._interval);
        this._interval = null;
    }
}
export default YOPFFireworks;