Sarcasm Case Element

by Carson Evans

HTML

<sarcasm-case start-with="lower">the quick brown fox jumps over the lazy dog.</sarcasm-case>

JavaScript

class SarcasmCase extends HTMLElement {
  connectedCallback() {
    setTimeout(() => this.innerHTML = this.#sarcasmify(this.innerHTML))
  }
  
  get startWith() {
  	return this.getAttribute('start-with')
  }
  
  set startWith(value) {
  	this.setAttribute('start-with', value)
  }

  #sarcasmify(text) {
    let newText = ''

    let flip = (() => {
    	if (
      	this.startWith === null ||
      	this.startWith === '' ||
        this.startWith === 'lower'
      ) return true
      else if (this.startWith === 'upper') return false
      else throw new Error(`${this.startWith} is not a vaid value for attribute start-with.`)
    })()

    for (const char of text) {
      if (flip) {
        newText += char.toLowerCase()
      } else {
        newText += char.toUpperCase()
      }

      if (/^[a-z]/i.test(char)) {
        flip = !flip
      }
    }

    return newText
  }
}

customElements.define('sarcasm-case', SarcasmCase)