JSFiddle - React, Tailwind, and code Playground

by ishtar

HTML

<body>
  <div class="container">
  <pre id="round-output"></pre><pre id="square-output"></pre>
  <pre id="input">(we followed [the Path) crumbled beneath
(our feet] became [one mind) can absorb
(the truth] is that Osiris
understands [nothing) can describe the
joy of shared (thought] you knew what
they were didn't [you) haven't lived
as they (do] you wish to find [your future)
is (predetermined] individuals will never
find [answers) lie in forbidden (places]
bound by [shared dreams) will reveal
(your nature]
is to [destroy)
your sense of (self]-preservation coddles
leaders into ritual [complacence) is something
(i have forgotten] loneliness uncertainty
life [alone) i see with my six (eyes] watching
from beyond [the heliopause) is a curtain
before the next and final (act] decisively
to meld with [yourselves) will know (you]
together alone striving toward your final [purpose)
built to move as they (move]
to stand apart from your [heroes) are
commonplace these (days] of change
draw ever [closer) looks at what is forbidden
can only (help] them help [you) are so afraid
of the (taboos] must be [overthrown) rulers
would agree i'm (sure]ly you are convinced by
[now) go and
find yourselves]</pre><pre id="complete-output"></pre>
  </div>
</body>

CSS

body {
  margin: 0;
  font-size: 10pt;
  line-height: 1.2em;
}

.container {
  margin: 1em auto;
  padding: 20;
  /*width: 990px;*/
}

pre {
  font-family: 'Anonymous Pro', 'Source Code Pro', 'Menlo', monospace;
  vertical-align: top;
  display: inline-block;
  min-height: 35px;
  width: calc(50% - 20px);
  margin: 0;
  padding: 10px;
  white-space: pre-wrap;
}

#input, #complete-output {
  min-height: 600px;
}

#input {
  background: hsl(240, 100%, 85%);
}

#complete-output {
  background: hsl(120, 100%, 85%);
}

#round-output {
  background: hsl(60, 100%, 85%);
}

#square-output {
  background: hsl(0, 100%, 85%);
}

.round {
  background: hsl(60, 100%, 85%);
}

.square {
  background: hsl(0, 100%, 85%);
}

.round.square {
  background: hsl(30, 100%, 85%);
}

CoffeeScript

$(document).ready ->
  console.log('started')

  input = $('#input')
  roundOutput = $('#round-output')
  squareOutput = $('#square-output')
  completeOutput = $('#complete-output')

  inputChars = input.text().split('')

  inputHtml = []

  for c, i in inputChars
    inputHtml.push("<span id='char-#{i}'>#{c}</span>")

  input.html(inputHtml.join(''))

  roundBracketIsOpen = false
  squareBracketIsOpen = false

  index = 0

  processChar = (c, i) ->

    if c == "\n"
      c = ' '

    if c == '('
      roundBracketIsOpen = true
      removeHighlight('round')
      roundOutput.text('')
    if c == '['
      squareBracketIsOpen = true
      squareOutput.text('')
      removeHighlight('square')

    if c == ')'
      roundBracketIsOpen = false
      completeOutput.append(roundOutput.text().charAt(0).toUpperCase() + roundOutput.text().slice(1) + ".\n")
    if c == ']'
      squareBracketIsOpen = false
      completeOutput.append(squareOutput.text().charAt(0).toUpperCase() + squareOutput.text().slice(1) + ".\n")

    if roundBracketIsOpen && !"[]()".includes?(c)
      roundOutput.append(c)
    if squareBracketIsOpen && !"[]()".includes?(c)
      squareOutput.append(c)

    addHighlight(i, roundBracketIsOpen, squareBracketIsOpen)

  processNextChar = ->
    processChar(inputChars.shift(), index)
    index += 1

  addHighlight = (index, isRound, isSquare) ->
    if isRound
      $("#char-#{index}").addClass('round')
    if isSquare
      $("#char-#{index}").addClass('square')

  removeHighlight = (type) ->
    $(".#{type}").removeClass(type)

  setInterval(processNextChar, 50)