from browser import document

def colstr(amount, letterv):

  if amount == 0:
    return "."
  elif amount > 0:
    return '<span style="color: skyblue;">'+chr(letterv+97)*amount+'</span>'
  else:
    return '<span style="color: red;">'+chr(letterv+65)*-amount+'</span>'


def swag(ev):
  s1val = document["side1"].value.lower()
  s2val = document["side2"].value.lower()
  
  s1arr = [s1val.count(chr(n)) for n in range(97,123)]
  s2arr = [s2val.count(chr(n)) for n in range(97,123)]
  
  t = ([a_i - b_i for a_i, b_i in zip(s1arr, s2arr)])
  
  document["out"].innerHTML = ' '.join([colstr(t[i], i) for i in range(len(t))])
  
  if sum([abs(n) for n in t]) == 0:
    document["yay"].innerHTML = '<span style="color: lime;">:)</span>'
  else:
    document["yay"].innerHTML = ''

document.bind("keyup", swag)
document.bind("keydown", swag)