Stylized Console Text Test

Testing styling console text with overly complicated code.

by MegaScience

HTML

<form id="rainbowForm" name="rainbowForm">
  <output id="rainbowText" for="rainbowInput" name="rainbowText" lang="en">This is test text.</output>
  <input id="rainbowInput" name="rainbowInput" type="text" placeholder="Console message here" /><input id="rainbowSubmit" name="rainbowSubmit" type="button" value="Submit" />
</form>

CSS

body {
  background-color: black;
}

#rainbowText {
  display: block;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 3em;
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

JavaScript

class rainbowLibraryClass {
    #form = document.forms['rainbowForm']

    #output = this.#form.elements['rainbowText']
    #input = this.#form.elements['rainbowInput']
    #submit = this.#form.elements['rainbowSubmit']

    #generateRainbowCSS = (index, length, universalCSS = []) => [`color: hsl(${360 * index / length}, 80%, 50%)`, ...universalCSS].join('; ')

    #generateRainbow(txt = '', { mode = 'html', universalCSS = [] } = { mode: 'html', universalCSS: [] }) {
        if (typeof txt !== 'string') return [txt]

        const txtCharacters = [...txt]
        switch (mode) {
            case 'console':
                const consoleStyles = [txtCharacters.map(txtCharacter => `%c${txtCharacter}`).join('')]
                //for (const [index,] of txtCharacters.entries())
                for (const index of txtCharacters.keys())
                    consoleStyles.push(this.#generateRainbowCSS(index, txtCharacters.length, universalCSS))
                return consoleStyles
            case 'html':
            default:
                return txtCharacters.map((txtCharacter, index) => `<span style="${this.#generateRainbowCSS(index, txtCharacters.length, universalCSS)}">${txtCharacter}</span>`)
        }
    }

    #processInput = e => {
        e.preventDefault()
        const txt = this.#input.value
        this.#output.innerHTML = this.#generateRainbow(txt).join('')
        console.log(...this.#generateRainbow(txt, {
            mode: 'console', universalCSS: [
                'font-size: 3em',
                'text-shadow: 2px 2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, -2px -2px 0 #000, 2px 0px 0 #000, 0px 2px 0 #000, -2px 0px 0 #000, 0px -2px 0 #000'
            ]
        }))
        return false
    }

    constructor() {
        this.#output.innerHTML = this.#generateRainbow(this.#output.textContent).join('')
        this.#submit.addEventListener('click', this.#processInput)
        this.#form.addEventListener('submit', this.#processInput)
    }
}

const...